refactor: Use BottomSheetModal

App.js

@@ -18,6 +18,7 @@ import { persistor, store } from '@redux/store';
 import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
 
 import Main from './src/navigators/Main';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 Notifications.setNotificationHandler({
   handleNotification: async () => {
@@ -42,8 +43,10 @@ const App = () => {
           <PersistGate loading={null} persistor={persistor}>
             <SafeAreaProvider>
               <PaperProvider>
-                <StatusBar translucent={true} backgroundColor="transparent" />
-                <Main />
+                <BottomSheetModalProvider>
+                  <StatusBar translucent={true} backgroundColor="transparent" />
+                  <Main />
+                </BottomSheetModalProvider>
               </PaperProvider>
             </SafeAreaProvider>
           </PersistGate>

src/components/BottomSheet/BottomSheet.tsx

@@ -1,49 +1,41 @@
-import React, { ReactElement, Ref, useCallback } from 'react';
-import { overlay } from 'react-native-paper';
-import { default as BS, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import React, { Ref, useCallback } from 'react';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetModalProps,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ThemeColors } from '@theme/types';
-import { StyleSheet } from 'react-native';
 
-interface BottomSheetProps {
-  bottomSheetRef: Ref<BS>;
-  snapPoints: Array<number>;
-  height: number;
-  theme: ThemeColors;
-  children: ReactElement;
+interface BottomSheetProps extends Omit<BottomSheetModalProps, 'ref'> {
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
-const BottomSheet: React.FC<BottomSheetProps> = ({
-  bottomSheetRef,
-  snapPoints,
-  height,
-  theme,
-  children,
-}) => {
+const BottomSheet: React.FC<BottomSheetProps> = props => {
   const { bottom } = useSafeAreaInsets();
+
   const renderBackdrop = useCallback(
-    props => <BottomSheetBackdrop {...props} disappearsOnIndex={0} />,
+    (backdropProps: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
     [],
   );
+
   return (
-    <BS
-      index={-1}
+    <BottomSheetModal
+      ref={props.bottomSheetRef}
       backdropComponent={renderBackdrop}
-      snapPoints={[0.1].concat(snapPoints)}
-      enablePanDownToClose={true}
-      ref={bottomSheetRef}
-      handleStyle={styles.handle}
-      containerHeight={height + bottom}
+      handleComponent={null}
       containerStyle={{ paddingBottom: bottom }}
-      backgroundStyle={{ backgroundColor: overlay(2, theme.surface) }}
+      {...props}
     >
-      {children}
-    </BS>
+      {props.children}
+    </BottomSheetModal>
   );
 };
-const styles = StyleSheet.create({
-  handle: {
-    display: 'none',
-  },
-});
+
 export default BottomSheet;

src/screens/BrowseSourceScreen/BrowseSourceScreen.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
 
-import { FAB, Portal } from 'react-native-paper';
+import { FAB } from 'react-native-paper';
 import { Container, ErrorScreenV2, SearchbarV2 } from '@components/index';
 import NovelList from '@components/NovelList';
 import NovelCover from '@components/NovelCover';
-import Bottomsheet from '@gorhom/bottom-sheet';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import FilterBottomSheet from './components/FilterBottomSheet';
 
 import { useCategorySettings, useSearch } from '@hooks';
@@ -104,7 +104,7 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
   );
 
   const { bottom } = useSafeAreaInsets();
-  const filterSheetRef = useRef<Bottomsheet | null>(null);
+  const filterSheetRef = useRef<BottomSheetModal | null>(null);
   return (
     <Container>
       <SearchbarV2
@@ -188,16 +188,14 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
             label={'Filter'}
             uppercase={false}
             color={theme.onPrimary}
-            onPress={() => filterSheetRef?.current?.expand()}
+            onPress={() => filterSheetRef?.current?.present()}
+          />
+          <FilterBottomSheet
+            filterSheetRef={filterSheetRef}
+            filtersValues={filterValues}
+            setFilters={setFilters}
+            clearFilters={clearFilters}
           />
-          <Portal>
-            <FilterBottomSheet
-              filterSheetRef={filterSheetRef}
-              filtersValues={filterValues}
-              setFilters={setFilters}
-              clearFilters={clearFilters}
-            />
-          </Portal>
         </>
       ) : null}
     </Container>

src/screens/BrowseSourceScreen/components/FilterBottomSheet.tsx

@@ -2,7 +2,7 @@ import React, { Ref, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import BottomSheet from '../../../components/BottomSheet/BottomSheet';
-import BottomSheetType, { BottomSheetView } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '@hooks/useTheme';
 import {
@@ -113,7 +113,7 @@ const FilterItem: React.FC<FilterItemProps> = ({
 };
 
 interface BottomSheetProps {
-  filterSheetRef: Ref<BottomSheetType> | null;
+  filterSheetRef: Ref<BottomSheetModal> | null;
   filtersValues: SourceFilter[] | undefined;
   setFilters: (filters?: SelectedFilter) => void;
   clearFilters: () => void;
@@ -131,12 +131,7 @@ const FilterBottomSheet: React.FC<BottomSheetProps> = ({
   >();
 
   return (
-    <BottomSheet
-      bottomSheetRef={filterSheetRef}
-      snapPoints={[400, 600]}
-      height={600}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={filterSheetRef} snapPoints={[400, 600]}>
       <BottomSheetView
         style={[
           styles.container,

src/screens/library/LibraryScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import {
   NavigationState,
   SceneRendererProps,
@@ -83,7 +83,7 @@ const LibraryScreen = () => {
 
   const [index, setIndex] = useState(0);
 
-  const bottomSheetRef = useRef<BottomSheet | null>(null);
+  const bottomSheetRef = useRef<BottomSheetModal | null>(null);
 
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State },
@@ -176,7 +176,7 @@ const LibraryScreen = () => {
               }
             : {
                 iconName: 'filter-variant',
-                onPress: () => bottomSheetRef.current?.expand(),
+                onPress: () => bottomSheetRef.current?.present(),
               },
         ]}
         theme={theme}
@@ -275,8 +275,8 @@ const LibraryScreen = () => {
           refetchLibrary();
         }}
       />
+      <LibraryBottomSheet bottomSheetRef={bottomSheetRef} />
       <Portal>
-        <LibraryBottomSheet bottomSheetRef={bottomSheetRef} />
         <Actionbar
           active={selectedNovelIds.length > 0}
           actions={[

src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx

@@ -18,14 +18,11 @@ import {
 import { FlashList } from '@shopify/flash-list';
 import { RadioButton } from '@components/RadioButton/RadioButton';
 import { overlay } from 'react-native-paper';
-import {
-  default as BottomSheetType,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetModal } from '@gorhom/bottom-sheet';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 
 interface LibraryBottomSheetProps {
-  bottomSheetRef: Ref<BottomSheetType> | null;
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
 const FirstRoute = () => {
@@ -207,12 +204,7 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
   });
 
   return (
-    <BottomSheet
-      bottomSheetRef={bottomSheetRef}
-      snapPoints={[520]}
-      height={520}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[520]}>
       <BottomSheetView
         style={[
           styles.bottomSheetCtn,

src/screens/novel/NovelScreen.js

@@ -712,24 +712,24 @@ const Novel = ({ route, navigation }) => {
             theme={theme}
             dispatch={dispatch}
           />
-          <NovelBottomSheet
-            novelUrl={novelUrl}
-            bottomSheetRef={novelBottomSheetRef}
-            dispatch={dispatch}
-            sortAndFilterChapters={sortAndFilterChapters}
-            novelId={novel.novelId}
-            sort={sort}
-            theme={theme}
-            filter={filter}
-            showChapterTitles={showChapterTitles}
-          />
-          <TrackSheet
-            bottomSheetRef={trackerSheetRef}
-            novelId={novel.novelId}
-            novelName={novel.novelName}
-            theme={theme}
-          />
         </Portal>
+        <NovelBottomSheet
+          novelUrl={novelUrl}
+          bottomSheetRef={novelBottomSheetRef}
+          dispatch={dispatch}
+          sortAndFilterChapters={sortAndFilterChapters}
+          novelId={novel.novelId}
+          sort={sort}
+          theme={theme}
+          filter={filter}
+          showChapterTitles={showChapterTitles}
+        />
+        <TrackSheet
+          bottomSheetRef={trackerSheetRef}
+          novelId={novel.novelId}
+          novelName={novel.novelName}
+          theme={theme}
+        />
       </View>
     </Provider>
   );

src/screens/novel/components/Info/NovelInfoHeader.js

@@ -113,7 +113,7 @@ const NovelInfoHeader = ({
               deleteDownloadsSnackbar.setTrue();
             }
           }}
-          handleTrackerSheet={() => trackerSheetRef.current.expand()}
+          handleTrackerSheet={() => trackerSheetRef.current.present()}
           theme={theme}
         />
         <NovelSummary
@@ -125,7 +125,7 @@ const NovelInfoHeader = ({
         <ReadButton novel={novel} chapters={chapters} lastRead={lastRead} />
         <Pressable
           style={styles.bottomsheet}
-          onPress={() => novelBottomSheetRef.current.expand()}
+          onPress={() => novelBottomSheetRef.current.present()}
           android_ripple={{
             color: color(theme.primary).alpha(0.12).string(),
           }}

src/screens/novel/components/NovelBottomSheet.js

@@ -165,12 +165,7 @@ const ChaptersSettingsSheet = ({
   );
 
   return (
-    <BottomSheet
-      snapPoints={[240]}
-      bottomSheetRef={bottomSheetRef}
-      height={220}
-      theme={theme}
-    >
+    <BottomSheet snapPoints={[240]} bottomSheetRef={bottomSheetRef}>
       <BottomSheetView
         style={[
           styles.contentContainer,

src/screens/novel/components/Tracker/TrackSheet.js

@@ -105,12 +105,7 @@ const TrackSheet = ({ bottomSheetRef, novelId, novelName, theme }) => {
 
   return (
     <>
-      <BottomSheet
-        bottomSheetRef={bottomSheetRef}
-        snapPoints={[130]}
-        height={130}
-        theme={theme}
-      >
+      <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[130]}>
         <View
           style={[
             styles.contentContainer,

src/screens/reader/ReaderScreen.js

@@ -342,9 +342,7 @@ const ChapterContent = ({ route, navigation }) => {
           position?.percentage || Math.round(minScroll.current) || 0
         }
       />
-      <Portal>
-        <ReaderBottomSheetV2 bottomSheetRef={readerSheetRef} />
-      </Portal>
+      <ReaderBottomSheetV2 bottomSheetRef={readerSheetRef} />
       {!hidden && (
         <>
           <ReaderAppbar

src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx

@@ -8,10 +8,7 @@ import {
 import React, { Ref, useMemo, useState } from 'react';
 import color from 'color';
 
-import {
-  default as BottomSheetType,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetModal } from '@gorhom/bottom-sheet';
 
 import { defaultTo } from 'lodash-es';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
@@ -148,7 +145,7 @@ const GeneralTab: React.FC = () => {
   );
 };
 interface ReaderBottomSheetV2Props {
-  bottomSheetRef: Ref<BottomSheetType> | null;
+  bottomSheetRef: Ref<BottomSheetModal> | null;
 }
 
 const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({
@@ -203,12 +200,7 @@ const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({
   );
 
   return (
-    <BottomSheet
-      bottomSheetRef={bottomSheetRef}
-      snapPoints={[360, 560]}
-      height={560}
-      theme={theme}
-    >
+    <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[360, 560]}>
       <BottomSheetView
         style={[styles.bottomSheetContainer, { backgroundColor }]}
       >

src/screens/reader/components/ReaderFooter.js

@@ -89,7 +89,7 @@ const ChapterFooter = ({
         <Pressable
           android_ripple={rippleConfig}
           style={styles.buttonStyles}
-          onPress={() => readerSheetRef.current.snapToIndex(1)}
+          onPress={() => readerSheetRef.current.present()}
         >
           <IconButton
             icon="cog-outline"