How to pass navigation props in React native in Stack Navigation? - firebase

Question

I am new to react native and facing some issues with React Navigation version 5.x
App.js file is below
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import MyDrawer from "./components/MyDrawer";
import LoginScreen from "./screens/LoginScreen";
import firebase from "firebase";
import { firebaseConfig } from "./config";
firebase.initializeApp(firebaseConfig);
const Stack = createStackNavigator();
export default class App extends React.Component {
state = {
isLoggedIn: false,
};
logOut = () => {
this.setState({ isLoggedIn: false });
firebase.auth().signOut();
};
render() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
{this.state.isLoggedIn ? (
<>
<Stack.Screen name="Home" component={MyDrawer} />
</>
) : (
<Stack.Screen name="SignIn" component={LoginScreen} />
)}
</Stack.Navigator>
</NavigationContainer>
);
}
}
If the user is logged in to firebase it will navigate to MyDrawer.js. It has a custom drawer and the drawer has a log out button.
MyDrawer.js
import HomeScreen from "../screens/HomeScreen";
import Colors from "../Colors";
import ShareListScreen from "../screens/ShareListScreen";
import Inpiration from "../screens/Inspiration";
const Drawer = createDrawerNavigator();
export default class MyDrawer extends React.Component {
state = {
title: this.props,
};
render() {
return (
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Share List" component={ShareListScreen} />
<Drawer.Screen name="Inspiration" component={Inpiration} />
</Drawer.Navigator>
);
}
}
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View >
<ImageBackground source={image} >
<Text>
Bring
<Text>Me</Text>
</Text>
</ImageBackground>
</View>
<DrawerItemList {...props} />
<ImageBackground source={home} >
<Text >Home</Text>
</ImageBackground>
<ImageBackground source={work} >
<Text>Workplace</Text>
</ImageBackground>
<DrawerItem
label="Log out"
onPress={() => {
this.props.logOut;
this.props.navigation.navigate("SignIn");
// Once the button pressed I want the user to sign out from firebase and navigate
to the root and set isLoggedIn state to true in App.js.
}}
/>
</DrawerContentScrollView>
);
}
Once the logout button pressed I want the user to sign out from firebase and navigate to the root and set isLoggedIn state to true in App.js. ( Call the log out function in App.js).
How can I achieve this?

Answer 1

You can use the initialParams to pass the logout function.
<Stack.Screen name="Home" component={MyDrawer} initialParams={{this.logout}}/>
This function can be accessed in MyDrawer class as this.props.routes.params.logout()
And you dont have to navigate to signIn again as the state change happens you render the 'SignIn' so app will show the signin screen automatically.