createBottomTabNavigator can't change tab from route 3 to route 2 - react-native

Question

I use createBottomTabNavigator in react navigation v3 and I have 3 route like that:
const Route = createBottomTabNavigator(
{
Home: {
screen: HomeRoute
}
Post: {
screen: PostRoute
},
Mark: {
screen: MarkRoute
},
}
)
but the problem or better say bug comes when I want to navigate from tab Mark to Post that doesn't navigate and change tab :(
any body can solve this problem? thanks!

Answer 1

For navigation, you use the navigate() function of the prop of the button you are using. For example,
If we define our createBottomTabNavigator to be,
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
}
);
We would move to the Settings tab using the navigate function of the button as seen below,
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate('Settings')}
/>
</View>
);
}
}
Here are more detailed examples, TAB-BASED-NAVIGATION

Answer 2

Define your route like this
const Route = createBottomTabNavigator(
{
Home: HomeRoute,
Post: PostRoute,
Mark: MarkRoute,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
return <View/>
},
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'gray'
style: {
backgroundColor: 'black'
},
labelStyle: {
fontSize: 12
},
},
}
);