CODEWITHSUNDEEP
reactjsreact-nativeexporeact-navigation
Ethan Keshishian
Ethan Keshishian

Reputation: 83

Prevent going back to previous screen with React Native

I'm working on an app with React Native and React Navigation. For most of the app, I have a bottom tab navigator and header. However, in one section of the app, the user can make a call and is taken to a screen with no navigation. The user shouldn't be able to navigate to the previous screen without ending the call. How can I prevent the user from going back?

Upvotes: 1

Views: 2476

Answers (1)

George Fean
George Fean

Reputation: 981

if you use react-native-navigation v5, it supports several listeners and the one you need is beforeRemove this is being called before the screen gets removed and you can prevent it's default behaviour conditionally.

   useEffect(() => {
    navigation.addListener("beforeRemove", (e) => {
       if(yourCondition) {
         return ;
        } else {
      e.preventDefault();
     }
    });
}, [navigation]);

Upvotes: 3

Related Questions