Passing props/functions in React-Native

Question

New to React Native I recently followed the navigation tutorial https://www.robinwieruch.de/react-native-navigation/ . I then decided to put the sign out function into the draw navigator which opened up a whole can of worms around passing props. I've read so much stuff on that but still can't figure out what's going on here, and hope someone can explain it to me.

Without copying the whole code (and I hope I've copied enough), inside App() I have the following:

const [isAuthenticated, setIsAuthenticated] = React.useState(false);

const handleSignIn = () => {
    // TODO implement real sign in mechanism

    setIsAuthenticated(true);
};

const handleSignOut = () => {
    // TODO implement real sign out mechanism

    setIsAuthenticated(false);
};

…

<Stack.Screen
    name="Home"
    component={() => <HomeDrawer someText="Mick" handleSignOut={handleSignOut}/>}
…

Outside of App() I have the following:

const HomeDrawer = (props) => {
    console.log("In HomeDrawer props = " + JSON.stringify(props));
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
            drawerContent={(props) => <CustomDrawerSignOut {...props}/>}
        >
            <Drawer.Screen name="Home Page" component={HomePage} />
            <Drawer.Screen name="Account Details" component={AccountScreen} />
        </Drawer.Navigator>
    );
};

const CustomDrawerSignOut = (props) => {
    console.log("In CustomDrawerSignOut props = " + JSON.stringify(props));
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />
            <DrawerItem label="Sign Out" onPress={props.handleSignOut} />
        </DrawerContentScrollView>
    );
}

The log output then gives me the following:

In HomeDrawer props = {"someText":"Mick"}

In CustomDrawerSignOut props = {"state":{"stale":false,"type":"drawer","key":"drawer-hyj-tged8DkJ7nDxNVVWB","index":0,"routeNames":["Home Page","Account Details"],"history":[{"type":"route","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"}],"routes":[{"name":"Home Page","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"},{"name":"Account Details","key":"Account Details-hwXHxAxa5wR-lg9xq7cp3"}],"default":"closed"},"navigation":{},"descriptors":{"Home Page-rf91ybSgClEeaz_f7Qf7a":{"route":{"name":"Home Page","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"},"navigation":{},"options":{"headerShown":false}},"Account Details-hwXHxAxa5wR-lg9xq7cp3":{"route":{"name":"Account Details","key":"Account Details-hwXHxAxa5wR-lg9xq7cp3"},"navigation":{},"options":{"headerShown":false}}}}

'handleSignOut' doesn't seem to get passed to HomeDrawer and 'someText' doesn't seem to get passed to CustomDrawerSignOut which does receive a lot of other props. Why are 'someText' and 'handleSignOut' not being passed properly, and how do I fix it?

Thanks

Answer 1

I looks like CustomDrawerSignOut is not being passed the props from the HomeDrawer

Please check the components passed to

<Stack.Screen
    name="Home"
    component={(props) => <HomeDrawer {...props} someText="Mick" handleSignOut={handleSignOut}  />}

....

const HomeDrawer = (props) => {
    console.log("In HomeDrawer props = " + JSON.stringify(props));
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
           // here
            drawerContent={(drawerProps) => <CustomDrawerSignOut {...drawerProps} handleSignOut={props.handleSignOut}/>}
        >
            <Drawer.Screen name="Home Page" component={HomePage} />
            <Drawer.Screen name="Account Details" component={AccountScreen} />
        </Drawer.Navigator>
    );
};

Hope it solves the problem