Document layout and screenLayout props

Author: satya164

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

@@ -57,17 +57,25 @@ import {
 } from '@react-navigation/native';
 
 function TabNavigator({
+  id,
   initialRouteName,
   children,
+  layout,
+  screenListeners,
   screenOptions,
+  screenLayout,
   tabBarStyle,
   contentStyle,
 }) {
   const { state, navigation, descriptors, NavigationContent } =
     useNavigationBuilder(TabRouter, {
+      id,
+      initialRouteName,
       children,
+      layout,
+      screenListeners,
       screenOptions,
-      initialRouteName,
+      screenLayout,
     });
 
   return (
@@ -235,9 +243,14 @@ type Props = DefaultNavigatorOptions<
   TabNavigationConfig;
 
 function TabNavigator({
+  id,
   initialRouteName,
   children,
+  layout,
+  screenListeners,
   screenOptions,
+  screenLayout,
+  backBehavior,
   tabBarStyle,
   contentStyle,
 }: Props) {
@@ -249,9 +262,14 @@ function TabNavigator({
       TabNavigationOptions,
       TabNavigationEventMap
     >(TabRouter, {
+      id,
+      initialRouteName,
       children,
+      layout,
+      screenListeners,
       screenOptions,
-      initialRouteName,
+      screenLayout,
+      backBehavior,
     });
 
   return (
@@ -343,18 +361,26 @@ import {
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 
 function BottomTabNavigator({
+  id,
   initialRouteName,
-  backBehavior,
   children,
+  layout,
+  screenListeners,
   screenOptions,
+  screenLayout,
+  backBehavior,
   ...rest
 }) {
   const { state, descriptors, navigation, NavigationContent } =
     useNavigationBuilder(TabRouter, {
+      id,
       initialRouteName,
-      backBehavior,
       children,
+      layout,
+      screenListeners,
       screenOptions,
+      screenLayout,
+      backBehavior,
     });
 
   return (
@@ -383,10 +409,14 @@ import MyRouter from './MyRouter';
 
 const { state, descriptors, navigation, NavigationContent } =
   useNavigationBuilder(MyRouter, {
+    id,
     initialRouteName,
-    backBehavior,
     children,
+    layout,
+    screenListeners,
     screenOptions,
+    screenLayout,
+    backBehavior,
   });
 
 // ...

versioned_docs/version-7.x/group.md

@@ -148,9 +148,11 @@ Options to configure how the screens inside the group get presented in the navig
 const MyStack = createNativeStackNavigator({
   groups: {
     Modal: {
+      // highlight-start
       screenOptions: {
         presentation: 'modal',
       },
+      // highlight-end
       screens: {
         /* screens */
       },
@@ -162,11 +164,13 @@ const MyStack = createNativeStackNavigator({
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js
+```jsx
 <Stack.Group
+  // highlight-start
   screenOptions={{
     presentation: 'modal',
   }}
+  // highlight-end
 >
   {/* screens */}
 </Stack.Group>
@@ -184,9 +188,11 @@ When you pass a function, it'll receive the [`route`](route-object.md) and [`nav
 const MyStack = createNativeStackNavigator({
   groups: {
     Modal: {
+      // highlight-start
       screenOptions: ({ route, navigation }) => ({
         title: route.params.title,
       }),
+      // highlight-end
       screens: {
         /* screens */
       },
@@ -198,11 +204,13 @@ const MyStack = createNativeStackNavigator({
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js
+```jsx
 <Stack.Group
+  // highlight-start
   screenOptions={({ route, navigation }) => ({
     title: route.params.title,
   })}
+  // highlight-end
 >
   {/* screens */}
 </Stack.Group>
@@ -215,6 +223,68 @@ These options are merged with the `options` specified in the individual screens,
 
 See [Options for screens](screen-options.md) for more details and examples.
 
+### Screen layout
+
+A screen layout is a wrapper around each screen in the group. It makes it easier to provide things such as a common error boundary and suspense fallback for all screens in a group:
+
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+const MyStack = createNativeStackNavigator({
+  groups: {
+    Modal: {
+      // highlight-start
+      screenLayout: ({ children }) => (
+        <ErrorBoundary>
+          <React.Suspense
+            fallback={
+              <View style={styles.fallback}>
+                <Text style={styles.text}>Loading…</Text>
+              </View>
+            }
+          >
+            {children}
+          </React.Suspense>
+        </ErrorBoundary>
+      ),
+      // highlight-end
+      screens: {
+        /* screens */
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```jsx
+<Stack.Group
+  // highlight-start
+  screenLayout={({ children }) => (
+    <ErrorBoundary>
+      <React.Suspense
+        fallback={
+          <View style={styles.fallback}>
+            <Text style={styles.text}>Loading…</Text>
+          </View>
+        }
+      >
+        {children}
+      </React.Suspense>
+    </ErrorBoundary>
+  )}
+  // highlight-end
+>
+  {/* screens */}
+</Stack.Group>
+```
+
+</TabItem>
+</Tabs>
+
 ### Navigation key
 
 Optional key for a group of screens. If the key changes, all existing screens in this group will be removed (if used in a stack navigator) or reset (if used in a tab or drawer navigator):
@@ -227,11 +297,13 @@ The name of the group is used as the `navigationKey`:
 ```js
 const MyStack = createNativeStackNavigator({
   groups: {
+    // highlight-next-line
     User: {
       screens: {
         /* screens */
       },
     },
+    // highlight-next-line
     Guest: {
       screens: {
         /* screens */
@@ -246,8 +318,11 @@ This means if a screen is defined in 2 groups and the groups use the [`if`](stat
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js
-<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
+```jsx
+<Stack.Group
+  // highlight-next-line
+  navigationKey={isSignedIn ? 'user' : 'guest'}
+>
   {/* screens */}
 </Stack.Group>
 ```