Change navigation settings
I am creating an app with Reaction-native using react-navigation for routing. I know we can change the tab order in the react-navigation
original. But in my case I need to change the order of the tabs programmatically. Is there a way to do this?
source to share
Below is an example of "almost pseudocode". This should at least lead you in the right direction. The trick is to use a "connected" main navigation component that reacts to changes in the reducer store (in my case I kept the order of the tabs in the "settings" reducer) and force re-render the tabs and their order by changing the Property screenProps
is passed by the navigation reaction to each navigator. Then there is a component TabSelector
that returns the correct screen based on the missing props. Sorry if it's not clear what I mean, but English is not my main language :)
import Tab1 from 'app/components/Tab1';
import Tab2 from 'app/components/Tab2';
// ... all the imports for react-navigation
const TabSelector = (props) => {
switch(props.tab) {
case 1:
return <Tab1 {...props} />;
case 2:
return <Tab2 {...props} />;
}
};
const Tabs = {
PreferredTab: {
screen: ({ screenProps }) => (
<TabSelector tab={screenProps.firstTab} />
),
navigationOptions: ({ screenProps }) => ({
// write label and icon based on screenProps.firstTab
})
},
OtherTab: {
screen: ({ screenProps }) => (
<TabSelector tab={screenProps.otherTab} />
),
navigationOptions: ({ screenProps }) => ({
// write label and icon based on screenProps.otherTab
})
},
// other tabs...
};
const Navigator = createTabNavigator(Tabs, {
initialRouteName: 'PreferredTab',
// other options...
});
const WrappedNavigator = props => {
// fetch tab index from redux state, for example
const firstTab = useSelector(state => state.settings.firstTab);
const otherTab = useSelector(state => state.settings.otherTab);
return <Navigator screenProps={{ firstTab: firstTab, otherTab: otherTab }} {...props} />;
};
WrappedNavigator.router = Navigator.router;
export default createAppContainer(WrappedNavigator);
source to share