refactor: move drawer roundness to drawer navigator

react-navigation · Mar 11, 2024 · 6e84eea · 6e84eea
1 parent d0b5489
commit 6e84eea
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 34 deletions.
diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -42,6 +42,8 @@ type Props = DrawerNavigationConfig & {
   descriptors: DrawerDescriptorMap;
 };
 
+const DRAWER_BORDER_RADIUS = 16;
+
 function DrawerViewBase({
   state,
   navigation,
@@ -62,7 +64,7 @@ function DrawerViewBase({
     drawerPosition = direction === 'rtl' ? 'right' : 'left',
     drawerStatusBarAnimation,
     drawerStyle,
-    drawerType,
+    drawerType = Platform.select({ ios: 'slide', default: 'front' }),
     gestureHandlerProps,
     keyboardDismissMode,
     overlayColor = 'rgba(0, 0, 0, 0.5)',
@@ -298,6 +300,17 @@ function DrawerViewBase({
                   borderStartColor: colors.border,
                   borderStartWidth: StyleSheet.hairlineWidth,
                 }),
+
+          drawerType === 'front' &&
+            (drawerPosition === 'left'
+              ? {
+                  borderTopRightRadius: DRAWER_BORDER_RADIUS,
+                  borderBottomRightRadius: DRAWER_BORDER_RADIUS,
+                }
+              : {
+                  borderTopLeftRadius: DRAWER_BORDER_RADIUS,
+                  borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
+                }),
           drawerStyle,
         ]}
         overlayStyle={{ backgroundColor: overlayColor }}

diff --git a/packages/react-native-drawer-layout/src/views/Drawer.native.tsx b/packages/react-native-drawer-layout/src/views/Drawer.native.tsx
@@ -36,8 +36,6 @@ const SWIPE_MIN_OFFSET = 5;
 const SWIPE_MIN_DISTANCE = 60;
 const SWIPE_MIN_VELOCITY = 500;
 
-const DRAWER_BORDER_RADIUS = 16;
-
 const minmax = (value: number, start: number, end: number) => {
   'worklet';
 
@@ -48,7 +46,7 @@ export function Drawer({
   layout: customLayout,
   drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
   drawerStyle,
-  drawerType = Platform.select({ ios: 'slide', default: 'front' }),
+  drawerType = 'front',
   gestureHandlerProps,
   hideStatusBarOnOpen = false,
   keyboardDismissMode = 'on-drag',
@@ -153,19 +151,6 @@ export function Drawer({
       { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
     : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
 
-  const borderRadiiStyle =
-    drawerType !== 'permanent'
-      ? isRight
-        ? {
-            borderTopLeftRadius: DRAWER_BORDER_RADIUS,
-            borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
-          }
-        : {
-            borderTopRightRadius: DRAWER_BORDER_RADIUS,
-            borderBottomRightRadius: DRAWER_BORDER_RADIUS,
-          }
-      : null;
-
   const touchStartX = useSharedValue(0);
   const touchX = useSharedValue(0);
   const translationX = useSharedValue(getDrawerTranslationX(open));
@@ -427,7 +412,6 @@ export function Drawer({
                     drawerType === 'permanent' ? 'relative' : 'absolute',
                   zIndex: drawerType === 'back' ? -1 : 0,
                 },
-                borderRadiiStyle,
                 drawerAnimatedStyle,
                 drawerStyle,
               ]}

diff --git a/packages/react-native-drawer-layout/src/views/Drawer.tsx b/packages/react-native-drawer-layout/src/views/Drawer.tsx
@@ -8,8 +8,6 @@ import { getDrawerWidth } from '../utils/getDrawerWidth';
 import { useFakeSharedValue } from '../utils/useFakeSharedValue';
 import { Overlay } from './Overlay';
 
-const DRAWER_BORDER_RADIUS = 16;
-
 export function Drawer({
   layout: customLayout,
   drawerPosition = 'left',
@@ -58,19 +56,6 @@ export function Drawer({
   const isOpen = drawerType === 'permanent' ? true : open;
   const isRight = drawerPosition === 'right';
 
-  const borderRadiiStyle =
-    drawerType !== 'permanent'
-      ? isRight
-        ? {
-            borderTopLeftRadius: DRAWER_BORDER_RADIUS,
-            borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
-          }
-        : {
-            borderTopRightRadius: DRAWER_BORDER_RADIUS,
-            borderBottomRightRadius: DRAWER_BORDER_RADIUS,
-          }
-      : null;
-
   const drawerAnimatedStyle =
     drawerType !== 'permanent'
       ? {
@@ -151,7 +136,6 @@ export function Drawer({
                 position: drawerType === 'permanent' ? 'relative' : 'absolute',
                 zIndex: drawerType === 'back' ? -1 : 0,
               },
-              borderRadiiStyle,
               drawerAnimatedStyle,
               drawerStyle,
             ]}