Add docs about header option in drawer and other changes

Author: satya164

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

@@ -265,6 +265,10 @@ Title string of a tab displayed in the tab bar or a function that given `{ focus
 
 Text to show in a badge on the tab icon. Accepts a `string` or a `number`.
 
+#### `tabBarBadgeStyle`
+
+Style for the badge on the tab icon. You can specify a background color or text color here.
+
 #### `tabBarButton`
 
 Function which returns a React element to render as the tab bar button. It wraps the icon and label and implements `onPress`. Renders `TouchableWithoutFeedback` by default. `tabBarButton: props => <TouchableOpacity {...props} />` would use `TouchableOpacity` instead.

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

@@ -370,6 +370,96 @@ Swipe gesture is not supported on Web.
 
 Whether you can use gestures to open or close the drawer. Setting this to `false` disables swipe gestures as well as tap on overlay to close. See `swipeEnabled` to disable only the swipe gesture.
 
+#### `header`
+
+Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
+
+- `layout` - Dimensions of the screen
+- `scene` - This contains 2 properties:
+  - `route` - The route object for the header
+  - `descriptor` - The descriptor containing the `navigation` prop and `options` for the screen
+
+Example:
+
+```js
+header: ({ scene }) => {
+  const { options } = scene.descriptor;
+  const title =
+    options.headerTitle !== undefined
+      ? options.headerTitle
+      : options.title !== undefined
+      ? options.title
+      : scene.route.name;
+
+  return (
+    <MyHeader
+      title={title}
+      leftButton={
+        <DrawerToggleButton
+          onPress={scene.descriptor.navigation.toggleDrawer}
+        />
+      }
+      style={options.headerStyle}
+    />
+  );
+};
+```
+
+To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.
+
+#### `headerShown`
+
+Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.
+
+#### `headerTitle`
+
+String or a function that returns a React Element to be used by the header. Defaults to scene `title`. When a function is specified, it receives an object containing `allowFontScaling`, `style` and `children` properties. The `children` property contains the title string.
+
+#### `headerTitleAlign`
+
+How to align the header title. Possible values:
+
+- `left`
+- `center`
+
+Defaults to `center` on iOS and `left` on Android.
+
+#### `headerTitleAllowFontScaling`
+
+Whether header title font should scale to respect Text Size accessibility settings. Defaults to false.
+
+#### `headerTitleStyle`
+
+Style object for the header title component.
+
+#### `headerLeft`
+
+Function which returns a React Element to display on the left side of the header. By default, a button to toggle the drawer is shown.
+
+#### `headerLeftAccessibilityLabel`
+
+Accessibility label for the header left button.
+
+#### `headerRight`
+
+Function which returns a React Element to display on the right side of the header.
+
+#### `headerPressColorAndroid`
+
+Color for material ripple (Android >= 5.0 only).
+
+#### `headerTintColor`
+
+Tint color for the header.
+
+#### `headerStyle`
+
+Style object for the header. You can specify a custom background color here, for example.
+
+#### `headerStatusBarHeight`
+
+Extra padding to add at the top of header to account for translucent status bar. By default, it uses the top value from the safe area insets of the device. Pass 0 or a custom value to disable the default behavior, and customize the height.
+
 #### `unmountOnBlur`
 
 Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to `false`.

versioned_docs/version-5.x/nesting-navigators.md

@@ -92,12 +92,13 @@ const unsubscribe = navigation
 
 ### Parent navigator's UI is rendered on top of child navigator
 
-For example, when you nest a stack navigator inside a drawer navigator, you'll see that the drawer appears above the stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header. This is an important point to consider when deciding how to nest your navigators.
+For example, when you nest a stack navigator inside a drawer navigator, you'll see that the drawer appears above the stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators.
 
 In your app, you will probably use these patterns depending on the behavior you want:
 
-- Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack.
 - Tab navigator nested inside the initial screen of stack navigator - New screens cover the tab bar when you push them.
+- Drawer navigator nested inside the initial screen of stack navigator with the initial screen's stack header hidden - The drawer can only be opened from the first screen of the stack.
+- Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack.
 - Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.
 
 ## Navigating to a screen in a nested navigator
@@ -192,9 +193,9 @@ navigation.navigate('Root', {
 
 It's sometimes useful to nest multiple stack navigators, for example, to have [some screens in a modal stack and some in regular stack](modal.md).
 
-When nesting multiple stacks, headers from both child and parent stack navigators would be shown. However, usually it's more desirable to show the header in the child stack navigator and hide the header in the parent stack navigator.
+When nesting multiple stacks or drawers, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the stack navigator.
 
-To achieve this, you can hide the header in the screen containing the stack using the `headerShown: false` option.
+To achieve this, you can hide the header in the screen containing the navigator using the `headerShown: false` option.
 
 For example:
 

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

@@ -90,7 +90,21 @@ String that can be used as a fallback for `headerTitle`.
 
 #### `header`
 
-Function that given `HeaderProps` returns a React Element, to display as a header. Make sure to set `headerMode` to `screen` as well when using a custom header (see below for more details).
+
+
+Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
+
+- `mode` - Mode of the header - `float` or `screen`
+- `layout` - Dimensions of the screen
+- `insets` - Safe area insets to use in the header
+- `scene` - This contains 2 properties:
+  - `route` - The route object for the header
+  - `descriptor` - The descriptor containing the `navigation` prop and `options` for the screen
+- `previous` - The `scene` object of the previous screen, will be undefined if there's no previous screen
+- `navigation` prop for the header
+- `styleInterpolator` - Function which returns interpolated styles for various elements in the header.
+
+Make sure to set `headerMode` to `screen` as well when using a custom header (see below for more details).
 
 Example:
 
@@ -157,12 +171,7 @@ Note that this style is not applied to the header by default since you control t
 
 #### `headerShown`
 
-Whether to show or hide the header for the screen. The header is shown by default unless:
-
-- The `headerMode` prop on the navigator was set to `none`.
-- The screen is in a stack nested in another stack navigator's screen which has a header.
-
-Setting this to `false` hides the header. When the header is hidden in a nested stack, you can explicitly set it to `true` to show it.
+Whether to show or hide the header for the screen. The header is shown by default unless the `headerMode` prop on the navigator was set to `none`. Setting this to `false` hides the header.
 
 #### `headerTitle`