bottom sheet MODAL

App.js

@@ -1,19 +1,87 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { useState, useRef } from 'react';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import Modal from "react-native-modal";
 
 export default function App() {
+  const [modalVisible, setModalVisible] = useState(false);
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <>
+    {/* SWIPEABLE MODAL START */}
+      {modalVisible &&
+        <Modal
+          testID={"modal"}
+          isVisible={true}
+          onSwipeComplete={() => setModalVisible(false)}
+          swipeDirection={["down"]}
+          scrollOffsetMax={1500 - 600} // content height - ScrollView height
+          propagateSwipe={true}
+          style={{ ...styles2.modal, position: "relative" }}
+        >
+          <View style={styles2.scrollableModal}>
+            <View style={styles2.scrollableModalContent}>
+              <View style={{ flex: 1, flexDirection: "column", alignItems: "center", }}>
+                <View>
+                  <Text>ABCDEFGH</Text>
+                  <Button title='CLOSE' onPress={() => setModalVisible(false)} />
+                </View>
+              </View>
+            </View>
+          </View>
+        </Modal>
+      }
+      {/* SWIPEABLE MODAL END */}
+      <View style={styles.container}>
+
+
+
+        <Button title='ABCD' onPress={() => setModalVisible(true)} />
+        <Button title='D' onPress={()=> {
+        }} />
+        <Text>Open up App.js to start working on your app!</Text>
+        <StatusBar style="auto" />
+      </View>
+    </>
   );
 }
 
+const styles2 = StyleSheet.create({
+  modal: {
+    justifyContent: "flex-end",
+    margin: 0,
+  },
+  scrollableModal: {
+    height: "50%",
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    overflow: "hidden",
+    position: "relative",
+  },
+  scrollableModalContent: {
+    paddingTop: 30,
+    paddingBottom: 200,
+    paddingHorizontal: 10,
+    minHeight: 800,
+    height: "auto",
+    backgroundColor: "pink",
+  },
+  header: {
+    fontFamily: "Ubuntu_500Medium",
+    fontSize: 25,
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  info: {
+    textAlign: "center",
+    fontSize: 18,
+    color: "gray"
+  }
+});
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: 'lightblue',
     alignItems: 'center',
     justifyContent: 'center',
   },