diff --git a/static/assets/7.x/drawer/drawerActiveBackgroundColor.png b/static/assets/7.x/drawer/drawerActiveBackgroundColor.png new file mode 100644 index 0000000000..3340babed1 Binary files /dev/null and b/static/assets/7.x/drawer/drawerActiveBackgroundColor.png differ diff --git a/static/assets/7.x/drawer/drawerActiveTintColor.png b/static/assets/7.x/drawer/drawerActiveTintColor.png new file mode 100644 index 0000000000..5ebfb044b1 Binary files /dev/null and b/static/assets/7.x/drawer/drawerActiveTintColor.png differ diff --git a/static/assets/7.x/drawer/drawerItemStyle.png b/static/assets/7.x/drawer/drawerItemStyle.png new file mode 100644 index 0000000000..72a239d365 Binary files /dev/null and b/static/assets/7.x/drawer/drawerItemStyle.png differ diff --git a/static/assets/7.x/drawer/drawerLabelStyle.png b/static/assets/7.x/drawer/drawerLabelStyle.png new file mode 100644 index 0000000000..cbe5531ed8 Binary files /dev/null and b/static/assets/7.x/drawer/drawerLabelStyle.png differ diff --git a/static/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4 b/static/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4 new file mode 100644 index 0000000000..4945278107 Binary files /dev/null and b/static/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4 differ diff --git a/static/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4 b/static/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4 new file mode 100644 index 0000000000..c26696e06d Binary files /dev/null and b/static/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4 differ diff --git a/static/assets/7.x/drawer/drawerStyle.png b/static/assets/7.x/drawer/drawerStyle.png new file mode 100644 index 0000000000..6a0f1de808 Binary files /dev/null and b/static/assets/7.x/drawer/drawerStyle.png differ diff --git a/static/assets/7.x/drawer/drawerType-back.mp4 b/static/assets/7.x/drawer/drawerType-back.mp4 new file mode 100644 index 0000000000..e4a6b03922 Binary files /dev/null and b/static/assets/7.x/drawer/drawerType-back.mp4 differ diff --git a/static/assets/7.x/drawer/drawerType-front.mp4 b/static/assets/7.x/drawer/drawerType-front.mp4 new file mode 100644 index 0000000000..3dcf3f70e0 Binary files /dev/null and b/static/assets/7.x/drawer/drawerType-front.mp4 differ diff --git a/static/assets/7.x/drawer/drawerType-masterDetail.mp4 b/static/assets/7.x/drawer/drawerType-masterDetail.mp4 new file mode 100644 index 0000000000..0fa4718b9a Binary files /dev/null and b/static/assets/7.x/drawer/drawerType-masterDetail.mp4 differ diff --git a/static/assets/7.x/drawer/drawerType-slide.mp4 b/static/assets/7.x/drawer/drawerType-slide.mp4 new file mode 100644 index 0000000000..02975a99f2 Binary files /dev/null and b/static/assets/7.x/drawer/drawerType-slide.mp4 differ diff --git a/static/assets/7.x/drawer/overlayColor.mp4 b/static/assets/7.x/drawer/overlayColor.mp4 new file mode 100644 index 0000000000..7d58fa28b1 Binary files /dev/null and b/static/assets/7.x/drawer/overlayColor.mp4 differ diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md index 7c0ef69cdc..9d8898bccd 100644 --- a/versioned_docs/version-7.x/drawer-navigator.md +++ b/versioned_docs/version-7.x/drawer-navigator.md @@ -332,10 +332,28 @@ Function, that given `{ focused: boolean, color: string, size: number }` returns Color for the icon and label in the active item in the drawer. +Drawer active tint color + +```js + drawerActiveTintColor: 'green', +``` + #### `drawerActiveBackgroundColor` Background color for the active item in the drawer. +Drawer active background color + +```js + screenOptions={{ + drawerActiveTintColor: 'white', + drawerActiveBackgroundColor: '#003CB3', + drawerLabelStyle: { + color: 'white', + }, + }} +``` + #### `drawerInactiveTintColor` Color for the icon and label in the inactive items in the drawer. @@ -348,10 +366,35 @@ Background color for the inactive items in the drawer. Style object for the single item, which can contain an icon and/or a label. +Drawer item style + +Example: + +```js + drawerItemStyle: { + backgroundColor: '#9dd3c8', + borderColor: 'black', + orderWidth: 2, + opacity: 0.6, + }, +``` + #### `drawerLabelStyle` Style object to apply to the `Text` style inside content section which renders a label. +Drawer label style + +Example: + +```js + drawerLabelStyle: { + color: 'black', + fontSize: 20, + fontFamily: 'Georgia', + }, +``` + #### `drawerContentContainerStyle` Style object for the content section inside the `ScrollView`. @@ -364,7 +407,7 @@ Style object for the wrapper view. Style object for the drawer component. You can pass a custom background color for a drawer or a custom width here. - +Drawer style ```js + + + - `back`: The drawer is revealed behind the screen on swipe. + + - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer. + + - `permanent`: A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens. Defaults to `slide` on iOS and `front` on other platforms. @@ -419,6 +474,10 @@ function MyDrawer() { You can also specify other props such as `drawerStyle` based on screen size to customize the behavior. For example, you can combine it with `defaultStatus="open"` to achieve a master-detail layout: + + ```js import { useWindowDimensions } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -451,20 +510,32 @@ When set to `true`, Drawer will hide the OS status bar whenever the drawer is pu #### `drawerStatusBarAnimation` -Animation of the statusbar when hiding it. use in combination with `hideStatusBar`. +Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`. + +This is only supported on iOS. Defaults to `slide`. Supported values: - `slide` + + - `fade` -- `none` + -This is only supported on iOS. Defaults to `slide`. +- `none` #### `overlayColor` Color overlay to be displayed on top of the content view when drawer gets open. The opacity is animated from `0` to `1` when the drawer opens. + + #### `sceneContainerStyle` Style object for the component wrapping the screen content.