fix: custom modal style

apps/docs/pages/docs/Components/modal.en-US.mdx

@@ -7,9 +7,9 @@ import PropsTable from "@components/docs/props-table";
 
 # Modal
 
-Component to render a modal imported from `react-native-modal`
+Custom wrapper around the React Native [`Modal`](https://github.com/react-native-modal/react-native-modal).
+It provides default styles for background overlay and a content container.
 
-https://github.com/react-native-modal/react-native-modal
 
 ## Import
 
@@ -32,7 +32,7 @@ import { Modal } from "react-native-ficus-ui";
         Show Modal
       </Button>
 
-      <Modal visible={isOpen}>
+      <Modal visible={isOpen} height="50%" width="90%">
         <Button
           h={35}
           w={35}
@@ -56,10 +56,40 @@ render(<TestModal />)`} noInline />
 
 ## Props
 
-Extends every `Box` and `Modal` from React Native props.
+Extends every `Box` and `Modal` from React Native props and some custom props.
 
 ### `visible`
 <PropsTable
   description="Boolean to indicate if the modal is opened or not."
   prop={{ type: "boolean", required: true, default: "false" }}
 />
+
+### `width`
+<PropsTable
+description="Width of the content container. Accepts DimensionValue (number, string, or percentage)."
+prop={{ type: "DimensionValue", required: false, default: "'100%'" }}
+/>
+
+## `height`
+<PropsTable
+description="Height of the content container. Accepts DimensionValue (number, string, or percentage)."
+prop={{ type: "DimensionValue", required: false, default: "'100%'" }}
+/>
+
+## `backgroundColor`
+<PropsTable
+description="Background color of the content container."
+prop={{ type: "string", required: false, default: "'white'" }}
+/>
+
+## `backgroundViewStyle`
+<PropsTable
+description="Style object applied to the full-screen background overlay (default: semi-transparent black)."
+prop={{ type: "ViewStyle", required: false, default: "{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }" }}
+/>
+
+## `contentViewStyle`
+<PropsTable
+description="Style object applied to the modal content container."
+prop={{ type: "ViewStyle", required: false, default: "{ width: '100%', height: '100%', backgroundColor: 'white' }" }}
+/>

apps/examples/app/components/Modal.tsx

@@ -2,48 +2,51 @@ import {
   Button,
   Flex,
   Icon,
-  Modal,
   SafeAreaBox,
   Text,
   useColorModeValue,
   useDisclosure,
+  Modal,
 } from 'react-native-ficus-ui';
 
 import ExampleSection from '@/src/ExampleSection';
 
 const ModalComponent = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const modalBg = useColorModeValue('white', 'gray.800');
+
   return (
     <SafeAreaBox flex={1} bg={useColorModeValue("gray.100", "gray.800")}>
       <Text mx="xl" fontSize="4xl">
         Modal
       </Text>
       <ExampleSection name="Simple Modal">
-        <Button
-          onPress={() => {
-            onOpen();
-          }}
+        <Button onPress={onOpen}>Show Modal</Button>
+        <Modal
+          visible={isOpen}
+          onRequestClose={onClose}
+          backgroundColor={modalBg}
+          width="90%"
+          height={200}
+          backgroundViewStyle={{justifyContent: 'center'}}
+          contentViewStyle={{ borderRadius: 16, overflow: 'hidden', padding: 24 }}
         >
-          Show Modal
-        </Button>
-
-        <Modal visible={isOpen}>
-          <Flex _dark={{ bg: 'gray.800' }}>
+          <Flex>
             <Button
               h={35}
               w={35}
               position="absolute"
-              top={50}
-              right={15}
+              top={10}
+              right={10}
               px={0}
               borderRadius="full"
               colorScheme="gray"
-              onPress={() => {
-                onClose();
-              }}
+              onPress={onClose}
             >
-              <Icon color={useColorModeValue('white', 'gray.800')} name="close" />
+              <Icon color={useColorModeValue('gray.800', 'white')} name="close" />
             </Button>
+            <Text fontSize="xl" mb={2}>Hello from Modal!</Text>
+            <Text>This is a custom modal content.</Text>
           </Flex>
         </Modal>
       </ExampleSection>

packages/react-native-ficus-ui/src/components/modal/index.tsx

@@ -1,7 +1,50 @@
-import { ModalProps } from 'react-native';
+import { DimensionValue, ModalProps, View, ViewStyle } from 'react-native';
 
 import { type NativeFicusProps, ficus } from '../system';
 
-export interface ModalProp extends NativeFicusProps<'Modal'>, ModalProps {}
+export interface ModalProp extends NativeFicusProps<'Modal'>, ModalProps {
+  children?: React.ReactNode;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  backgroundColor?: string;
+  backgroundViewStyle?: ViewStyle;
+  contentViewStyle?: ViewStyle;
+}
 
-export const Modal = ficus('Modal');
+const FicusModal = ficus('Modal');
+
+export function Modal(props: ModalProp) {
+  const {
+    children,
+    width = '100%',
+    height = '100%',
+    backgroundColor = 'white',
+    backgroundViewStyle,
+    contentViewStyle,
+    ...rest
+  } = props;
+
+  const backgroundStyle: ViewStyle = {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    ...(backgroundViewStyle || {}),
+  };
+
+  const contentStyle: ViewStyle = {
+    width,
+    height,
+    backgroundColor,
+    ...(contentViewStyle || {}),
+  };
+
+  return (
+    <FicusModal transparent {...rest}>
+      <View style={backgroundStyle}>
+        <View style={contentStyle}>{children}</View>
+      </View>
+    </FicusModal>
+  );
+}