Skip to content

Commit bb6c938

Browse files
committed
docs: Adeed videos for Drawer's options
1 parent 90f12bb commit bb6c938

File tree

8 files changed

+32
-2
lines changed

8 files changed

+32
-2
lines changed
Binary file not shown.
Binary file not shown.
1.01 MB
Binary file not shown.
791 KB
Binary file not shown.
Binary file not shown.
1020 KB
Binary file not shown.
984 KB
Binary file not shown.

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

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -388,8 +388,20 @@ Options are `left` or `right`. Defaults to `left` for LTR languages and `right`
388388
Type of the drawer. It determines how the drawer looks and animates.
389389

390390
- `front`: Traditional drawer which covers the screen with an overlay behind it.
391+
<video playsInline autoPlay muted loop>
392+
<source src="/assets/7.x/drawer/drawerType-front.mp4" />
393+
</video>
394+
391395
- `back`: The drawer is revealed behind the screen on swipe.
396+
<video playsInline autoPlay muted loop>
397+
<source src="/assets/7.x/drawer/drawerType-back.mp4" />
398+
</video>
399+
392400
- `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
401+
<video playsInline autoPlay muted loop>
402+
<source src="/assets/7.x/drawer/drawerType-slide.mp4" />
403+
</video>
404+
393405
- `permanent`: A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens.
394406

395407
Defaults to `slide` on iOS and `front` on other platforms.
@@ -419,6 +431,10 @@ function MyDrawer() {
419431

420432
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:
421433

434+
<video playsInline autoPlay muted loop>
435+
<source src="/assets/7.x/drawer/drawerType-masterDetail.mp4" />
436+
</video>
437+
422438
```js
423439
import { useWindowDimensions } from 'react-native';
424440
import { createDrawerNavigator } from '@react-navigation/drawer';
@@ -451,20 +467,34 @@ When set to `true`, Drawer will hide the OS status bar whenever the drawer is pu
451467

452468
#### `drawerStatusBarAnimation`
453469

454-
Animation of the statusbar when hiding it. use in combination with `hideStatusBar`.
470+
Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
471+
472+
This is only supported on iOS. Defaults to `slide`.
455473

456474
Supported values:
457475

458476
- `slide`
477+
<video playsInline autoPlay muted loop>
478+
<source src="/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4" />
479+
</video>
480+
459481
- `fade`
482+
<video playsInline autoPlay muted loop>
483+
<source src="/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4" />
484+
</video>
485+
460486
- `none`
461487

462-
This is only supported on iOS. Defaults to `slide`.
488+
463489

464490
#### `overlayColor`
465491

466492
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.
467493

494+
<video playsInline autoPlay muted loop>
495+
<source src="/assets/7.x/drawer/overlayColor.mp4" />
496+
</video>
497+
468498
#### `sceneContainerStyle`
469499

470500
Style object for the component wrapping the screen content.

0 commit comments

Comments
 (0)