React native Question posted in
The official React Native documentation can be found here.

Pause routing in react native, don't add a route to stack until a variable is true

In my messaging application, I have a variable isBiometricSuccessfull, when it becomes false, I route to biometrics screen. It is checked in Home component.

const HomeComponent = () => {
    const { isBiometricSuccessfull } = useHomeHook();
    const navigation: any = useNavigation();

    useFocusEffect(() => {

        if (!isBiometricSuccessfull && navigation.isReady()) {
            navigation.navigate('biometricsScreen');
        }
    });

   
    return (
           <HomeStackNavigator.Navigator
                screenOptions={{
                    headerShown: false,
                    animation: 'slide_from_right',
                }}>
                 .
                 .
                 .
           </HomeStackNavigator.Navigator>

         );
};

When I am on biometrics screen I have prevented going back.

useEffect(() => {
        BackHandler.addEventListener(ANDROID.hardware.event.hardwareBackPress, preventGoingBack);
        return () => {
            BackHandler.removeEventListener(ANDROID.hardware.event.hardwareBackPress, preventGoingBack);
        };
    }, [isBiometricSuccessfull]);

    function preventGoingBack(): boolean {
        return !isBiometricSuccessfull ? true : false;
    }

The issue arises when any other screen is pushed in navigation stack from any other hook.

For example, when user is on biometrics screen and clicks on a message notification from notification panel, it will route the user to chat route.

I want to prevent all type of routing from this biometrics screen.
I also want to resume the routing once isBiometricSuccessfull becomes true. Which means, continuing the above example, I want to route to chat once variable is true.

I have tried these react native navigation events, but these also seems not to pause routing.

Please guide me, please also tell if there possible improvement in my logic.
Thanks.

Tags:

2

Answers


  1. 0

    you can make complete different stack for the biometrics and when you got successfully get the biometrics then you will update the state to true otherwise its will be false through this no other screen can navigate. after getting access you can switch the stack.

    Login or Signup to reply.
  2. 0

    You can add a condition wherever you’re handling the routing if the current route is biometrics Screen and isBiometricSuccessfull is false then it shouldn’t do anything and else continue with the usual routing. But you’ll have to use useContext or redux to pass the isBiometricSuccessfull variable globally.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search