How to use Blur event for AppState in react native

Question

Please I need an example on how to use the 'blur' event for react native AppState. I am trying to respond to when the app is not in focus e.g. when the user pulls the notification drawer but I keep getting the error message Invariant Violation: Trying to subscribe to unknown event: "blur".

Answer 1

Based on the tags associated with the commit that this feature landed in (https://github.com/facebook/react-native/commit/d45818fe47c53a670db933cf805910e227aa79c9) it seems like that is only available starting in 0.61 and hasn't landed in a stable release yet. Make sure you're running 0.61.0-rc.0 or later.

Answer 2

According to documentation . Blur is [Android only]

"[Android only] Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the notification drawer. AppState won't change but the blur event will get fired."

if you still want to use it for android you can use it with condition for android only

import { Platform } from "react-native";

........

 componentDidMount() {
    if (Platform.OS === "android") {
      AppState.addEventListener("blur", this._handleAppStateBlur);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === "android") {
      AppState.removeEventListener("blur", this._handleAppStateBlur);
    }
  }

  _handleAppStateBlur = () => {
    console.log("blur");
  };