Add BottomSheet component

App.tsx

@@ -1,3 +1,4 @@
+import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
 import React, { useState } from "react";
 import {

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
   };
 };

components/Library.tsx

@@ -16,6 +16,7 @@ import MainHeader from "./header/MainHeader";
 import MyBooks from "./myBooks/MyBooks";
 import NowReading from "./nowReading/NowReading";
 import BookReviews from "./bookReviews/BookReviews";
+import BottomSheet from "./bottomSheet/BottomSheet";
 
 interface Item {
   id: string;
@@ -93,6 +94,7 @@ const Library = () => {
         <NowReading />
         <View style={styles.stickStyle}></View>
         <BookReviews />
+        <BottomSheet />
       </SafeAreaView>
     </ScrollView>
   );

components/bottomSheet/BottomSheet.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Image,
+  Text,
+  Button,
+} from "react-native";
+import {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+} from "@gorhom/bottom-sheet";
+import { useCallback, useRef, useMemo } from "react";
+
+const BottomSheet = () => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["25%", "50%"], []);
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);
+  return (
+    <BottomSheetModalProvider>
+      <View style={styles.container}>
+        <Button
+          onPress={handlePresentModalPress}
+          title="Present Modal"
+          color="black"
+        />
+        <BottomSheetModal
+          ref={bottomSheetModalRef}
+          index={1}
+          snapPoints={snapPoints}
+          onChange={handleSheetChanges}
+        >
+          <View style={styles.contentContainer}>
+            <Text>Awesome 🎉</Text>
+          </View>
+        </BottomSheetModal>
+      </View>
+    </BottomSheetModalProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: "center",
+    backgroundColor: "grey",
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: "center",
+  },
+});
+
+export default BottomSheet;

package.json

@@ -9,19 +9,22 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.5.1",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/stack": "^6.3.20",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-gesture-handler": "^2.13.4",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "^4.7.4",
     "typescript": "^5.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "@types/react-native": "^0.72.6"
   },
   "private": true
 }