From 5e6ae05905a9b9f716e5ce9f620b08ca9fffa803 Mon Sep 17 00:00:00 2001 From: CozumIntern <37351493+Melihomac@users.noreply.github.com> Date: Thu, 9 Nov 2023 21:49:56 +0300 Subject: [PATCH] Add BottomSheet component --- App.tsx | 1 + babel.config.js | 5 +- components/Library.tsx | 2 + components/bottomSheet/BottomSheet.tsx | 61 + package-lock.json | 193 +- package.json | 7 +- yarn.lock | 6754 ++++++++++++++++++++++++ 7 files changed, 7017 insertions(+), 6 deletions(-) create mode 100644 components/bottomSheet/BottomSheet.tsx create mode 100644 yarn.lock diff --git a/App.tsx b/App.tsx index a1b3f4e..67d100f 100644 --- a/App.tsx +++ b/App.tsx @@ -1,3 +1,4 @@ +import "react-native-gesture-handler"; import { StatusBar } from "expo-status-bar"; import React, { useState } from "react"; import { diff --git a/babel.config.js b/babel.config.js index 2900afe..17131ee 100644 --- a/babel.config.js +++ b/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"], }; }; diff --git a/components/Library.tsx b/components/Library.tsx index 123c6d6..c79ab54 100644 --- a/components/Library.tsx +++ b/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 = () => { + ); diff --git a/components/bottomSheet/BottomSheet.tsx b/components/bottomSheet/BottomSheet.tsx new file mode 100644 index 0000000..422e2ad --- /dev/null +++ b/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(null); + const snapPoints = useMemo(() => ["25%", "50%"], []); + const handlePresentModalPress = useCallback(() => { + bottomSheetModalRef.current?.present(); + }, []); + const handleSheetChanges = useCallback((index: number) => { + console.log("handleSheetChanges", index); + }, []); + return ( + + +