Various improvements to 7.x

Author: satya164

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

@@ -88,11 +88,11 @@ This means:
 
 This makes it impossible to navigate to the `Home` when the user is not signed in, and to `SignIn` when the user is signed in.
 
-When the values returned by `useIsSignedin` and `useIsSignedOut` change, the screens matching the condition will change:
+When the values returned by `useIsSignedIn` and `useIsSignedOut` change, the screens matching the condition will change:
 
-- Let's say, initially `useIsSignedOut` returns `true`. This means that `SignIn` screens is shown.
+- Let's say, initially `useIsSignedOut` returns `true`. This means that the `SignIn` screen is shown.
 - After the user signs in, the return value of `useIsSignedIn` will change to `true` and `useIsSignedOut` will change to `false`, which means:
-  - React Navigation will see that the `SignIn` screen is no longer matches the condition, so it will remove the screen.
+  - React Navigation will see that the `SignIn` screen no longer matches the condition, so it will remove the screen.
   - Then it'll show the `Home` screen automatically because that's the first screen available when `useIsSignedIn` returns `true`.
 
 The order of the screens matters when there are multiple screens matching the condition. For example, if there are two screens matching `useIsSignedIn`, the first screen will be shown when the condition is `true`.
@@ -170,14 +170,14 @@ This means:
 
 This makes it impossible to navigate to the `Home` when the user is not signed in, and to `SignIn` when the user is signed in.
 
-When the value of `isSignedin` changes, the screens defined based on the condition will change:
+When the value of `isSignedIn` changes, the screens defined based on the condition will change:
 
-- Let's say, initially `isSignedin` is `false`. This means that `SignIn` screens is shown.
-- After the user signs in, the value of `isSignedin` will change to `true`, which means:
+- Let's say, initially `isSignedIn` is `false`. This means that the `SignIn` screen is shown.
+- After the user signs in, the value of `isSignedIn` will change to `true`, which means:
   - React Navigation will see that the `SignIn` screen is no longer defined, so it will remove the screen.
-  - Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedin` returns `true`.
+  - Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedIn` returns `true`.
 
-The order of the screens matters when there are multiple screens matching the condition. For example, if there are two screens defined based on `isSignedin`, the first screen will be shown when the condition is `true`.
+The order of the screens matters when there are multiple screens matching the condition. For example, if there are two screens defined based on `isSignedIn`, the first screen will be shown when the condition is `true`.
 
 </TabItem>
 </Tabs>
@@ -228,16 +228,15 @@ export default function App() {
     <NavigationContainer>
       <Stack.Navigator>
         {isSignedIn ? (
+          <Stack.Screen name="Home" component={HomeScreen} />
+        ) : (
           <Stack.Screen
             name="SignIn"
-            component={SimpleSignInScreen}
+            component={SignInScreen}
             options={{
               title: 'Sign in',
             }}
-            initialParams={{ setUserToken }}
           />
-        ) : (
-          <Stack.Screen name="Home" component={HomeScreen} />
         )}
       </Stack.Navigator>
     </NavigationContainer>
@@ -285,16 +284,15 @@ return (
   <NavigationContainer>
     <Stack.Navigator>
       {isSignedIn ? (
+        <Stack.Screen name="Home" component={HomeScreen} />
+      ) : (
         <Stack.Screen
           name="SignIn"
-          component={SimpleSignInScreen}
+          component={SignInScreen}
           options={{
             title: 'Sign in',
           }}
-          initialParams={{ setUserToken }}
         />
-      ) : (
-        <Stack.Screen name="Home" component={HomeScreen} />
       )}
     </Stack.Navigator>
   </NavigationContainer>
@@ -348,14 +346,14 @@ We can use [`React.Fragment`](https://react.dev/reference/react/Fragment) or [`G
 ```js
 isSignedIn ? (
   <>
-    <Stack.Screen name="SignIn" component={SignInScreen} />
-    <Stack.Screen name="SignUp" component={SignUpScreen} />
-    <Stack.Screen name="ResetPassword" component={ResetPassword} />
+    <Stack.Screen name="Home" component={HomeScreen} />
+    <Stack.Screen name="Profile" component={ProfileScreen} />
   </>
 ) : (
   <>
-    <Stack.Screen name="Home" component={HomeScreen} />
-    <Stack.Screen name="Profile" component={ProfileScreen} />
+    <Stack.Screen name="SignIn" component={SignInScreen} />
+    <Stack.Screen name="SignUp" component={SignUpScreen} />
+    <Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
   </>
 );
 ```

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -457,7 +457,8 @@ const Tabs = createBottomTabNavigator({
 ```js
 <Tab.Navigator
   screenOptions={{
-    tabBarPosition: dimensions.width < 600 ? 'bottom' : 'left',
+    tabBarPosition: isLargeScreen ? 'left' : 'bottom',
+    tabBarVariant: isLargeScreen ? 'material' : 'uikit',
     tabBarLabelPosition: 'below-icon',
   }}
 >
@@ -731,7 +732,7 @@ function MyComponent() {
   const tabBarHeight = useBottomTabBarHeight();
 
   return (
-    <ScrollView contentStyle={{ paddingBottom: tabBarHeight }}>
+    <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
       {/* Content */}
     </ScrollView>
   );
@@ -961,7 +962,6 @@ Bottom Tab Navigator exposes various options to configure the transition animati
   </Tabs>
 
 Putting these together, you can customize the transition animation for a screen:
-
 Putting these together, you can customize the transition animation for a screen:
 
 ```js name="Bottom Tabs custom animation" snack static2dynamic
@@ -1043,7 +1043,7 @@ import { TransitionSpecs } from '@react-navigation/bottom-tabs';
     screen: Profile,
     options: {
       // highlight-start
-      transitionSpec: TransitionSpecs.CrossFadeSpec,
+      transitionSpec: TransitionSpecs.FadeSpec,
       // highlight-end
     },
   },

versioned_docs/version-7.x/combine-static-with-dynamic.md

@@ -39,7 +39,7 @@ const RootStack = createNativeStackNavigator({
 });
 ```
 
-Here, `FeedScreen` is a component that renders a tab navigator and is defined using the dynamic API:
+Here, `FeedScreen` is a component that renders a bottom tab navigator and is defined using the dynamic API:
 
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -58,8 +58,8 @@ function FeedScreen() {
 
 This code will work, but we're missing 2 things:
 
-- Linking configuration for the screens in the top tab navigator.
-- TypeScript types for the screens in the top tab navigator.
+- Linking configuration for the screens in the bottom tab navigator.
+- TypeScript types for the screens in the bottom tab navigator.
 
 Since the nested navigator is defined using the dynamic API, we need to handle these manually. For the linking configuration, we can define the screens in the `linking` property of the `Feed` screen:
 

versioned_docs/version-7.x/community-navigators.md

@@ -4,7 +4,7 @@ title: Community navigators
 sidebar_label: Community navigators
 ---
 
-This guide lists various community navigators for React Navigation. These navigators offer provide UI components for navigation with the familiar React Navigation API.
+This guide lists various community navigators for React Navigation. These navigators provide UI components for navigation with the familiar React Navigation API.
 
 If you're looking to build your own navigator, check out the [custom navigators guide](custom-navigators.md).
 

versioned_docs/version-7.x/configuring-links.md

@@ -426,8 +426,8 @@ const state = {
         sort: 'latest',
       },
     },
-  ];
-}
+  ],
+};
 ```
 
 See [Navigation State reference](navigation-state.md) for more details on how the state object is structured.
@@ -611,7 +611,7 @@ const HomeTabs = createBottomTabNavigator({
       screen: FeedScreen,
     },
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -710,7 +710,7 @@ const HomeTabs = createBottomTabNavigator({
       screen: FeedScreen,
     },
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -823,7 +823,7 @@ const HomeTabs = createBottomTabNavigator({
       screen: FeedScreen,
     },
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -927,7 +927,7 @@ By default, paths defined for each screen are matched against the URL relative t
 const ProfileTabs = createBottomTabNavigator({
   screens: {
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -979,7 +979,7 @@ In this case, it makes more sense to navigate to the `Profile` screen using a UR
 const ProfileTabs = createBottomTabNavigator({
   screens: {
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
         // highlight-next-line
@@ -1037,13 +1037,13 @@ Sometimes, you may not want to have the route name of a screen in the path. For
 const RootStack = createStackNavigator({
   screens: {
     Home: {
-      screen: ProfileScreen,
+      screen: HomeScreen,
       linking: {
         path: 'home',
       },
     },
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -1080,13 +1080,13 @@ You can specify an empty string as path or not specify a path at all, and React
 const RootStack = createStackNavigator({
   screens: {
     Home: {
-      screen: ProfileScreen,
+      screen: HomeScreen,
       linking: {
         path: '',
       },
     },
     Profile: {
-      screen: HomeScreen,
+      screen: ProfileScreen,
       linking: {
         path: 'users/:id',
       },
@@ -1194,7 +1194,7 @@ const config = {
 </TabItem>
 </Tabs>
 
-You can also provide a your own function to serialize the params. For example, let's say that you want to use a DD-MM-YYYY format in the path instead of a timestamp:
+You can also provide your own function to serialize the params. For example, let's say that you want to use a DD-MM-YYYY format in the path instead of a timestamp:
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
@@ -1213,7 +1213,9 @@ const RootStack = createStackNavigator({
           date: (date) => {
             const d = new Date(date);
 
-            return d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
+            return (
+              d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
+            );
           },
         },
       },
@@ -1237,7 +1239,7 @@ const config = {
         date: (date) => {
           const d = new Date(date);
 
-          return d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
+          return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
         },
       },
     },
@@ -1254,7 +1256,7 @@ Depending on your requirements, you can use this functionality to parse and stri
 
 If you need more complex matching logic, you can use regular expressions to match the path. For example, if you want to use the pattern `@username` to match a user's profile, you can use a regular expression to match the path. This allows you to have the same path pattern for multiple screens, but fine-tune the matching logic to be more specific for a particular screen.
 
-Regular expressions can be specified between parentheses `(` and `)` in the after a param name. For example:
+Regular expressions can be specified between parentheses `(` and `)` after a param name. For example:
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>

versioned_docs/version-7.x/contributing.md

@@ -98,8 +98,8 @@ Much like the issue template, the [pull request template](https://github.com/rea
 - Run these commands in the terminal to download locally and install it:
 
 ```bash
-git clone https://github.com/<USERNAME>/navigation-ex.git
-cd navigation-ex
+git clone https://github.com/<USERNAME>/react-navigation.git
+cd react-navigation
 git remote add upstream https://github.com/react-navigation/react-navigation.git
 yarn
 ```
@@ -134,7 +134,7 @@ yarn typescript --watch
 
 ### Run the Example App
 
-The [example app](https://github.com/react-navigation/react-navigation/tree/main/packages/example) includes a variety of patterns and is used as a simple way for contributors to manually integration test changes.
+The [example app](https://github.com/react-navigation/react-navigation/tree/main/example) includes a variety of patterns and is used as a simple way for contributors to manually integration test changes.
 
 While developing, you can run the [example app](https://github.com/react-navigation/react-navigation/tree/main/example) with [Expo](https://expo.io/) to test your changes:
 

versioned_docs/version-7.x/custom-android-back-button-handling.md

@@ -60,7 +60,7 @@ function ScreenWithCustomBackBehavior() {
   return (
     <View style={styles.container}>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item.key}>
           {isSelectionModeEnabled ? (
             <PlatformPressable
               onPress={() => {
@@ -85,7 +85,7 @@ function ScreenWithCustomBackBehavior() {
               {item.key}
             </Text>
           )}
-        </>
+        </React.Fragment>
       ))}
       <Button
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
@@ -175,7 +175,7 @@ function ScreenWithCustomBackBehavior() {
   return (
     <View style={styles.container}>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item.key}>
           {isSelectionModeEnabled ? (
             <PlatformPressable
               onPress={() => {
@@ -200,7 +200,7 @@ function ScreenWithCustomBackBehavior() {
               {item.key}
             </Text>
           )}
-        </>
+        </React.Fragment>
       ))}
       <Button
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}