App.js:
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
export default function App() {
let isLoggedIn = false;
setInterval(function () {
auth.onAuthStateChanged((user) => {
isLoggedIn = user !== null;
});
}, 50);
if (!isLoggedIn) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="StartScreen" component={StartScreen} />
</Stack.Navigator>
</NavigationContainer>
);
} else if (isLoggedIn) {
return (
<>
<NavigationContainer>
<Drawer.Navigator initialRouteName="StartScreen">
<Drawer.Screen name="StartScreen" component={StartScreen} />
<Drawer.Screen name="LoginScreen" component={LoginScreen} />
</Drawer.Navigator>
</NavigationContainer>
</>
);
}
}
const styles = StyleSheet.create({});
AppRegistry.registerComponent("myApp", () => App);
My goal is to only display the Drawer.Navigator
when the user is logged in. I tried updating a boolean isLoggedIn
to change the return statement but it is no working, altough the boolean is changing values. Any ideas on how to approach this? Thanks in advance
Refactor code as below:
//...Other top-level imports
import { ActivityIndictor } from "react-native";
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
export default function App() {
const [isLoggedIn, setLoggedIn] = React.useState(null);
const authenticateUser = () => {
auth.onAuthStateChanged((user) => {
if (user) {
setLoggedIn(true);
} else {
setLoggenIn(false);
}
});
};
// Check authentication state when the app launched
React.useEffect(() => {
if (!isLoggedIn) {
authenticateUser();
}
}, [isLoggedIn]);
/** While user is authenticating, show progress indicator*/
if (isLoggedIn === null) return <ActivityIndicator />;
return (
<NavigationContainer>
{isLoggedIn ? (
<Drawer.Navigator initialRouteName="StartScreen">
<Drawer.Screen name="StartScreen" component={StartScreen} />
<Drawer.Screen name="LoginScreen" component={LoginScreen} />
</Drawer.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="StartScreen" component={StartScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
);
}
const styles = StyleSheet.create({});
AppRegistry.registerComponent("myApp", () => App);
Click on the link https://reactnavigation.org/docs/auth-flow to read about how auth flows work in react native.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.