Skip to content

Commit 807761c

Browse files
docs: use native-stack in auth-flow
1 parent 35144ea commit 807761c

File tree

2 files changed

+4
-4
lines changed

2 files changed

+4
-4
lines changed

static/examples/6.x/auth-flow.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, Text, TextInput, View } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55

66
const AuthContext = React.createContext();
77

@@ -48,7 +48,7 @@ function SignInScreen() {
4848
);
4949
}
5050

51-
const Stack = createStackNavigator();
51+
const Stack = createNativeStackNavigator();
5252

5353
export default function App({ navigation }) {
5454
const [state, dispatch] = React.useReducer(

versioned_docs/version-6.x/auth-flow.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ This pattern has been in use by other routing libraries such as React Router for
4444

4545
The magic happens when the value of the `isSignedIn` variable changes. Let's say, initially `isSignedIn` is `false`. This means, either `SignIn` or `SignUp` screens are shown. After the user signs in, the value of `isSignedIn` will change to `true`. React Navigation will see that the `SignIn` and `SignUp` screens are no longer defined and so it will remove them. Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedIn` is `true`.
4646

47-
The example shows stack navigator, but you can use the same approach with any navigator.
47+
The example shows a native stack navigator, but you can use the same approach with any navigator.
4848

4949
By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown.
5050

@@ -114,7 +114,7 @@ state.userToken == null ? (
114114
);
115115
```
116116

117-
> If you have both your login-related screens and rest of the screens in Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
117+
> If you have both your login-related screens and rest of the screens in native stack navigators, we recommend to use a single native stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
118118
119119
## Implement the logic for restoring the token
120120

0 commit comments

Comments
 (0)