React Navigation change Tab order programmatically

The following is an "almost pseudo code" example. It should at least drive you in the right direction. The trick is to use a "connected" main navigation component which reacts to changes in a redux store (in my case I stored the tabs order in a "settings" reducer) and force re-render of the tabs and their order, changing the screenProps property passed down by react-navigation to each navigator. Then there is a TabSelector component which returns the correct screen based on the props passed. I'm sorry if it's not totally clear what I mean but English is not my primary 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);