react-native-drawer-layout 4.0.0-alpha.6 → 4.0.0-alpha.8

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.
Files changed (54) hide show
  1. package/lib/commonjs/utils/getDrawerWidth.js +41 -0
  2. package/lib/commonjs/utils/getDrawerWidth.js.map +1 -0
  3. package/lib/commonjs/utils/useDrawerProgress.js.map +1 -1
  4. package/lib/commonjs/utils/useFakeSharedValue.js +46 -0
  5. package/lib/commonjs/utils/useFakeSharedValue.js.map +1 -0
  6. package/lib/commonjs/views/Drawer.js +51 -283
  7. package/lib/commonjs/views/Drawer.js.map +1 -1
  8. package/lib/commonjs/views/Drawer.native.js +313 -0
  9. package/lib/commonjs/views/Drawer.native.js.map +1 -0
  10. package/lib/commonjs/views/Overlay.js +22 -39
  11. package/lib/commonjs/views/Overlay.js.map +1 -1
  12. package/lib/commonjs/views/Overlay.native.js +58 -0
  13. package/lib/commonjs/views/Overlay.native.js.map +1 -0
  14. package/lib/module/utils/getDrawerWidth.js +35 -0
  15. package/lib/module/utils/getDrawerWidth.js.map +1 -0
  16. package/lib/module/utils/useDrawerProgress.js.map +1 -1
  17. package/lib/module/utils/useFakeSharedValue.js +38 -0
  18. package/lib/module/utils/useFakeSharedValue.js.map +1 -0
  19. package/lib/module/views/Drawer.js +52 -282
  20. package/lib/module/views/Drawer.js.map +1 -1
  21. package/lib/module/views/Drawer.native.js +304 -0
  22. package/lib/module/views/Drawer.native.js.map +1 -0
  23. package/lib/module/views/Overlay.js +22 -39
  24. package/lib/module/views/Overlay.js.map +1 -1
  25. package/lib/module/views/Overlay.native.js +50 -0
  26. package/lib/module/views/Overlay.native.js.map +1 -0
  27. package/lib/typescript/src/types.d.ts +9 -2
  28. package/lib/typescript/src/types.d.ts.map +1 -1
  29. package/lib/typescript/src/utils/DrawerProgressContext.d.ts +2 -2
  30. package/lib/typescript/src/utils/DrawerProgressContext.d.ts.map +1 -1
  31. package/lib/typescript/src/utils/getDrawerWidth.d.ts +9 -0
  32. package/lib/typescript/src/utils/getDrawerWidth.d.ts.map +1 -0
  33. package/lib/typescript/src/utils/useDrawerProgress.d.ts +2 -2
  34. package/lib/typescript/src/utils/useDrawerProgress.d.ts.map +1 -1
  35. package/lib/typescript/src/utils/useFakeSharedValue.d.ts +17 -0
  36. package/lib/typescript/src/utils/useFakeSharedValue.d.ts.map +1 -0
  37. package/lib/typescript/src/views/Drawer.d.ts +1 -6
  38. package/lib/typescript/src/views/Drawer.d.ts.map +1 -1
  39. package/lib/typescript/src/views/Drawer.native.d.ts +4 -0
  40. package/lib/typescript/src/views/Drawer.native.d.ts.map +1 -0
  41. package/lib/typescript/src/views/Overlay.d.ts +2 -204
  42. package/lib/typescript/src/views/Overlay.d.ts.map +1 -1
  43. package/lib/typescript/src/views/Overlay.native.d.ts +4 -0
  44. package/lib/typescript/src/views/Overlay.native.d.ts.map +1 -0
  45. package/package.json +2 -2
  46. package/src/types.tsx +10 -1
  47. package/src/utils/DrawerProgressContext.tsx +2 -2
  48. package/src/utils/getDrawerWidth.tsx +39 -0
  49. package/src/utils/useDrawerProgress.tsx +2 -2
  50. package/src/utils/useFakeSharedValue.tsx +49 -0
  51. package/src/views/Drawer.native.tsx +450 -0
  52. package/src/views/Drawer.tsx +102 -434
  53. package/src/views/Overlay.native.tsx +63 -0
  54. package/src/views/Overlay.tsx +26 -59
@@ -1,206 +1,4 @@
1
1
  import * as React from 'react';
2
- import Animated from 'react-native-reanimated';
3
- export declare const Overlay: React.ForwardRefExoticComponent<{
4
- children?: React.ReactNode | import("react-native-reanimated").SharedValue<React.ReactNode>;
5
- hitSlop?: import("react-native").Insets | import("react-native-reanimated").SharedValue<import("react-native").Insets | undefined> | undefined;
6
- id?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
7
- onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
8
- pointerEvents?: "none" | "box-none" | "box-only" | "auto" | import("react-native-reanimated").SharedValue<"none" | "box-none" | "box-only" | "auto" | undefined> | undefined;
9
- removeClippedSubviews?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
10
- testID?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
11
- nativeID?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
12
- collapsable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
13
- needsOffscreenAlphaCompositing?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
14
- renderToHardwareTextureAndroid?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
15
- focusable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
16
- shouldRasterizeIOS?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
17
- isTVSelectable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
18
- hasTVPreferredFocus?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
19
- tvParallaxProperties?: import("react-native").TVParallaxProperties | import("react-native-reanimated").SharedValue<import("react-native").TVParallaxProperties | undefined> | undefined;
20
- tvParallaxShiftDistanceX?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
21
- tvParallaxShiftDistanceY?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
22
- tvParallaxTiltAngle?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
23
- tvParallaxMagnification?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
24
- onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
25
- onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
26
- onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
27
- onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
28
- onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
29
- onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
30
- onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
31
- onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
32
- onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
33
- onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
34
- onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
35
- onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
36
- onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
37
- onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
38
- onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
39
- onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
40
- onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
41
- onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
42
- onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
43
- onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
44
- onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
45
- onPointerMove?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
46
- onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
47
- onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
48
- onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
49
- onPointerDown?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
50
- onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
51
- onPointerUp?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
52
- onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
53
- accessible?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
54
- accessibilityActions?: readonly Readonly<{
55
- name: string;
56
- label?: string | undefined;
57
- }>[] | import("react-native-reanimated").SharedValue<readonly Readonly<{
58
- name: string;
59
- label?: string | undefined;
60
- }>[] | undefined> | undefined;
61
- accessibilityLabel?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
62
- 'aria-label'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
63
- accessibilityRole?: import("react-native").AccessibilityRole | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityRole | undefined> | undefined;
64
- accessibilityState?: import("react-native").AccessibilityState | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityState | undefined> | undefined;
65
- 'aria-busy'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
66
- 'aria-checked'?: boolean | "mixed" | import("react-native-reanimated").SharedValue<boolean | "mixed" | undefined> | undefined;
67
- 'aria-disabled'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
68
- 'aria-expanded'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
69
- 'aria-selected'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
70
- 'aria-labelledby'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
71
- accessibilityHint?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
72
- accessibilityValue?: import("react-native").AccessibilityValue | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityValue | undefined> | undefined;
73
- 'aria-valuemax'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
74
- 'aria-valuemin'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
75
- 'aria-valuenow'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
76
- 'aria-valuetext'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
77
- onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").AccessibilityActionEvent) => void) | undefined> | undefined;
78
- importantForAccessibility?: "auto" | "no-hide-descendants" | "yes" | "no" | import("react-native-reanimated").SharedValue<"auto" | "no-hide-descendants" | "yes" | "no" | undefined> | undefined;
79
- 'aria-hidden'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
80
- 'aria-live'?: "polite" | "assertive" | "off" | import("react-native-reanimated").SharedValue<"polite" | "assertive" | "off" | undefined> | undefined;
81
- 'aria-modal'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
82
- role?: import("react-native").Role | import("react-native-reanimated").SharedValue<import("react-native").Role | undefined> | undefined;
83
- accessibilityLiveRegion?: "none" | "polite" | "assertive" | import("react-native-reanimated").SharedValue<"none" | "polite" | "assertive" | undefined> | undefined;
84
- accessibilityLabelledBy?: string | string[] | import("react-native-reanimated").SharedValue<string | string[] | undefined> | undefined;
85
- accessibilityElementsHidden?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
86
- accessibilityViewIsModal?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
87
- onAccessibilityEscape?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
88
- onAccessibilityTap?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
89
- onMagicTap?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
90
- accessibilityIgnoresInvertColors?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
91
- accessibilityLanguage?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
92
- } & {
93
- style?: import("react-native").StyleProp<import("react-native-reanimated").AnimatedStyle<import("react-native").StyleProp<import("react-native").ViewStyle>>>;
94
- } & {
95
- layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
96
- entering?: (import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe").ReanimatedKeyframe) | undefined;
97
- exiting?: (import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe").ReanimatedKeyframe) | undefined;
98
- } & {
99
- sharedTransitionTag?: string | undefined;
100
- sharedTransitionStyle?: import("react-native-reanimated").SharedTransition | undefined;
101
- } & {
102
- animatedProps?: Partial<{
103
- children?: React.ReactNode | import("react-native-reanimated").SharedValue<React.ReactNode>;
104
- hitSlop?: import("react-native").Insets | import("react-native-reanimated").SharedValue<import("react-native").Insets | undefined> | undefined;
105
- id?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
106
- onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
107
- pointerEvents?: "none" | "box-none" | "box-only" | "auto" | import("react-native-reanimated").SharedValue<"none" | "box-none" | "box-only" | "auto" | undefined> | undefined;
108
- removeClippedSubviews?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
109
- testID?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
110
- nativeID?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
111
- collapsable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
112
- needsOffscreenAlphaCompositing?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
113
- renderToHardwareTextureAndroid?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
114
- focusable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
115
- shouldRasterizeIOS?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
116
- isTVSelectable?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
117
- hasTVPreferredFocus?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
118
- tvParallaxProperties?: import("react-native").TVParallaxProperties | import("react-native-reanimated").SharedValue<import("react-native").TVParallaxProperties | undefined> | undefined;
119
- tvParallaxShiftDistanceX?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
120
- tvParallaxShiftDistanceY?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
121
- tvParallaxTiltAngle?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
122
- tvParallaxMagnification?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
123
- onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
124
- onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
125
- onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
126
- onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
127
- onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
128
- onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
129
- onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
130
- onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
131
- onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
132
- onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
133
- onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
134
- onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => boolean) | undefined> | undefined;
135
- onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
136
- onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
137
- onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
138
- onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
139
- onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
140
- onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
141
- onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
142
- onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
143
- onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
144
- onPointerMove?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
145
- onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
146
- onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
147
- onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
148
- onPointerDown?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
149
- onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
150
- onPointerUp?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
151
- onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").PointerEvent) => void) | undefined> | undefined;
152
- accessible?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
153
- accessibilityActions?: readonly Readonly<{
154
- name: string;
155
- label?: string | undefined;
156
- }>[] | import("react-native-reanimated").SharedValue<readonly Readonly<{
157
- name: string;
158
- label?: string | undefined;
159
- }>[] | undefined> | undefined;
160
- accessibilityLabel?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
161
- 'aria-label'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
162
- accessibilityRole?: import("react-native").AccessibilityRole | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityRole | undefined> | undefined;
163
- accessibilityState?: import("react-native").AccessibilityState | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityState | undefined> | undefined;
164
- 'aria-busy'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
165
- 'aria-checked'?: boolean | "mixed" | import("react-native-reanimated").SharedValue<boolean | "mixed" | undefined> | undefined;
166
- 'aria-disabled'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
167
- 'aria-expanded'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
168
- 'aria-selected'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
169
- 'aria-labelledby'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
170
- accessibilityHint?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
171
- accessibilityValue?: import("react-native").AccessibilityValue | import("react-native-reanimated").SharedValue<import("react-native").AccessibilityValue | undefined> | undefined;
172
- 'aria-valuemax'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
173
- 'aria-valuemin'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
174
- 'aria-valuenow'?: number | import("react-native-reanimated").SharedValue<number | undefined> | undefined;
175
- 'aria-valuetext'?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
176
- onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | import("react-native-reanimated").SharedValue<((event: import("react-native").AccessibilityActionEvent) => void) | undefined> | undefined;
177
- importantForAccessibility?: "auto" | "no-hide-descendants" | "yes" | "no" | import("react-native-reanimated").SharedValue<"auto" | "no-hide-descendants" | "yes" | "no" | undefined> | undefined;
178
- 'aria-hidden'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
179
- 'aria-live'?: "polite" | "assertive" | "off" | import("react-native-reanimated").SharedValue<"polite" | "assertive" | "off" | undefined> | undefined;
180
- 'aria-modal'?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
181
- role?: import("react-native").Role | import("react-native-reanimated").SharedValue<import("react-native").Role | undefined> | undefined;
182
- accessibilityLiveRegion?: "none" | "polite" | "assertive" | import("react-native-reanimated").SharedValue<"none" | "polite" | "assertive" | undefined> | undefined;
183
- accessibilityLabelledBy?: string | string[] | import("react-native-reanimated").SharedValue<string | string[] | undefined> | undefined;
184
- accessibilityElementsHidden?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
185
- accessibilityViewIsModal?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
186
- onAccessibilityEscape?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
187
- onAccessibilityTap?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
188
- onMagicTap?: (() => void) | import("react-native-reanimated").SharedValue<(() => void) | undefined> | undefined;
189
- accessibilityIgnoresInvertColors?: boolean | import("react-native-reanimated").SharedValue<boolean | undefined> | undefined;
190
- accessibilityLanguage?: string | import("react-native-reanimated").SharedValue<string | undefined> | undefined;
191
- } & {
192
- style?: import("react-native").StyleProp<import("react-native-reanimated").AnimatedStyle<import("react-native").StyleProp<import("react-native").ViewStyle>>>;
193
- } & {
194
- layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
195
- entering?: (import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe").ReanimatedKeyframe) | undefined;
196
- exiting?: (import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe").ReanimatedKeyframe) | undefined;
197
- } & {
198
- sharedTransitionTag?: string | undefined;
199
- sharedTransitionStyle?: import("react-native-reanimated").SharedTransition | undefined;
200
- }> | undefined;
201
- } & {
202
- progress: Animated.SharedValue<number>;
203
- onPress: () => void;
204
- accessibilityLabel?: string | undefined;
205
- } & React.RefAttributes<Animated.View>>;
2
+ import type { OverlayProps } from '../types';
3
+ export declare function Overlay({ open, onPress, style, accessibilityLabel, ...rest }: OverlayProps): React.JSX.Element;
206
4
  //# sourceMappingURL=Overlay.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/views/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"}
1
+ {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,qBAoBd"}
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ import type { OverlayProps } from '../types';
3
+ export declare function Overlay({ progress, onPress, style, accessibilityLabel, ...rest }: OverlayProps): React.JSX.Element;
4
+ //# sourceMappingURL=Overlay.native.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Overlay.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,qBAkCd"}
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": "4.0.0-alpha.6",
4
+ "version": "4.0.0-alpha.8",
5
5
  "keywords": [
6
6
  "react-native-component",
7
7
  "react-component",
@@ -66,5 +66,5 @@
66
66
  ]
67
67
  ]
68
68
  },
69
- "gitHead": "4278a3d0a5deca93206771a1fa746aa03b86900e"
69
+ "gitHead": "b1ed6b0d299189c62f0dc8d7171c243adc674a30"
70
70
  }
package/src/types.tsx CHANGED
@@ -1,5 +1,7 @@
1
- import type { StyleProp, ViewStyle } from 'react-native';
1
+ import * as React from 'react';
2
+ import type { StyleProp, View, ViewStyle } from 'react-native';
2
3
  import type { PanGestureHandler } from 'react-native-gesture-handler';
4
+ import type { SharedValue } from 'react-native-reanimated';
3
5
 
4
6
  export type Layout = { width: number; height: number };
5
7
 
@@ -150,3 +152,10 @@ export type DrawerProps = {
150
152
  */
151
153
  children: React.ReactNode;
152
154
  };
155
+
156
+ export type OverlayProps = React.ComponentProps<typeof View> & {
157
+ open: boolean;
158
+ progress: SharedValue<number>;
159
+ onPress: () => void;
160
+ accessibilityLabel?: string;
161
+ };
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
- import type Animated from 'react-native-reanimated';
2
+ import type { SharedValue } from 'react-native-reanimated';
3
3
 
4
4
  export const DrawerProgressContext = React.createContext<
5
- Readonly<Animated.SharedValue<number>> | undefined
5
+ Readonly<SharedValue<number>> | undefined
6
6
  >(undefined);
@@ -0,0 +1,39 @@
1
+ import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
2
+
3
+ const APPROX_APP_BAR_HEIGHT = 56;
4
+ const DEFAULT_DRAWER_WIDTH = 360;
5
+
6
+ const getDefaultDrawerWidth = ({ width }: { width: number }) => {
7
+ /**
8
+ * Default drawer width is 360dp
9
+ * On screens smaller than 320dp, ideally the drawer would collapse to a navigation bar
10
+ * https://m3.material.io/components/navigation-drawer/specs
11
+ */
12
+ if (width - APPROX_APP_BAR_HEIGHT <= 360) {
13
+ return width - APPROX_APP_BAR_HEIGHT;
14
+ }
15
+
16
+ return DEFAULT_DRAWER_WIDTH;
17
+ };
18
+
19
+ export function getDrawerWidth({
20
+ layout,
21
+ drawerStyle,
22
+ }: {
23
+ layout: { width: number; height: number };
24
+ drawerStyle?: StyleProp<ViewStyle>;
25
+ }) {
26
+ const { width = getDefaultDrawerWidth(layout) } =
27
+ StyleSheet.flatten(drawerStyle) || {};
28
+
29
+ if (typeof width === 'string' && width.endsWith('%')) {
30
+ // Try to calculate width if a percentage is given
31
+ const percentage = Number(width.replace(/%$/, ''));
32
+
33
+ if (Number.isFinite(percentage)) {
34
+ return layout.width * (percentage / 100);
35
+ }
36
+ }
37
+
38
+ return typeof width === 'number' ? width : 0;
39
+ }
@@ -1,9 +1,9 @@
1
1
  import * as React from 'react';
2
- import type Animated from 'react-native-reanimated';
2
+ import type { SharedValue } from 'react-native-reanimated';
3
3
 
4
4
  import { DrawerProgressContext } from './DrawerProgressContext';
5
5
 
6
- export function useDrawerProgress(): Readonly<Animated.SharedValue<number>> {
6
+ export function useDrawerProgress(): Readonly<SharedValue<number>> {
7
7
  const progress = React.useContext(DrawerProgressContext);
8
8
 
9
9
  if (progress === undefined) {
@@ -0,0 +1,49 @@
1
+ import * as React from 'react';
2
+
3
+ class FakeSharedValue {
4
+ _listeners = new Map<number, (value: number) => void>();
5
+ _value: number;
6
+
7
+ constructor(value: number) {
8
+ this._value = value;
9
+ }
10
+
11
+ addListener(id: number, listener: (value: number) => void) {
12
+ this._listeners.set(id, listener);
13
+ }
14
+
15
+ removeListener(id: number) {
16
+ this._listeners.delete(id);
17
+ }
18
+
19
+ modify(modifier?: (value: number) => number) {
20
+ this.value = modifier !== undefined ? modifier(this.value) : this.value;
21
+ }
22
+
23
+ set value(value: number) {
24
+ this._value = value;
25
+
26
+ for (const listener of this._listeners.values()) {
27
+ listener(value);
28
+ }
29
+ }
30
+
31
+ get value() {
32
+ return this._value;
33
+ }
34
+
35
+ _isReanimatedSharedValue = true;
36
+ }
37
+
38
+ /**
39
+ * Compatibility layer for `useDrawerProgress` with `react-native-reanimated`
40
+ */
41
+ export function useFakeSharedValue(value: number): FakeSharedValue {
42
+ const sharedValue = React.useRef<FakeSharedValue | null>(null);
43
+
44
+ if (sharedValue.current === null) {
45
+ sharedValue.current = new FakeSharedValue(value);
46
+ }
47
+
48
+ return sharedValue.current;
49
+ }