Conditional in bottomtab

Question

I'm starting with React Native and I have this little issue right here. I have a bottomTabNavigator, if the user has permission, he navigates to ImageScreen, else, it navigates to the HomeScreen.

My function global.hasPermission() checks the permission and return true or false, so I want to be capable of changing the {screen: ImageScreen} depending on what the function returns. How can I do it? Where do I call my function hasPermission()?

Here's my tabNavigator:

const BottomTab = createBottomTabNavigator({
    Image: {
        screen: ImageScreen,
        navigationOptions: {
            tabBarLabel: 'Image Screen',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={'ios-camera'}
                    size={focused ? 30 : 26}
                    style={{ color: tintColor }}
                />
            ),
        },
    },
});

Answer 1

In my app I handle the Authentication throught React Context API ( https://reactjs.org/docs/context.html )

Some days ago I replied to a similar question, you can see how to create use the context here: How Redirect to Login if page is protected and the user is not signed in?

Like my previous answer, you can check user permission into ImageScreen's componentDidMount () and, iof he has no permission, you can redirect it to your home screen like this (assuming you home screen is contained into Stack Navigator):

// into your ImageScreen
componentDidMount () {
  const hasPermission = YourFunctionWhichReturnsTrueOrFalse()
  if (!hasPermission) this.props.navigation.navigate('home') // the title of your home screen here
}