react-native-drawer-layout 3.2.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -254
- package/lib/typescript/src/views/Drawer.d.ts +0 -1
- package/lib/typescript/src/views/Drawer.d.ts.map +1 -1
- package/lib/typescript/src/views/GestureHandlerNative.d.ts +0 -1
- package/lib/typescript/src/views/GestureHandlerNative.d.ts.map +1 -1
- package/lib/typescript/src/views/legacy/Overlay.d.ts +19 -3
- package/lib/typescript/src/views/legacy/Overlay.d.ts.map +1 -1
- package/lib/typescript/src/views/modern/Drawer.d.ts +0 -1
- package/lib/typescript/src/views/modern/Drawer.d.ts.map +1 -1
- package/lib/typescript/src/views/modern/Overlay.d.ts +19 -3
- package/lib/typescript/src/views/modern/Overlay.d.ts.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,257 +1,5 @@
|
|
|
1
1
|
# React Native Drawer Layout
|
|
2
2
|
|
|
3
|
-
A cross-platform Drawer component for React Native
|
|
3
|
+
A cross-platform Drawer component for React Native implemented using [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Installation
|
|
8
|
-
|
|
9
|
-
Open a Terminal in the project root and run:
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
npm install react-native-drawer-layout
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Then, you need to install and configure the libraries that are required by the drawer:
|
|
16
|
-
|
|
17
|
-
1. First, install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
|
|
18
|
-
|
|
19
|
-
If you have a Expo managed project, in your project directory, run:
|
|
20
|
-
|
|
21
|
-
```sh
|
|
22
|
-
npx expo install react-native-gesture-handler react-native-reanimated
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
If you have a bare React Native project, in your project directory, run:
|
|
26
|
-
|
|
27
|
-
```bash npm2yarn
|
|
28
|
-
npm install react-native-gesture-handler react-native-reanimated
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
The Drawer supports both Reanimated 1 and Reanimated 2. If you want to use Reanimated 2, make sure to configure it following the [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
|
|
32
|
-
|
|
33
|
-
2. To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
|
|
34
|
-
|
|
35
|
-
```js
|
|
36
|
-
import 'react-native-gesture-handler';
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
> Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
|
|
40
|
-
|
|
41
|
-
3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
|
|
42
|
-
|
|
43
|
-
```sh
|
|
44
|
-
npx pod-install ios
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
We're done! Now you can build and run the app on your device/simulator.
|
|
48
|
-
|
|
49
|
-
## Quick Start
|
|
50
|
-
|
|
51
|
-
```js
|
|
52
|
-
import * as React from 'react';
|
|
53
|
-
import { Button, Text } from 'react-native';
|
|
54
|
-
import { Drawer } from 'react-native-drawer-layout';
|
|
55
|
-
|
|
56
|
-
export default function DrawerExample() {
|
|
57
|
-
const [open, setOpen] = React.useState(false);
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<Drawer
|
|
61
|
-
open={open}
|
|
62
|
-
onOpen={() => setOpen(true)}
|
|
63
|
-
onClose={() => setOpen(false)}
|
|
64
|
-
renderDrawerContent={() => {
|
|
65
|
-
return <Text>Drawer content</Text>;
|
|
66
|
-
}}
|
|
67
|
-
>
|
|
68
|
-
<Button
|
|
69
|
-
onPress={() => setOpen((prevOpen) => !prevOpen)}
|
|
70
|
-
title={`${open ? 'Close' : 'Open'} drawer`}
|
|
71
|
-
/>
|
|
72
|
-
</Drawer>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## API reference
|
|
78
|
-
|
|
79
|
-
The package exports a `Drawer` component which is the one you'd use to render the drawer.
|
|
80
|
-
|
|
81
|
-
### `Drawer`
|
|
82
|
-
|
|
83
|
-
Component responsible for rendering a drawer with animations and gestures.
|
|
84
|
-
|
|
85
|
-
#### Drawer Props
|
|
86
|
-
|
|
87
|
-
##### `open`
|
|
88
|
-
|
|
89
|
-
Whether the drawer is open or not.
|
|
90
|
-
|
|
91
|
-
##### `onOpen`
|
|
92
|
-
|
|
93
|
-
Callback which is called when the drawer is opened.
|
|
94
|
-
|
|
95
|
-
##### `onClose`
|
|
96
|
-
|
|
97
|
-
Callback which is called when the drawer is closed.
|
|
98
|
-
|
|
99
|
-
##### `renderDrawerContent`
|
|
100
|
-
|
|
101
|
-
Callback which returns a react element to render as the content of the drawer.
|
|
102
|
-
|
|
103
|
-
##### `layout`
|
|
104
|
-
|
|
105
|
-
Object containing the layout of the container. Defaults to the dimensions of the application's window.
|
|
106
|
-
|
|
107
|
-
##### `drawerPosition`
|
|
108
|
-
|
|
109
|
-
Position of the drawer on the screen. Defaults to `right` in RTL mode, otherwise `left`.
|
|
110
|
-
|
|
111
|
-
##### `drawerType`
|
|
112
|
-
|
|
113
|
-
Type of the drawer. It determines how the drawer looks and animates.
|
|
114
|
-
|
|
115
|
-
- `front`: Traditional drawer which covers the screen with a overlay behind it.
|
|
116
|
-
- `back`: The drawer is revealed behind the screen on swipe.
|
|
117
|
-
- `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
|
|
118
|
-
- `permanent`: A permanent drawer is shown as a sidebar.
|
|
119
|
-
|
|
120
|
-
Defaults to `slide` on iOS and `front` on other platforms.
|
|
121
|
-
|
|
122
|
-
##### `drawerStyle`
|
|
123
|
-
|
|
124
|
-
Style object for the drawer. You can pass a custom background color for drawer or a custom width for the drawer.
|
|
125
|
-
|
|
126
|
-
##### `overlayStyle`
|
|
127
|
-
|
|
128
|
-
Style object for the overlay.
|
|
129
|
-
|
|
130
|
-
##### `hideStatusBarOnOpen`
|
|
131
|
-
|
|
132
|
-
Whether to hide the status bar when the drawer is open. Defaults to `false`.
|
|
133
|
-
|
|
134
|
-
##### `keyboardDismissMode`
|
|
135
|
-
|
|
136
|
-
Whether to dismiss the keyboard when the drawer is open. Supported values are:
|
|
137
|
-
|
|
138
|
-
- `none`: The keyboard will not be dismissed when the drawer is open.
|
|
139
|
-
- `on-drag`: The keyboard will be dismissed when the drawer is opened by a swipe gesture.
|
|
140
|
-
|
|
141
|
-
Defaults to `on-drag`.
|
|
142
|
-
|
|
143
|
-
##### `statusBarAnimation`
|
|
144
|
-
|
|
145
|
-
Animation to use when the status bar is hidden. Supported values are:
|
|
146
|
-
|
|
147
|
-
- `slide`: The status bar will slide out of view.
|
|
148
|
-
- `fade`: The status bar will fade out of view.
|
|
149
|
-
- `none`: The status bar will not animate.
|
|
150
|
-
|
|
151
|
-
Use it in combination with `hideStatusBarOnOpen`.
|
|
152
|
-
|
|
153
|
-
##### `swipeEnabled`
|
|
154
|
-
|
|
155
|
-
Whether to enable swipe gestures to open the drawer. Defaults to `true`.
|
|
156
|
-
|
|
157
|
-
This is not supported on web.
|
|
158
|
-
|
|
159
|
-
##### `swipeEdgeWidth`
|
|
160
|
-
|
|
161
|
-
How far from the edge of the screen the swipe gesture should activate. Defaults to `32`.
|
|
162
|
-
|
|
163
|
-
This is not supported on web.
|
|
164
|
-
|
|
165
|
-
##### `swipeMinDistance`
|
|
166
|
-
|
|
167
|
-
Minimum swipe distance that should activate opening the drawer. Defaults to `60`.
|
|
168
|
-
|
|
169
|
-
This is not supported on web.
|
|
170
|
-
|
|
171
|
-
##### `swipeMinVelocity`
|
|
172
|
-
|
|
173
|
-
Minimum swipe velocity that should activate opening the drawer. Defaults to `500`.
|
|
174
|
-
|
|
175
|
-
This is not supported on web.
|
|
176
|
-
|
|
177
|
-
##### `gestureHandlerProps`
|
|
178
|
-
|
|
179
|
-
Props to pass to the underlying pan gesture handler.
|
|
180
|
-
|
|
181
|
-
This is not supported on web.
|
|
182
|
-
|
|
183
|
-
##### `children`
|
|
184
|
-
|
|
185
|
-
Content that the drawer should wrap.
|
|
186
|
-
|
|
187
|
-
### `useDrawerProgress`
|
|
188
|
-
|
|
189
|
-
The `useDrawerProgress` hook returns a Reanimated SharedValue (with modern implementation) or Reanimated Node (with legacy implementation) which represents the progress of the drawer. It can be used to animate the content of the screen.
|
|
190
|
-
|
|
191
|
-
Example with modern implementation:
|
|
192
|
-
|
|
193
|
-
```js
|
|
194
|
-
import { Animated } from 'react-native-reanimated';
|
|
195
|
-
import { useDrawerProgress } from 'react-native-drawer-layout';
|
|
196
|
-
|
|
197
|
-
// ...
|
|
198
|
-
|
|
199
|
-
function MyComponent() {
|
|
200
|
-
const progress = useDrawerProgress();
|
|
201
|
-
|
|
202
|
-
const animatedStyle = useAnimatedStyle(() => {
|
|
203
|
-
return {
|
|
204
|
-
transform: [
|
|
205
|
-
{
|
|
206
|
-
translateX: interpolate(progress, [0, 1], [-100, 0]),
|
|
207
|
-
},
|
|
208
|
-
],
|
|
209
|
-
};
|
|
210
|
-
});
|
|
211
|
-
|
|
212
|
-
return <Animated.View style={animatedStyle}>{/* ... */}</Animated.View>;
|
|
213
|
-
}
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
Example with legacy implementation:
|
|
217
|
-
|
|
218
|
-
```js
|
|
219
|
-
import { Animated } from 'react-native-reanimated';
|
|
220
|
-
import { useDrawerProgress } from 'react-native-drawer-layout';
|
|
221
|
-
|
|
222
|
-
// ...
|
|
223
|
-
|
|
224
|
-
function MyComponent() {
|
|
225
|
-
const progress = useDrawerProgress();
|
|
226
|
-
|
|
227
|
-
// If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
|
|
228
|
-
const translateX = Animated.interpolateNode(progress, {
|
|
229
|
-
inputRange: [0, 1],
|
|
230
|
-
outputRange: [-100, 0],
|
|
231
|
-
});
|
|
232
|
-
|
|
233
|
-
return (
|
|
234
|
-
<Animated.View style={{ transform: [{ translateX }] }}>
|
|
235
|
-
{/* ... */}
|
|
236
|
-
</Animated.View>
|
|
237
|
-
);
|
|
238
|
-
}
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
If you are using class components, you can use the `DrawerProgressContext` to get the progress value.
|
|
242
|
-
|
|
243
|
-
```js
|
|
244
|
-
import { DrawerProgressContext } from 'react-native-drawer-layout';
|
|
245
|
-
|
|
246
|
-
// ...
|
|
247
|
-
|
|
248
|
-
class MyComponent extends React.Component {
|
|
249
|
-
static contextType = DrawerProgressContext;
|
|
250
|
-
|
|
251
|
-
render() {
|
|
252
|
-
const progress = this.context;
|
|
253
|
-
|
|
254
|
-
// ...
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
```
|
|
5
|
+
Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/drawer-layout/).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAuBF,wBAAgB,MAAM,CAAC,EAGrB,uBAAsD,EACtD,MAAM,EAAE,YAAY,EACpB,UAAgE,EAChE,cAAoE,EACpE,WAAW,EACX,YAEyB,EACzB,cAAmB,EACnB,gBAAqC,EACrC,gBAAqC,EACrC,mBAA+B,EAC/B,mBAA2B,EAC3B,kBAA4B,EAC5B,KAAK,EACL,GAAG,IAAI,EACR,EAAE,KAAK,eAyCP"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { PanGestureHandlerProperties } from 'react-native-gesture-handler';
|
|
3
2
|
export declare function PanGestureHandler(props: PanGestureHandlerProperties): JSX.Element;
|
|
4
3
|
export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GestureHandlerNative.d.ts","sourceRoot":"","sources":["../../../../src/views/GestureHandlerNative.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"GestureHandlerNative.d.ts","sourceRoot":"","sources":["../../../../src/views/GestureHandlerNative.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,2BAA2B,EAC5B,MAAM,8BAA8B,CAAC;AAItC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,2BAA2B,eAQnE;AAED,YAAY,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EACL,sBAAsB,EACtB,KAAK,IAAI,YAAY,EACrB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC"}
|
|
@@ -3,6 +3,7 @@ import Animated from 'react-native-reanimated';
|
|
|
3
3
|
export declare const Overlay: React.ForwardRefExoticComponent<{
|
|
4
4
|
children?: React.ReactNode | Animated.Node<React.ReactNode>;
|
|
5
5
|
hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
|
|
6
|
+
id?: string | Animated.Node<string | undefined> | undefined;
|
|
6
7
|
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
|
|
7
8
|
pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
|
|
8
9
|
removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
@@ -58,21 +59,36 @@ export declare const Overlay: React.ForwardRefExoticComponent<{
|
|
|
58
59
|
label?: string | undefined;
|
|
59
60
|
}>[] | undefined> | undefined;
|
|
60
61
|
accessibilityLabel?: string | Animated.Node<string | undefined> | undefined;
|
|
62
|
+
'aria-label'?: string | Animated.Node<string | undefined> | undefined;
|
|
61
63
|
accessibilityRole?: import("react-native").AccessibilityRole | Animated.Node<import("react-native").AccessibilityRole | undefined> | undefined;
|
|
62
64
|
accessibilityState?: import("react-native").AccessibilityState | Animated.Node<import("react-native").AccessibilityState | undefined> | undefined;
|
|
65
|
+
'aria-busy'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
66
|
+
'aria-checked'?: boolean | "mixed" | Animated.Node<boolean | "mixed" | undefined> | undefined;
|
|
67
|
+
'aria-disabled'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
68
|
+
'aria-expanded'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
69
|
+
'aria-selected'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
70
|
+
'aria-labelledby'?: string | Animated.Node<string | undefined> | undefined;
|
|
63
71
|
accessibilityHint?: string | Animated.Node<string | undefined> | undefined;
|
|
64
72
|
accessibilityValue?: import("react-native").AccessibilityValue | Animated.Node<import("react-native").AccessibilityValue | undefined> | undefined;
|
|
73
|
+
'aria-valuemax'?: number | Animated.Node<number | undefined> | undefined;
|
|
74
|
+
'aria-valuemin'?: number | Animated.Node<number | undefined> | undefined;
|
|
75
|
+
'aria-valuenow'?: number | Animated.Node<number | undefined> | undefined;
|
|
76
|
+
'aria-valuetext'?: string | Animated.Node<string | undefined> | undefined;
|
|
65
77
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | Animated.Node<((event: import("react-native").AccessibilityActionEvent) => void) | undefined> | undefined;
|
|
66
|
-
accessibilityLabelledBy?: string | string[] | Animated.Node<string | string[] | undefined> | undefined;
|
|
67
|
-
accessibilityLiveRegion?: "none" | "polite" | "assertive" | Animated.Node<"none" | "polite" | "assertive" | undefined> | undefined;
|
|
68
78
|
importantForAccessibility?: "auto" | "no-hide-descendants" | "yes" | "no" | Animated.Node<"auto" | "no-hide-descendants" | "yes" | "no" | undefined> | undefined;
|
|
79
|
+
'aria-hidden'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
80
|
+
'aria-live'?: "polite" | "assertive" | "off" | Animated.Node<"polite" | "assertive" | "off" | undefined> | undefined;
|
|
81
|
+
'aria-modal'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
82
|
+
role?: import("react-native").Role | Animated.Node<import("react-native").Role | undefined> | undefined;
|
|
83
|
+
accessibilityLiveRegion?: "none" | "polite" | "assertive" | Animated.Node<"none" | "polite" | "assertive" | undefined> | undefined;
|
|
84
|
+
accessibilityLabelledBy?: string | string[] | Animated.Node<string | string[] | undefined> | undefined;
|
|
69
85
|
accessibilityElementsHidden?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
70
|
-
accessibilityLanguage?: string | Animated.Node<string | undefined> | undefined;
|
|
71
86
|
accessibilityViewIsModal?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
72
87
|
onAccessibilityEscape?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
73
88
|
onAccessibilityTap?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
74
89
|
onMagicTap?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
75
90
|
accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
91
|
+
accessibilityLanguage?: string | Animated.Node<string | undefined> | undefined;
|
|
76
92
|
} & {
|
|
77
93
|
style?: import("react-native").StyleProp<Animated.AnimateStyle<import("react-native").StyleProp<import("react-native").ViewStyle>>>;
|
|
78
94
|
} & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/views/legacy/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAqB/C,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/views/legacy/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAqB/C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cALR,aAAa,CAAC,MAAM,CAAC;aACtB,MAAM,IAAI;;uCA8CnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/modern/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/modern/Drawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAe/C,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,cAAc,EACd,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,gBAAqC,EACrC,gBAAqC,EACrC,mBAAmB,EACnB,QAAQ,GACT,EAAE,KAAK,eAuWP"}
|
|
@@ -3,6 +3,7 @@ import Animated from 'react-native-reanimated';
|
|
|
3
3
|
export declare const Overlay: React.ForwardRefExoticComponent<{
|
|
4
4
|
children?: React.ReactNode | Animated.Node<React.ReactNode>;
|
|
5
5
|
hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
|
|
6
|
+
id?: string | Animated.Node<string | undefined> | undefined;
|
|
6
7
|
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
|
|
7
8
|
pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
|
|
8
9
|
removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
@@ -58,21 +59,36 @@ export declare const Overlay: React.ForwardRefExoticComponent<{
|
|
|
58
59
|
label?: string | undefined;
|
|
59
60
|
}>[] | undefined> | undefined;
|
|
60
61
|
accessibilityLabel?: string | Animated.Node<string | undefined> | undefined;
|
|
62
|
+
'aria-label'?: string | Animated.Node<string | undefined> | undefined;
|
|
61
63
|
accessibilityRole?: import("react-native").AccessibilityRole | Animated.Node<import("react-native").AccessibilityRole | undefined> | undefined;
|
|
62
64
|
accessibilityState?: import("react-native").AccessibilityState | Animated.Node<import("react-native").AccessibilityState | undefined> | undefined;
|
|
65
|
+
'aria-busy'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
66
|
+
'aria-checked'?: boolean | "mixed" | Animated.Node<boolean | "mixed" | undefined> | undefined;
|
|
67
|
+
'aria-disabled'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
68
|
+
'aria-expanded'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
69
|
+
'aria-selected'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
70
|
+
'aria-labelledby'?: string | Animated.Node<string | undefined> | undefined;
|
|
63
71
|
accessibilityHint?: string | Animated.Node<string | undefined> | undefined;
|
|
64
72
|
accessibilityValue?: import("react-native").AccessibilityValue | Animated.Node<import("react-native").AccessibilityValue | undefined> | undefined;
|
|
73
|
+
'aria-valuemax'?: number | Animated.Node<number | undefined> | undefined;
|
|
74
|
+
'aria-valuemin'?: number | Animated.Node<number | undefined> | undefined;
|
|
75
|
+
'aria-valuenow'?: number | Animated.Node<number | undefined> | undefined;
|
|
76
|
+
'aria-valuetext'?: string | Animated.Node<string | undefined> | undefined;
|
|
65
77
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | Animated.Node<((event: import("react-native").AccessibilityActionEvent) => void) | undefined> | undefined;
|
|
66
|
-
accessibilityLabelledBy?: string | string[] | Animated.Node<string | string[] | undefined> | undefined;
|
|
67
|
-
accessibilityLiveRegion?: "none" | "polite" | "assertive" | Animated.Node<"none" | "polite" | "assertive" | undefined> | undefined;
|
|
68
78
|
importantForAccessibility?: "auto" | "no-hide-descendants" | "yes" | "no" | Animated.Node<"auto" | "no-hide-descendants" | "yes" | "no" | undefined> | undefined;
|
|
79
|
+
'aria-hidden'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
80
|
+
'aria-live'?: "polite" | "assertive" | "off" | Animated.Node<"polite" | "assertive" | "off" | undefined> | undefined;
|
|
81
|
+
'aria-modal'?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
82
|
+
role?: import("react-native").Role | Animated.Node<import("react-native").Role | undefined> | undefined;
|
|
83
|
+
accessibilityLiveRegion?: "none" | "polite" | "assertive" | Animated.Node<"none" | "polite" | "assertive" | undefined> | undefined;
|
|
84
|
+
accessibilityLabelledBy?: string | string[] | Animated.Node<string | string[] | undefined> | undefined;
|
|
69
85
|
accessibilityElementsHidden?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
70
|
-
accessibilityLanguage?: string | Animated.Node<string | undefined> | undefined;
|
|
71
86
|
accessibilityViewIsModal?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
72
87
|
onAccessibilityEscape?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
73
88
|
onAccessibilityTap?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
74
89
|
onMagicTap?: (() => void) | Animated.Node<(() => void) | undefined> | undefined;
|
|
75
90
|
accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
|
|
91
|
+
accessibilityLanguage?: string | Animated.Node<string | undefined> | undefined;
|
|
76
92
|
} & {
|
|
77
93
|
style?: import("react-native").StyleProp<Animated.AnimateStyle<import("react-native").StyleProp<import("react-native").ViewStyle>>>;
|
|
78
94
|
} & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/views/modern/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAGN,MAAM,yBAAyB,CAAC;AAUjC,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/views/modern/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,QAGN,MAAM,yBAAyB,CAAC;AAUjC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cALR,SAAS,WAAW,CAAC,MAAM,CAAC;aAC7B,MAAM,IAAI;;uCAgDnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-drawer-layout",
|
|
3
3
|
"description": "Drawer component for React Native",
|
|
4
|
-
"version": "3.2.
|
|
4
|
+
"version": "3.2.1",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"bugs": {
|
|
21
21
|
"url": "https://github.com/react-navigation/react-navigation/issues"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://
|
|
23
|
+
"homepage": "https://reactnavigation.org/docs/drawer-layout/",
|
|
24
24
|
"main": "lib/commonjs/index.js",
|
|
25
25
|
"react-native": "src/index.tsx",
|
|
26
26
|
"source": "src/index.tsx",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"del-cli": "^5.0.0",
|
|
44
|
-
"react": "18.
|
|
45
|
-
"react-native": "0.
|
|
44
|
+
"react": "18.2.0",
|
|
45
|
+
"react-native": "0.71.8",
|
|
46
46
|
"react-native-builder-bob": "^0.20.4",
|
|
47
47
|
"typescript": "^4.9.4"
|
|
48
48
|
},
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
]
|
|
67
67
|
]
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "36c8f091556157dab74d3483651bbcbd340762ff"
|
|
70
70
|
}
|