-
-
Notifications
You must be signed in to change notification settings - Fork 992
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into @latekvo/remove-deprecated-classes-and-funct…
…ions
- Loading branch information
Showing
13 changed files
with
345 additions
and
1,964 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| --- | ||
| id: reanimated-drawer-layout | ||
| title: Reanimated Drawer Layout | ||
| sidebar_label: Reanimated Drawer Layout | ||
| --- | ||
|
|
||
| import useBaseUrl from '@docusaurus/useBaseUrl'; | ||
|
|
||
| Cross-platform replacement for the React Native's [DrawerLayoutAndroid](http://reactnative.dev/docs/drawerlayoutandroid.html) component. | ||
| For detailed usage of standard parameters, please refer to the [React Native docs](http://reactnative.dev/docs/drawerlayoutandroid.html). | ||
|
|
||
| ### Usage: | ||
|
|
||
| To use it, import it in the following way: | ||
|
|
||
| ```js | ||
| import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout'; | ||
| ``` | ||
|
|
||
| ## Properties: | ||
|
|
||
| ### `drawerType` | ||
|
|
||
| specifies the way the drawer will be displayed. | ||
| Accepts values of the `DrawerPosition` enum. Defaults to `FRONT`. | ||
|
|
||
| - `FRONT` the drawer will be displayed above the content view. | ||
| - `BACK` the drawer will be displayed below the content view, revealed by sliding away the content view. | ||
| - `SLIDE` the drawer will appear attached to the content view, opening it slides both the drawer and the content view. | ||
|
|
||
| | `FRONT` | `BACK` | `SLIDE` | | ||
| | ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- | | ||
| | <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> | | ||
|
|
||
| ### `edgeWidth` | ||
|
|
||
| width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer. | ||
|
|
||
| ### `hideStatusBar` | ||
|
|
||
| a boolean value. When set to `true`, drawer component will use [StatusBar API](http://reactnative.dev/docs/statusbar.html) to hide the OS status bar when the drawer is dragged or idle in the `open` position. | ||
|
|
||
| ### `statusBarAnimation` | ||
|
|
||
| a string with possible values: `slide`, `none` or `fade`. Defaults to `slide`. | ||
| May be used in combination with `hideStatusBar` to select the animation used for hiding the status bar. | ||
| See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs. | ||
|
|
||
| ### `overlayColor` | ||
|
|
||
| color of the background overlay on top of the content window when the drawer is `open`. | ||
| This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to `rgba(0, 0, 0, 0.7)`. | ||
|
|
||
| ### `renderNavigationView` | ||
|
|
||
| a renderer function for the drawer component, provided with a `progress` parameter. | ||
|
|
||
| - `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation. | ||
| - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened | ||
| - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing | ||
|
|
||
| ### `onDrawerClose` | ||
|
|
||
| a function which is called when the drawer has been closed. | ||
|
|
||
| ### `onDrawerOpen` | ||
|
|
||
| a function which is called when the drawer has been opened. | ||
|
|
||
| ### `onDrawerSlide` | ||
|
|
||
| a function which is called when drawer is moving or animating, provided with a `progress` parameter. | ||
|
|
||
| - `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation. | ||
| - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened | ||
| - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing | ||
|
|
||
| ### `onDrawerStateChanged` | ||
|
|
||
| a function which is called when the status of the drawer changes. It takes two arguments: | ||
|
|
||
| - `newState` - interaction state of the drawer. It can be one of the following: | ||
| - `DrawerState.IDLE` | ||
| - `DrawerState.DRAGGING` | ||
| - `DrawerState.SETTLING` | ||
| - `drawerWillShow` - `true` when `drawer` started animating to `open` position, `false` otherwise. | ||
|
|
||
| ### `enableTrackpadTwoFingerGesture` (iOS only) | ||
|
|
||
| enables two-finger gestures on supported devices, for example iPads with trackpads. | ||
| If not enabled, the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture. | ||
|
|
||
| ### `children` | ||
|
|
||
| either a component that's rendered in the content view or a function. | ||
| If `children` is a function, it is provided with a `progress` parameter. | ||
|
|
||
| - `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation. | ||
| - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened | ||
| - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing | ||
|
|
||
| ### `mouseButton(value: MouseButton)` (Web & Android only) | ||
|
|
||
| allows users to choose which mouse button should handler respond to. | ||
| The enum `MouseButton` consists of the following predefined fields: | ||
|
|
||
| - `LEFT` | ||
| - `RIGHT` | ||
| - `MIDDLE` | ||
| - `BUTTON_4` | ||
| - `BUTTON_5` | ||
| - `ALL` | ||
|
|
||
| Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`. | ||
|
|
||
| ### `enableContextMenu(value: boolean)` (Web only) | ||
|
|
||
| specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`. | ||
|
|
||
| ## Methods | ||
|
|
||
| ### `openDrawer(options)` | ||
|
|
||
| `openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties: | ||
|
|
||
| - `initialVelocity` - the initial velocity of the object attached to the spring. Defaults to `0`. | ||
| - `animationSpeed` - controls speed of the animation. Defaults to `1`. | ||
|
|
||
| ### `closeDrawer(options)` | ||
|
|
||
| `closeDrawer` accepts an optional `options` parameter, which is an object with the following optional properties: | ||
|
|
||
| - `initialVelocity` - initial velocity of the object attached to the spring. Defaults to `0`. | ||
| - `animationSpeed` - controls speed of the animation. Defaults to `1`. | ||
|
|
||
| ## Example: | ||
|
|
||
| See the [reanimated drawer layout example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/reanimatedDrawerLayout/index.tsx) from GestureHandler example app. | ||
|
|
||
| ```js | ||
| import React, { useRef } from 'react'; | ||
| import { StyleSheet, Text, View } from 'react-native'; | ||
| import { Gesture, GestureDetector } from 'react-native-gesture-handler'; | ||
|
|
||
| import ReanimatedDrawerLayout, { | ||
| DrawerType, | ||
| DrawerPosition, | ||
| DrawerLayoutMethods, | ||
| } from 'react-native-gesture-handler/ReanimatedDrawerLayout'; | ||
|
|
||
| const DrawerPage = () => { | ||
| return ( | ||
| <View style={styles.drawerContainer}> | ||
| <Text>Lorem ipsum</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default function ReanimatedDrawerExample() { | ||
| const drawerRef = useRef < DrawerLayoutMethods > null; | ||
| const tapGesture = Gesture.Tap() | ||
| .runOnJS(true) | ||
| .onStart(() => drawerRef.current?.openDrawer()); | ||
|
|
||
| return ( | ||
| <ReanimatedDrawerLayout | ||
| ref={drawerRef} | ||
| renderNavigationView={() => <DrawerPage />} | ||
| drawerPosition={DrawerPosition.LEFT} | ||
| drawerType={DrawerType.FRONT}> | ||
| <View style={styles.innerContainer}> | ||
| <GestureDetector gesture={tapGesture}> | ||
| <View style={styles.box}> | ||
| <Text>Open drawer</Text> | ||
| </View> | ||
| </GestureDetector> | ||
| </View> | ||
| </ReanimatedDrawerLayout> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| drawerContainer: { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: 'pink', | ||
| }, | ||
| innerContainer: { | ||
| flex: 1, | ||
| backgroundColor: 'white', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| gap: 20, | ||
| }, | ||
| box: { | ||
| padding: 20, | ||
| backgroundColor: 'pink', | ||
| }, | ||
| }); | ||
| ``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.