Dynamic route with React Navigation

Question

I have a react native app running with react navigation 3.9 with 2 components Signup and Event:

export default class Signup extends         


        

Answer 1

You can create dynamic routes based on the token. You'll need a screen that renders those two routes. Like

// app renders createStackNavigator with Event and Signup
const routes = {
  Event: {
    screen: Event,
    navigationOptions: {
      title: 'Event',
    },
  },
  Signup: {
    screen: Signup,
    navigationOptions: {
      title: 'Signup',
    },
  },
};

class App extends React.Component {

  // creates dynamic routes
  createDynamicRoutes = initiaRoute => {
    return createAppContainer(
      createStackNavigator(routes, {
        initialRouteName: initiaRoute,
      })
    );
  };

  render() {
    // get initial route from splash screen
    // this.props.navigation.navigate('App', { init: 'init screen' });
    const initiaRoute = this.props.navigation.state.params.init || 'Event';

    // create routes and set initial route
    const AppContainer = this.createDynamicRoutes(initiaRoute);
    return <AppContainer />;
  }
}

InitScreen navigator renders App and Splash

const InitScreen = createSwitchNavigator({
  Splash: Splash,
  App: App,
})

export default createAppContainer(InitScreen);

Demo