From 68774ef3e67e40a4decae7593feb8c91b816a9a5 Mon Sep 17 00:00:00 2001
From: Nicolas Torion <nicolas.torion@bearstudio.fr>
Date: Thu, 7 Nov 2024 09:59:03 +0100
Subject: [PATCH] Fix on DraggableModal component

---
 example/app/components/DraggableModal.tsx            |  1 -
 package.json                                         |  2 +-
 .../draggable-modal/draggable-modal.component.tsx    |  4 ++--
 .../draggable-modal/draggable-modal.style.tsx        |  2 ++
 src/theme/theme.provider.tsx                         | 12 ++++++------
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/example/app/components/DraggableModal.tsx b/example/app/components/DraggableModal.tsx
index 6dbd1c10..83ce5535 100644
--- 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
index b4c326d0..0da318d8 100644
--- 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
index 2676fa96..aead356a 100644
--- 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
index 148863b0..f2d0996c 100644
--- 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
index 6fc029e2..d86d0c91 100644
--- 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>
   );
 };