Monday, 29 October 2018

React Navigation 2: How to check previous scene and to disable tab change

I have a tab navigation. One of my tabs has a form and I would like to disable navigate event if my form data is not saved.

In ver.1, the tabBarOnPress method provides previousScene, scene and jumpToIndex, so I was able to check which scene I am leaving and to access its props.

Now in ver.2, the tabBarOnPress method provides the navigation props for the scene, but the previous scene prop is missing :/

navigationOptions: {
    tabBarOnPress: ({ navigation, defaultHandler }) => {
        // Check the previous screen
        // If I am leaving the home screen and the user has unsaved data
        // disable tab navigation
        // else change to the pressed tab
    },
},

Also, I tried with the navigation event listeners but the NAVIGATE action is already dispatched:

props.navigation.addListener('willBlur', () => {
    // Disable tab switching;
}),

Simple snack: https://snack.expo.io/@hristoeftimov/handle-tab-changes-in-react-navigation-v2

Any solutions how to disable tab switching before leave a tab?



from React Navigation 2: How to check previous scene and to disable tab change

No comments:

Post a Comment