Minor tweaks

Author: satya164

versioned_docs/version-5.x/header-buttons.md

@@ -67,7 +67,7 @@ function HomeScreen({ navigation }) {
         <Button onPress={() => setCount(c => c + 1)} title="Update count" />
       ),
     });
-  }, [navigation, setCount]);
+  }, [navigation]);
 
   return <Text>Count: {count}</Text>;
 }
@@ -79,15 +79,16 @@ function HomeScreen({ navigation }) {
 
 You can change the label behavior with `headerBackTitle` and `headerTruncatedBackTitle` ([read more](stack-navigator.md#headerbacktitle)).
 
-To customize the back button image, you can use [headerBackImage](/docs/stack-navigator/#headerbackimage).
+To customize the back button image, you can use [headerBackImage](stack-navigator.md#headerbackimage).
 
 ## Overriding the back button
 
 The back button will be rendered automatically in a stack navigator whenever it is possible for the user to go back from their current screen &mdash; in other words, the back button will be rendered whenever there is more than one screen in the stack.
 
-Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the `headerLeft` option to a React Element that will be rendered, just as we did with `headerRight`. Alternatively, the `headerLeft` option also accepts a React Component, which can be used, for example, for overriding the onPress behavior of the back button. Read more about this in the [api reference](/docs/stack-navigator/#headerleft).
+Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the `headerLeft` option to a React Element that will be rendered, just as we did with `headerRight`. Alternatively, the `headerLeft` option also accepts a React Component, which can be used, for example, for overriding the onPress behavior of the back button. Read more about this in the [api reference](stack-navigator.md#headerleft).
 
 ## Summary
 
 - You can set buttons in the header through the `headerLeft` and `headerRight` properties in `options`.
 - The back button is fully customizable with `headerLeft`, but if you just want to change the title or image, there are other `options` for that &mdash; `headerBackTitle`, `headerTruncatedBackTitle`, and `headerBackImage`.
+- You can use a callback for the options prop to access `navigation` and `route` objects.

versioned_docs/version-5.x/screen-options-resolution.md

@@ -1,7 +1,7 @@
 ---
 id: screen-options-resolution
-title: Screen options resolution
-sidebar_label: Screen options resolution
+title: Screen options with nested navigators
+sidebar_label: Screen options with nested navigators
 ---
 
 In this document we'll explain how [screen options](screen-options.md) work when there are multiple navigators. It's important to understand this so that you put your `options` in the correct place and can properly configure your navigators. If you put them in the wrong place, at best nothing will happen and at worst something confusing and unexpected will happen.

versioned_docs/version-5.x/server-rendering.md

@@ -199,9 +199,10 @@ ctx.status = status.code;
 
 After we render the app with `ReactDOMServer.renderToString`, the `code` property of the `status` object will be updated to be `404` if the `NotFound` screen was rendered.
 
-You can follow a similar approach for other status codes too.
+You can follow a similar approach for other status codes too, for example, `401` for unauthorized etc.
 
 ## Summary
 
 - Use the `location` prop on `ServerContainer` to render correct screens based on the incoming request.
 - Attach a `ref` to the `ServerContainer` get options for the current screen.
+- Use context to attach more information such as status code.

versioned_docs/version-5.x/stack-navigator.md

@@ -202,6 +202,29 @@ Function which returns a React Element to display on the right side of the heade
 
 Function which returns a React Element to display on the left side of the header. When a function is used, it receives a number of arguments when rendered (`onPress`, `label`, `labelStyle` and more - check [types.tsx](https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/types.tsx#L344-L408) for the complete list).
 
+By default, `HeaderBackButton` component is used. You can implement it and use it to override the back button press, for example:
+
+```js
+import { HeaderBackButton } from '@react-navigation/stack';
+
+// ...
+
+<Screen
+  name="Home"
+  component={HomeScreen}
+  options={{
+    headerLeft: (props) => (
+      <HeaderBackButton
+        {...props}
+        onPress={() => {
+          // Do something
+        }}
+      />
+    ),
+  }}
+/>;
+```
+
 #### `headerStyle`
 
 Style object for the header. You can specify a custom background color here, for example.
@@ -392,7 +415,7 @@ Example:
 
 ```js
 React.useEffect(() => {
-  const unsubscribe = navigation.addListener('transitionStart', e => {
+  const unsubscribe = navigation.addListener('transitionStart', (e) => {
     // Do something
   });
 
@@ -408,7 +431,7 @@ Example:
 
 ```js
 React.useEffect(() => {
-  const unsubscribe = navigation.addListener('transitionEnd', e => {
+  const unsubscribe = navigation.addListener('transitionEnd', (e) => {
     // Do something
   });