Version 1.3.0 (#37)

docs/next.config.mjs

@@ -77,6 +77,7 @@ export default withNextra({
     'react-native-vector-icons',
     'react-native-ficus-ui',
     'react-native-confirmation-code-field',
+    '@gorhom/bottom-sheet'
   ],
 
   webpack: (config) => {

example/app/components/Box.tsx

@@ -110,6 +110,81 @@ const BoxComponent = () => {
           </Box>
         </ExampleSection>
 
+        <ExampleSection name="boxShadow prop">
+          <Box flexDirection="row">
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 5 5 0 rgba(255, 0, 0, 0.5)"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 -5 teal"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="12 12 2 1 rgba(0, 0, 255, .2);"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="inset 5 5 gold"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="3 3 red, -3 0 5 olive"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="0 0 0 4 #f4aab9, 0 0 0 6 #66ccff"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 5 0 0 #289FED"
+              justifyContent="center"
+              alignItems="center"
+            />
+          </Box>
+        </ExampleSection>
+
         <ExampleSection name="border">
           <Box flexDirection="row">
             <Box

example/app/components/DraggableModal.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import {
+  Button,
+  Icon,
+  DraggableModal,
+  Text,
+  useDisclosure,
+} from 'react-native-ficus-ui';
+import ExampleSection from '@/src/ExampleSection';
+
+const DraggableModalComponent = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <SafeAreaView>
+      <Text mx="xl" fontSize="4xl">
+        DraggableModal
+      </Text>
+      <ExampleSection name="Simple Modal">
+        <Button
+          onPress={() => {
+            onOpen();
+          }}
+        >
+          Show Modal
+        </Button>
+
+        <DraggableModal
+          isOpen={isOpen}
+          onClose={onClose}
+          snapPoints={['20%', '80%']}
+          p="xl"
+        >
+          <Text fontSize="4xl" fontWeight="bold">
+            Settings
+          </Text>
+
+          <Text mt="xl">Your settings</Text>
+        </DraggableModal>
+      </ExampleSection>
+    </SafeAreaView>
+  );
+};
+
+export default DraggableModalComponent;

example/app/items.ts

@@ -22,6 +22,7 @@ import CheckboxComponent from './components/Checkbox';
 import RadioComponent from './components/Radio';
 import ToastHook from './components/Toast';
 import ModalComponent from './components/Modal';
+import DraggableModalComponent from './components/DraggableModal';
 import FlashListComponent from './components/FlashList';
 import SafeAreaBoxComponent from './components/SafeAreaBox';
 import DividerComponent from './components/Divider';
@@ -169,6 +170,11 @@ export const components: ExampleComponentType[] = [
     onScreenName: 'Modal',
     component: ModalComponent,
   },
+  {
+    navigationPath: 'DraggableModal',
+    onScreenName: 'DraggableModal',
+    component: DraggableModalComponent,
+  },
   {
     navigationPath: 'Slider',
     onScreenName: 'Slider',

example/package.json

@@ -16,50 +16,51 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/native": "^6.0.2",
-    "expo": "~51.0.28",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.9",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.23",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.10"
+    "@react-navigation/native": "7.0.0-rc.21",
+    "expo": "52.0.0-preview.7",
+    "expo-constants": "17.0.2",
+    "expo-font": "13.0.0",
+    "expo-linking": "7.0.2",
+    "expo-router": "4.0.0-preview.4",
+    "expo-splash-screen": "0.28.4",
+    "expo-status-bar": "2.0.0",
+    "expo-system-ui": "4.0.1",
+    "expo-web-browser": "14.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.0",
+    "react-native-reanimated": "3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.0.0-beta.14",
+    "react-native-web": "0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
+    "@types/react": "18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "babel-plugin-module-resolver": "^5.0.2",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "52.0.0-preview.1",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
   "private": true,
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "5.0.4",
+    "@react-native-community/slider": "4.5.4",
     "@shopify/flash-list": "1.5.0",
     "color": "4.2.3",
     "deepmerge": "4.2.2",
-    "@react-native-community/slider": "4.5.4",
     "react-native-animatable": "1.3.3",
+    "react-native-confirmation-code-field": "7.4.0",
+    "react-native-gesture-handler": "2.20.2",
     "react-native-modal": "13.0.1",
     "react-native-pager-view": "6.2.2",
     "react-native-reanimated": "3.5.4",
     "react-native-tab-view": "3.5.2",
     "react-native-toast-message": "2.1.6",
     "react-native-vector-icons": "10.0.0",
-    "react-native-confirmation-code-field": "7.4.0",
     "validate-color": "2.2.1"
   }
 }