Search code examples
reactjsreact-nativereact-navigationjsxnavigation-drawer

How do you pass a prop through Drawer Navigation if the prop is obtained by user input?


I am building an app with a login screen, and I want to be able to pass the props of the email(this.state.email) to another screen. However, I can't directly navigate to this screen; I do it through a drawer. How would I obtain a prop from the user's email input, which can change depending on what account they use to log in, and send it to another screen through the drawer?

My screens:

 <Drawer.Navigator
      initialRouteName="Home"
      drawerType="slide"
      overlayColor="transparent"
      drawerStyle={styles.drawerStyles}
      contentContainerStyle={{flex: 1}}
      screenOptions={{
        headerShown: false,
        activeBackgroundColor: 'transparent',
        activeTintColor: 'white',
        inactiveTintColor: 'white',
      }}
      sceneContainerStyle={{backgroundColor: 'transparent'}}
      drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen name="Screens">
        {props => <Screens {...props} style={animatedStyle} />}
      </Drawer.Screen>
    </Drawer.Navigator>

(I'm using a mix of drawer and stack navigator to be able to use both, hence the "screens"; it's my only screen.)

My stack screens:

     <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          test="test"
          {...navigation}></Stack.Screen>

        <Stack.Screen
          name="Book"
          component={Book}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Sign Up"
          component={SignUp}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="CheckIn"
          component={CheckIn}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Search"
          component={Search}
          {...navigation}></Stack.Screen>
      </Stack.Navigator>

(I didn't include any styles.)

How would I solve this? Thanks.


Solution

  • I just did this:

    await AsyncStorage.setItem('lenderEmail', this.state.email);
    const lenderEmail = AsyncStorage.getItem('lenderEmail');