Fix on DraggableModal component

BearStudio · Nov 7, 2024 · 68774ef · 68774ef
1 parent 1cd6d82
commit 68774ef
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/example/app/components/DraggableModal.tsx b/example/app/components/DraggableModal.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { SafeAreaView } from 'react-native';
 import {
   Button,
-  Icon,
   DraggableModal,
   Text,
   useDisclosure,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-ficus-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React Native UI library forked from Magnus UI and inspired by Chakra UI",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/components/draggable-modal/draggable-modal.component.tsx b/src/components/draggable-modal/draggable-modal.component.tsx
@@ -88,8 +88,8 @@ const DraggableModal: React.FunctionComponent<DraggableModalProps> = (
       style={computedStyle.modal}
       {...rest}
     >
-      <BottomSheetView>
-        <Box bg={bg} h={h ?? '100%'} style={computedStyle.container}>
+      <BottomSheetView style={computedStyle.container}>
+        <Box h={h ?? '100%'}>
           <SafeAreaView style={computedStyle.safeView}>{children}</SafeAreaView>
         </Box>
       </BottomSheetView>

diff --git a/src/components/draggable-modal/draggable-modal.style.tsx b/src/components/draggable-modal/draggable-modal.style.tsx
@@ -5,6 +5,7 @@ import {
   createBorderWidthStyles,
   createBorderColorStyles,
   createBorderRadiusStyles,
+  getThemeColor,
 } from '../../theme/theme.service';
 import { DraggableModalProps } from './draggable-modal.type';
 
@@ -27,6 +28,7 @@ export const getStyle = (theme: ThemeType, props: DraggableModalProps) => {
     ...createSpacingStyles(props, theme.spacing),
     ...createBorderColorStyles(props, theme.colors),
     ...createBorderRadiusStyles(props, theme.borderRadius),
+    backgroundColor: getThemeColor(theme.colors, props.bg as string),
   };
 
   computedStyle.safeView = {

diff --git a/src/theme/theme.provider.tsx b/src/theme/theme.provider.tsx
@@ -32,14 +32,14 @@ export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = (
   return (
     // eslint-disable-next-line react-native/no-inline-styles
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <BottomSheetModalProvider>
-        <ThemeContext.Provider
-          value={{ theme: themeState, setTheme, windowWidth: width }}
-        >
+      <ThemeContext.Provider
+        value={{ theme: themeState, setTheme, windowWidth: width }}
+      >
+        <BottomSheetModalProvider>
           {children}
           <Toast {...themeState.toastProps} />
-        </ThemeContext.Provider>
-      </BottomSheetModalProvider>
+        </BottomSheetModalProvider>
+      </ThemeContext.Provider>
     </GestureHandlerRootView>
   );
 };