Check if screen is getting blurred or focus in React native?

Question

i am using this

useEffect(() => {
        const navFocusListener = navigation.addListener('didFocus', () => {
        console.log('focus');
    });

    return () => {
        navFocusListener.remove();
    };
  }, []);

I am using this code also tried other listeners. but there is no benefit, i am using react-native-immediate-call package for ussd dialing but as it doesn't have any callback. So i i call this function a dialer open for dialing for the USSD code. So now i want that when ussd dialing completes then comes back to screen and a api will call to get response. So how can i detect that USSD dialing is running running or completed so that i can make a request to the api.

Coligny

did you try my answer? https://mcmap.net/q/2023048/-check-if-screen-is-getting-blurred-or-focus-in-react-native – Florida

Answer 1

For focus listener; you must change 'didFocus' to 'focus', If you are using react navigation v5+ and you should update like below:

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, []);

You can examine its documentation from here.

Leges

this is not working, I also tried with this this is working if i navigate to another screen. But here i am not navigating. Here is getting a 3rd party api Modal of USSD. So here i want to hit a function when the USSD dialer modal will be cancel or completed by user. Then i want to hit a api key after the dialer is done. – Coligny

Answer 2

in react-navigation 5 you can do this to check screen is focus or blur, try this in react navigation 5 using usefocuseffect-hook

useEffect(
() => navigation.addListener('focus', () => {}),
[navigation]

);

useEffect(
() => navigation.addListener('blur', () => {}),
[navigation]

);

Selaginella

Answer 3

Try this thanks

    import { NavigationEvents } from "react-navigation";
    
    callback=()=>{
    alert('I m always working when you come this Screen')
    }
    
    in return (
    <Your Code>
    <NavigationEvents onWillFocus={() => callback()} />
    <Your Code/>
)

Ethylene

Answer 4

Actually, you need to detect app state if it is in foreground or background or needs to add callback function into react-native-immediate-call by writing native code of android or ios package like this

import React, { useRef, useState, useEffect } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      console.log("App has come to the foreground!");
    }

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log("AppState", appState.current);
  };

  return (
    <View style={styles.container}>
      <Text>Current state is: {appStateVisible}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default AppStateExample;

Florida