Passing props to a dynamic TabNavigator
You can also leave the TabNavigator as is, and create a custom TabBar component with custom TabBarItem components. You can connect that custom TabBar to your redux state, and hide/display the custom TabBarItems according your needs.
And then you simply add all possible routes to the TabNavigator as you would always do.
Routes
const TabRoutes = createBottomTabNavigator({
First: {screen: SomeScreen},
Second: {screen: SomeStack},
Third: {screen: AnotherStack}
},{
initialRouteName: 'First',
tabBarComponent: CustomTabBar
});
CustomTabBar
Some basic example on how you could hide the tab bar items, so obviously this needs to be adjusted according your own requirements
import CustomTabBarItem from '...' ;
class CustomTabBar extends React.Component {
render() {
// a tab bar component has a routes object in the navigation state
const {navigation, appState} = this.props;
const routes = navigation.state.routes;
return (
<View style={styles.container}>
// You map over all existing routes defined in TabNavigator
{routes.map((route, index) => {
// This could be improved, but it's just to show a possible solution
if (appState && route.routeName === 'x') {
return <View/>;
} else if (!appState && route.routeName === 'y') {
return <View/>;
}
return (<CustomTabBarIcon
key={route.key}
name={route.routeName}
onPress={this.navigationHandler}
focused={navigation.state.index === index}
appState={appState}
/>);
})}
</View>
);
}
navigationHandler = (name) => {
const {navigation} = this.props;
navigation.navigate(name);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
flexDirection: 'row'
}
})
const mapStateToProps = (state) => {
return {
appState: state.app.appState // boolean
};
};
export default connect(mapStateToProps)(CustomTabBar);
CustomTabBarItem
class CustomTabBarItem extends React.PureComponent {
render() {
const {name, focused} = this.props;
return (
<View style={styles.tabItem}>
// Some icon maybe
<Text style={/*different style for focused / unfocused tab*/}>{name}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
tabItem: {
flex: 1
}
})