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.
I just did this:
await AsyncStorage.setItem('lenderEmail', this.state.email);
const lenderEmail = AsyncStorage.getItem('lenderEmail');