react-native-drawer-layout 4.0.0-alpha.9 → 4.0.0-rc.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.
Files changed (53) hide show
  1. package/lib/commonjs/index.js.map +1 -1
  2. package/lib/commonjs/types.js.map +1 -1
  3. package/lib/commonjs/utils/DrawerProgressContext.js +1 -1
  4. package/lib/commonjs/utils/DrawerProgressContext.js.map +1 -1
  5. package/lib/commonjs/utils/getDrawerWidth.js +7 -9
  6. package/lib/commonjs/utils/getDrawerWidth.js.map +1 -1
  7. package/lib/commonjs/utils/useDrawerProgress.js +1 -1
  8. package/lib/commonjs/utils/useDrawerProgress.js.map +1 -1
  9. package/lib/commonjs/utils/useFakeSharedValue.js +1 -1
  10. package/lib/commonjs/utils/useFakeSharedValue.js.map +1 -1
  11. package/lib/commonjs/views/Drawer.js +36 -21
  12. package/lib/commonjs/views/Drawer.js.map +1 -1
  13. package/lib/commonjs/views/Drawer.native.js +32 -32
  14. package/lib/commonjs/views/Drawer.native.js.map +1 -1
  15. package/lib/commonjs/views/GestureHandler.android.js.map +1 -1
  16. package/lib/commonjs/views/GestureHandler.ios.js.map +1 -1
  17. package/lib/commonjs/views/GestureHandler.js +6 -7
  18. package/lib/commonjs/views/GestureHandler.js.map +1 -1
  19. package/lib/commonjs/views/GestureHandlerNative.js.map +1 -1
  20. package/lib/commonjs/views/Overlay.js +9 -10
  21. package/lib/commonjs/views/Overlay.js.map +1 -1
  22. package/lib/commonjs/views/Overlay.native.js +9 -10
  23. package/lib/commonjs/views/Overlay.native.js.map +1 -1
  24. package/lib/module/index.js.map +1 -1
  25. package/lib/module/types.js.map +1 -1
  26. package/lib/module/utils/DrawerProgressContext.js.map +1 -1
  27. package/lib/module/utils/getDrawerWidth.js +7 -9
  28. package/lib/module/utils/getDrawerWidth.js.map +1 -1
  29. package/lib/module/utils/useDrawerProgress.js.map +1 -1
  30. package/lib/module/utils/useFakeSharedValue.js.map +1 -1
  31. package/lib/module/views/Drawer.js +34 -19
  32. package/lib/module/views/Drawer.js.map +1 -1
  33. package/lib/module/views/Drawer.native.js +30 -30
  34. package/lib/module/views/Drawer.native.js.map +1 -1
  35. package/lib/module/views/GestureHandler.android.js.map +1 -1
  36. package/lib/module/views/GestureHandler.ios.js.map +1 -1
  37. package/lib/module/views/GestureHandler.js +6 -6
  38. package/lib/module/views/GestureHandler.js.map +1 -1
  39. package/lib/module/views/GestureHandlerNative.js.map +1 -1
  40. package/lib/module/views/Overlay.js +8 -9
  41. package/lib/module/views/Overlay.js.map +1 -1
  42. package/lib/module/views/Overlay.native.js +8 -9
  43. package/lib/module/views/Overlay.native.js.map +1 -1
  44. package/lib/typescript/src/types.d.ts +5 -0
  45. package/lib/typescript/src/types.d.ts.map +1 -1
  46. package/lib/typescript/src/views/Drawer.d.ts +1 -1
  47. package/lib/typescript/src/views/Drawer.d.ts.map +1 -1
  48. package/lib/typescript/src/views/Drawer.native.d.ts +1 -1
  49. package/lib/typescript/src/views/Drawer.native.d.ts.map +1 -1
  50. package/package.json +5 -6
  51. package/src/types.tsx +6 -0
  52. package/src/views/Drawer.native.tsx +14 -4
  53. package/src/views/Drawer.tsx +26 -15
package/src/views/Drawer.native.tsx CHANGED
@@ -43,7 +43,8 @@ const minmax = (value: number, start: number, end: number) => {
43
43
 
44
44
  export function Drawer({
45
45
  layout: customLayout,
46
- drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
46
+ direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
47
+ drawerPosition = direction === 'rtl' ? 'right' : 'left',
47
48
  drawerStyle,
48
49
  drawerType = 'front',
49
50
  configureGestureHandler,
@@ -317,7 +318,13 @@ export function Drawer({
317
318
  translateX:
318
319
  // The drawer stays in place when `drawerType` is `back`
319
320
  (drawerType === 'back' ? 0 : translateX.value) +
320
- (drawerPosition === 'left' ? 0 : distanceFromEdge),
321
+ (direction === 'rtl'
322
+ ? drawerPosition === 'left'
323
+ ? -distanceFromEdge
324
+ : 0
325
+ : drawerPosition === 'left'
326
+ ? 0
327
+ : distanceFromEdge),
321
328
  },
322
329
  ],
323
330
  };
@@ -363,8 +370,11 @@ export function Drawer({
363
370
  styles.main,
364
371
  {
365
372
  flexDirection:
366
- drawerType === 'permanent' && !isRight
367
- ? 'row-reverse'
373
+ drawerType === 'permanent'
374
+ ? (isRight && direction === 'ltr') ||
375
+ (!isRight && direction === 'rtl')
376
+ ? 'row'
377
+ : 'row-reverse'
368
378
  : 'row',
369
379
  },
370
380
  ]}
package/src/views/Drawer.tsx CHANGED
@@ -10,7 +10,8 @@ import { Overlay } from './Overlay';
10
10
 
11
11
  export function Drawer({
12
12
  layout: customLayout,
13
- drawerPosition = 'left',
13
+ direction = 'ltr',
14
+ drawerPosition = direction === 'rtl' ? 'right' : 'left',
14
15
  drawerStyle,
15
16
  drawerType = 'front',
16
17
  onClose,
@@ -56,23 +57,28 @@ export function Drawer({
56
57
  const isOpen = drawerType === 'permanent' ? true : open;
57
58
  const isRight = drawerPosition === 'right';
58
59
 
60
+ let translateX = 0;
61
+
62
+ // The drawer stays in place at open position when `drawerType` is `back`
63
+ if (open || drawerType === 'back') {
64
+ if (direction === 'rtl') {
65
+ translateX = drawerPosition === 'left' ? drawerWidth - layout.width : 0;
66
+ } else {
67
+ translateX = drawerPosition === 'left' ? 0 : layout.width - drawerWidth;
68
+ }
69
+ } else {
70
+ if (direction === 'rtl') {
71
+ translateX = drawerPosition === 'left' ? -layout.width : drawerWidth;
72
+ } else {
73
+ translateX = drawerPosition === 'left' ? -drawerWidth : layout.width;
74
+ }
75
+ }
76
+
59
77
  const drawerAnimatedStyle =
60
78
  drawerType !== 'permanent'
61
79
  ? {
62
80
  transition: 'transform 0.3s',
63
- transform: [
64
- {
65
- // The drawer stays in place at open position when `drawerType` is `back`
66
- translateX:
67
- open || drawerType === 'back'
68
- ? drawerPosition === 'left'
69
- ? 0
70
- : layout.width - drawerWidth
71
- : drawerPosition === 'left'
72
- ? -drawerWidth
73
- : layout.width,
74
- },
75
- ],
81
+ transform: [{ translateX }],
76
82
  }
77
83
  : null;
78
84
 
@@ -101,7 +107,12 @@ export function Drawer({
101
107
  styles.main,
102
108
  {
103
109
  flexDirection:
104
- drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',
110
+ drawerType === 'permanent'
111
+ ? (isRight && direction === 'ltr') ||
112
+ (!isRight && direction === 'rtl')
113
+ ? 'row'
114
+ : 'row-reverse'
115
+ : 'row',
105
116
  },
106
117
  ]}
107
118
  >