I have been trying to implement nested Navigators for my app. The Structure of the app is quite simple.
RootNavigation(TabNavigator):
- Camera
- HomeNavigation (TabNavigator)
- MessagesList
So the app starts on the HomeNavigation on display by default. Swipe Left for Camera and swipe Right to MessagesList.
Now the HomeNavigation is further divided like this:
HomeNavigation (TabNavigator):
- News Feed List
- NotificationsList
- Search News
In this Navigator, News Feed List is shown by default. Now when I go to NotificationsList or Search News in Home Navigation. Swiping Left or Right takes me to Camera and MessagesList which I don't want. I only want this feature when I am in News Feed List. Now I was reading the docs but couldn't quite understand how to disable swiping in the RootNavigation (Parent Navigator) from inside the child. Also later in the development stage the News Feed List will be converted to a StackNavigator where a user can select each news item and read it in full detail. I would also want it to be disabled when going deeper in the NewsFeedList.
Maybe this code will help better understand my situation:
HomeNavigationConfigurtation:
const homeNavigationConfiguration = {
TabOneNavigation: {
screen: FeedScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor, focused }) => {
return (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={30}
style={{ color: tintColor }}
/>
);
}
}
},
TabTwoNavigation: {
screen: SearchTab,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor, focused }) => {
return (
<Ionicons
name={focused ? 'ios-search' : 'ios-search-outline'}
size={30}
style={{ color: tintColor }}
/>
);
}
}
},
TabThreeNavigation: {
screen: NotificationTab,
navigationOptions: {
tabBarLabel: 'Notify',
tabBarIcon: ({ tintColor, focused }) => {
return (
<Ionicons
name={focused ? 'ios-list' : 'ios-list-outline'}
size={30}
style={{ color: tintColor }}
/>
);
}
}
}
};
const tabBarConfiguration = {
//...other configs
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: '#347FC4',
inactiveTintColor: '#929AA1',
activeBackgroundColor: '#FFF',
inactiveBackgroundColor: '#FFF'
}
};
export const HomeNavConfiguration = TabNavigator(routeConfiguration, tabBarConfiguration);
HomeNavigation:
class HomeNavigationextends Component {
render() {
const { dispatch, navigationState } = this.props;
return (
<HomeNavigationConfiguration
navigation={
addNavigationHelpers({
dispatch,
state: navigationState,
})
}
/>
);
}
}
const mapStateToProps = (state) => {
return {
navigationState: state.homeNavState,
};
};
export default connect(mapStateToProps)(HomeNavigation);
HomeNavigationReducer:
export default (state, action) => {
if (action.type === 'JUMP_TO_TAB') {
return { ...state, index: 0 };
}
return HomeNAvigationConfig.router.getStateForAction(action, state);
};
RootNavigationConfiguration:
const routeConfiguration = {
RootNavigationScreenLeft: {
screen: CameraScreen,
navigationOptions: {
tabBarVisible: false
}
},
RootNavigationScreenMiddle: {
screen: RootTab,
navigationOptions: {
tabBarVisible: false
}
},
RootNavigationScreenRight: {
screen: MessagesListScreen,
navigationOptions: {
tabBarVisible: false
}
}
};
const tabBarConfiguration = {
//...other configs
swipeEnabled: true,
animationEnabled: true,
lazy: true,
initialRouteName: 'RootNavigationScreenMiddle'
};
export const RootNavigationConfig = TabNavigator(routeConfiguration, tabBarConfiguration);
Root Navigation
class RootNavigationextends React.Component {
render() {
const { dispatch, navigationState } = this.props;
return (
<RootNavigationConfig
navigation={
addNavigationHelpers({
dispatch,
state: navigationState,
})
}
/>
);
}
}
const mapStateToProps = (state) => {
return {
navigationState: state.rootNavState,
};
};
export default connect(mapStateToProps)(RootNavigation);
Any solutions or advice will be highly appreciated. :)