DrawerNavigation dynamic initial route

Question

I want to dynamically render initial route based on a a key from Async Storage. There are a lot of ways to do that but in my case I cannot find anything working. Here is my navigator file.

import {
  createDrawerNavigator,
  DrawerNavigatorItems,
} from 'react-navigation-drawer';


const WINDOW_WIDTH = Dimensions.get('window').width;

const getRoute = ()=>{
  return "SignUpScreen";
}


const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      path: '/home',
      screen: Home,
    },
    SignUpScreen:{
        path: '/signup',
        screen: SignUpScreen
    },
    OtpScreen: {
      path: '/otpscreen',
      screen: OtpScreen
    }
  },
  {
    initialRouteName: `${getRoute()}`,
    contentOptions: {
      activeTintColor: `${THEME_VARIABLES.COLORS.PRIMARY_TEXT}`,
      activeBackgroundColor: 'transparent',
      inactiveTintColor: `${THEME_VARIABLES.COLORS.PRIMARY_TEXT}`,
      inactiveBackgroundColor: 'transparent',
      backgroundColor: `${THEME_VARIABLES.COLORS.PRIMARY_THEME}`,
      labelStyle: {
        fontSize: 15,
        marginLeft: 0,
      },
    },
    drawerWidth: Math.min(WINDOW_WIDTH * 0.6, 300),
    contentComponent: customContentComponent,
  }
);

export default DrawerNavigator;

To use asyncStorage in getRote() I had to do something like

const getRoute = async()=>{
  var initialRouteName = await AsyncStorage.getItem('screen');
  return initialRouteName;
}

But when I use async the function returns an object instead of string like it returns in my first getRoute function(function without async). Its shows following error:

cause getRoute is returning promise as it is prefixed with async. — Excalibur, Jun 24 '20 at 04:50
Yes, but when I use async its returning promise, I need getRoute to return a string instead of promise — Sathwik Gangisetty, Jun 24 '20 at 04:59
put some loading screen kind of component. then keep this as child of it. set state for path then get it in useEffect and then stop loading & allow this screen to render. — Excalibur, Jun 24 '20 at 05:03

DrawerNavigation dynamic initial route

0 Answers0