Update docs with recent changes

Author: satya164

versioned_docs/version-7.x/native-stack-navigator.md

@@ -753,6 +753,25 @@ Style object for header. Supported properties:
 
 - `backgroundColor`
 
+#### `unstable_headerInsets`
+
+Which edges of the native header apply window insets (e.g. statusbar inset) on Android.
+
+The native header applies insets to every edge by default. Setting an edge to `false` removes the inset for that edge:
+
+```js
+unstable_headerInsets: {
+  top: false,
+  bottom: false,
+}
+```
+
+Supported edges are `top`, `left`, `right`, and `bottom`.
+
+Disabling an inset also disables it for nested headers. A nested header cannot re-enable an inset disabled by a parent header.
+
+This API may change in a minor release. Only supported on Android.
+
 #### `headerShadowVisible`
 
 Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.

versioned_docs/version-7.x/screen.md

@@ -14,6 +14,23 @@ A screen represents routes in a navigator. A screen's configuration contains the
 
 Screens can be defined under the `screens` key in the navigator configuration:
 
+```js
+const Stack = createNativeStackNavigator({
+  screens: {
+    Home: createNativeStackScreen({
+      screen: HomeScreen,
+    }),
+    Profile: createNativeStackScreen({
+      screen: ProfileScreen,
+    }),
+  },
+});
+```
+
+The [`createXScreen`](static-configuration.md#createxscreen) helper is optional, but necessary for type inference in screen configuration callbacks such as `options`, `listeners`, etc.
+
+A shorthand syntax is also supported where the screen component is used directly instead of a configuration object:
+
 ```js
 const MyStack = createNativeStackNavigator({
   screens: {
@@ -61,9 +78,9 @@ The key in the `screens` object is used as the name:
 const Stack = createNativeStackNavigator({
   screens: {
     // highlight-next-line
-    Profile: {
+    Profile: createNativeStackScreen({
       screen: ProfileScreen,
-    },
+    }),
   },
 });
 ```
@@ -104,14 +121,14 @@ Options are used to configure how the screen gets presented in the navigator. It
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Profile: {
+    Profile: createNativeStackScreen({
       screen: ProfileScreen,
       // highlight-start
       options: {
         title: 'Awesome app',
       },
       // highlight-end
-    },
+    }),
   },
 });
 ```
@@ -142,14 +159,14 @@ When you pass a function, it'll receive the [`route`](route-object.md), [`naviga
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Profile: {
+    Profile: createNativeStackScreen({
       screen: ProfileScreen,
       // highlight-start
       options: ({ route, navigation, theme }) => ({
         title: route.params.userId,
       }),
       // highlight-end
-    },
+    }),
   },
 });
 ```
@@ -184,11 +201,11 @@ Initial params are used as the default params for the screen. If a screen is use
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Details: {
+    Details: createNativeStackScreen({
       screen: DetailsScreen,
       // highlight-next-line
       initialParams: { itemId: 42 },
-    },
+    }),
   },
 });
 ```
@@ -220,11 +237,11 @@ This can be done by specifying the `getId` callback. It receives an object with
 ```js
 const Stack = createStackNavigator({
   screens: {
-    Profile: {
+    Profile: createStackScreen({
       screen: ProfileScreen,
       // highlight-next-line
       getId: ({ params }) => params.userId,
-    },
+    }),
   },
 });
 ```
@@ -273,10 +290,10 @@ It can be passed under the `screen` property in the screen configuration:
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Profile: {
+    Profile: createNativeStackScreen({
       // highlight-next-line
       screen: ProfileScreen,
-    },
+    }),
   },
 });
 ```
@@ -308,7 +325,7 @@ It's also possible to pass a function in the `getComponent` prop to lazily evalu
 />
 ```
 
-You can use this approach instead of the `component` prop if you want the `ProfileScreen` module to be lazily evaluated when needed. This is especially useful when using [ram bundles](https://reactnative.dev/docs/ram-bundles-inline-requires) to improve initial load.
+You can use this approach instead of the `component` prop if you want the `ProfileScreen` module to be lazily evaluated with [inline requires](https://reactnative.dev/docs/optimizing-javascript-loading#advanced-call-require-inline).
 
 #### `children`
 
@@ -344,7 +361,7 @@ It takes a function that returns a React element:
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Profile: {
+    Profile: createNativeStackScreen({
       screen: ProfileScreen,
       // highlight-start
       layout: ({ children }) => (
@@ -361,7 +378,7 @@ const Stack = createNativeStackNavigator({
         </ErrorBoundary>
       ),
       // highlight-end
-    },
+    }),
   },
 });
 ```
@@ -408,11 +425,11 @@ This can be useful when we have some screens that we want to be removed or reset
 ```js
 const Stack = createNativeStackNavigator({
   screens: {
-    Profile: {
+    Profile: createNativeStackScreen({
       screen: ProfileScreen,
       // highlight-next-line
       navigationKey: 'user',
-    },
+    }),
   },
 });
 ```

versioned_docs/version-8.x/getting-started.md

@@ -22,8 +22,8 @@ npm install @react-navigation/native@next
 <details>
 <summary>Minimum requirements</summary>
 
-- `react-native` >= 0.83
-- `expo` >= 55 ([development build](https://docs.expo.dev/development/introduction/) is required)
+- `react-native` >= 0.86
+- `expo` >= 56 ([development build](https://docs.expo.dev/development/introduction/) is required)
 - `typescript` >= 6.0.0 (if you use TypeScript)
 - `react-native-web` >= 0.21.0 (if you support Web)
 

versioned_docs/version-8.x/native-stack-navigator.md

@@ -764,6 +764,25 @@ Style object for header. Supported properties:
 
 - `backgroundColor`
 
+#### `unstable_headerInsets`
+
+Which edges of the native header apply window insets (e.g. statusbar inset) on Android.
+
+The native header applies insets to every edge by default. Setting an edge to `false` removes the inset for that edge:
+
+```js
+unstable_headerInsets: {
+  top: false,
+  bottom: false,
+}
+```
+
+Supported edges are `top`, `left`, `right`, and `bottom`.
+
+Disabling an inset also disables it for nested headers. A nested header cannot re-enable an inset disabled by a parent header.
+
+This API may change in a minor release. Only supported on Android.
+
 #### `headerShadowVisible`
 
 Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.

versioned_docs/version-8.x/navigation-container.md

@@ -1085,12 +1085,18 @@ function MyComponent() {
 ### `persistor`
 
 An object containing functions to persist and restore the [navigation state](navigation-state.md).
-The `persistor` object should contain two functions:
 
-- `persist` - Function that receives the navigation state as an argument and should save it to storage.
-- `restore` - Function that returns the previously saved state from storage, or `undefined` if there's no saved state.
+The `persistor` object should contain two required functions:
 
-These function can be both synchronous or asynchronous. If a promise is returned from the `restore` function, make sure to provide a [`fallback`](navigation-container.md#fallback).
+- `persist` - Function that receives the serialized navigation state and should save it to storage. The stored state should be removed if it receives `undefined`. It can be synchronous or return a promise.
+- `restore` - Function that returns the previously saved serialized state, or `undefined` if there's no saved state. It can be synchronous or return a promise.
+
+By default, the state is serialized with `JSON.stringify` and parsed with `JSON.parse`. You can override this by providing the following optional functions:
+
+- `stringify` - Function that receives the navigation state and returns a serialized string or `undefined`.
+- `parse` - Function that receives the serialized string and returns the parsed navigation state or `undefined`.
+
+If a promise is returned from the `restore` function, make sure to provide a [`fallback`](navigation-container.md#fallback).
 
 See [state persistence guide](state-persistence.md) for example usage.
 

versioned_docs/version-8.x/navigation-object.md

@@ -1791,14 +1791,14 @@ const drawerNavigation = navigation.getParent('Dashboard');
 
 // ...
 
-drawerNavigation?.openDrawer();
+drawerNavigation.openDrawer();
 ```
 
 In this case, `'Dashboard'` refers to the name of a parent screen of `Feed` that's used in the parent drawer navigator.
 
 This approach allows components to not have to know the nesting structure of the navigators. So it's highly recommended to use a screen name when using `getParent`.
 
-This method will return `undefined` if there is no matching parent navigator.
+When called without a screen name, this method returns `undefined` if there is no immediate parent navigator. When called with a screen name, it throws an error if that screen isn't found in the current or parent navigators.
 
 ### `getState`