Add bottom inset padding

App.js

@@ -12,6 +12,7 @@ import Main from './src/navigators/Main';
 
 import {createDB} from './src/database/DBHelper';
 import {fonts} from './src/theme/fonts';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
   const [loaded] = useFonts(fonts);
@@ -28,10 +29,12 @@ const App = () => {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <PaperProvider>
-          <StatusBar translucent={true} backgroundColor="transparent" />
-          <Main />
-        </PaperProvider>
+        <SafeAreaProvider>
+          <PaperProvider>
+            <StatusBar translucent={true} backgroundColor="transparent" />
+            <Main />
+          </PaperProvider>
+        </SafeAreaProvider>
       </PersistGate>
     </Provider>
   );

src/components/Common.js

@@ -1,17 +1,22 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
-const ScreenContainer = ({children, theme}) => (
-  <View
-    style={{
-      flex: 1,
-      backgroundColor: theme.colorPrimaryDark,
-      paddingBottom: 16,
-    }}
-  >
-    {children}
-  </View>
-);
+const ScreenContainer = ({children, theme}) => {
+  const {bottom} = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme.colorPrimaryDark,
+        paddingBottom: bottom,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 const Row = ({children, style}) => (
   <View style={[styles.row, style]}>{children}</View>

src/screens/browse/SettingsBrowseScreen.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {FlatList, Pressable, StyleSheet, Text, View} from 'react-native';
 
 import {Switch} from 'react-native-paper';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {Appbar} from '../../components/Appbar';
@@ -18,6 +19,8 @@ const BrowseSettings = ({navigation}) => {
   const theme = useTheme();
   const dispatch = useDispatch();
 
+  const {bottom} = useSafeAreaInsets();
+
   const {filters = [], showMyAnimeList = true} = useSelector(
     state => state.sourceReducer,
   );
@@ -59,7 +62,7 @@ const BrowseSettings = ({navigation}) => {
     <View style={{flex: 1}}>
       <Appbar onBackAction={navigation.goBack} title="Browse" />
       <FlatList
-        contentContainerStyle={{paddingBottom: 32}}
+        contentContainerStyle={{paddingBottom: bottom}}
         data={languages}
         keyExtractor={item => item}
         renderItem={renderItem}

src/screens/library/components/LibraryBottomSheet.js

@@ -15,6 +15,7 @@ import {useSettings} from '../../../hooks/reduxHooks';
 import {setAppSettings} from '../../../redux/settings/settings.actions';
 import {Checkbox, SortItem} from '../../../components/Checkbox/Checkbox';
 import {RadioButton} from '../../../components/RadioButton/RadioButton';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const LibrarySheet = ({
   bottomSheetRef,
@@ -26,6 +27,10 @@ const LibrarySheet = ({
 }) => {
   const [animatedValue] = useState(new Animated.Value(0));
 
+  const {bottom} = useSafeAreaInsets();
+
+  const bottomSheetHeight = 460 + bottom;
+
   const FirstRoute = () => (
     <View style={{flex: 1}}>
       <Checkbox
@@ -222,8 +227,8 @@ const LibrarySheet = ({
     <Bottomsheet
       animatedValue={animatedValue}
       ref={bottomSheetRef}
-      draggableRange={{top: 480, bottom: 0}}
-      snappingPoints={[0, 480]}
+      draggableRange={{top: bottomSheetHeight, bottom: 0}}
+      snappingPoints={[0, bottomSheetHeight]}
     >
       <View
         style={[

src/screens/more/MoreScreen.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import {/* StyleSheet ,*/ View, Pressable, Text} from 'react-native';
+import {
+  /* StyleSheet ,*/ View,
+  Pressable,
+  Text,
+  ScrollView,
+} from 'react-native';
 import {Switch} from 'react-native-paper';
 import {useDispatch, useSelector} from 'react-redux';
 
@@ -27,120 +32,121 @@ const MoreScreen = ({navigation}) => {
   return (
     <ScreenContainer theme={theme}>
       <MoreHeader title="More" navigation={navigation} theme={theme} />
-      <List.Section>
-        <Pressable
-          android_ripple={{color: theme.rippleColor}}
-          style={{
-            paddingHorizontal: 16,
-            paddingVertical: 14,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}
-          onPress={enableDownloadedOnlyMode}
-        >
-          <View style={{flexDirection: 'row'}}>
-            <List.Icon theme={theme} icon="cloud-off-outline" />
-            <View style={{marginLeft: 16}}>
-              <Text
-                style={{
-                  color: theme.textColorPrimary,
-                  fontSize: 16,
-                }}
-              >
-                Downloaded only
-              </Text>
-              <Text style={{color: theme.textColorSecondary}}>
-                Filters all novels in your library
-              </Text>
+      <ScrollView style={{flex: 1}}>
+        <List.Section>
+          <Pressable
+            android_ripple={{color: theme.rippleColor}}
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 14,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+            onPress={enableDownloadedOnlyMode}
+          >
+            <View style={{flexDirection: 'row'}}>
+              <List.Icon theme={theme} icon="cloud-off-outline" />
+              <View style={{marginLeft: 16}}>
+                <Text
+                  style={{
+                    color: theme.textColorPrimary,
+                    fontSize: 16,
+                  }}
+                >
+                  Downloaded only
+                </Text>
+                <Text style={{color: theme.textColorSecondary}}>
+                  Filters all novels in your library
+                </Text>
+              </View>
             </View>
-          </View>
-          <Switch
-            value={downloadedOnlyMode}
-            onValueChange={enableDownloadedOnlyMode}
-            color={theme.colorAccent}
-            style={{marginRight: 8}}
-          />
-        </Pressable>
-        <Pressable
-          android_ripple={{color: theme.rippleColor}}
-          style={{
-            paddingHorizontal: 16,
-            paddingVertical: 14,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}
-          onPress={enableIncognitoMode}
-        >
-          <View style={{flexDirection: 'row'}}>
-            <List.Icon theme={theme} icon="incognito" />
-            <View style={{marginLeft: 16}}>
-              <Text
-                style={{
-                  color: theme.textColorPrimary,
-                  fontSize: 16,
-                }}
-              >
-                Incognito mode
-              </Text>
-              <Text style={{color: theme.textColorSecondary}}>
-                Pauses reading history
-              </Text>
+            <Switch
+              value={downloadedOnlyMode}
+              onValueChange={enableDownloadedOnlyMode}
+              color={theme.colorAccent}
+              style={{marginRight: 8}}
+            />
+          </Pressable>
+          <Pressable
+            android_ripple={{color: theme.rippleColor}}
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 14,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+            onPress={enableIncognitoMode}
+          >
+            <View style={{flexDirection: 'row'}}>
+              <List.Icon theme={theme} icon="incognito" />
+              <View style={{marginLeft: 16}}>
+                <Text
+                  style={{
+                    color: theme.textColorPrimary,
+                    fontSize: 16,
+                  }}
+                >
+                  Incognito mode
+                </Text>
+                <Text style={{color: theme.textColorSecondary}}>
+                  Pauses reading history
+                </Text>
+              </View>
             </View>
-          </View>
-          <Switch
-            value={incognitoMode}
-            onValueChange={enableIncognitoMode}
-            color={theme.colorAccent}
-            style={{marginRight: 8}}
+            <Switch
+              value={incognitoMode}
+              onValueChange={enableIncognitoMode}
+              color={theme.colorAccent}
+              style={{marginRight: 8}}
+            />
+          </Pressable>
+          <List.Divider theme={theme} />
+          <List.Item
+            title="Download queue"
+            description={
+              downloadQueue.length > 0 && downloadQueue.length + ' remaining'
+            }
+            icon="progress-download"
+            onPress={() =>
+              navigation.navigate('MoreStack', {
+                screen: 'DownloadQueue',
+              })
+            }
+            theme={theme}
           />
-        </Pressable>
-        <List.Divider theme={theme} />
-        <List.Item
-          title="Download queue"
-          description={
-            downloadQueue.length > 0 && downloadQueue.length + ' remaining'
-          }
-          icon="progress-download"
-          onPress={() =>
-            navigation.navigate('MoreStack', {
-              screen: 'DownloadQueue',
-            })
-          }
-          theme={theme}
-        />
-        <List.Item
-          title="Downloads"
-          icon="folder-download"
-          onPress={() =>
-            navigation.navigate('MoreStack', {
-              screen: 'Downloads',
-            })
-          }
-          theme={theme}
-        />
-        <List.Divider theme={theme} />
-        <List.Item
-          title="Settings"
-          icon="cog-outline"
-          onPress={() =>
-            navigation.navigate('MoreStack', {
-              screen: 'SettingsStack',
-            })
-          }
-          theme={theme}
-        />
-
-        <List.Item
-          title="About"
-          icon="information-outline"
-          onPress={() =>
-            navigation.navigate('MoreStack', {
-              screen: 'About',
-            })
-          }
-          theme={theme}
-        />
-      </List.Section>
+          <List.Item
+            title="Downloads"
+            icon="folder-download"
+            onPress={() =>
+              navigation.navigate('MoreStack', {
+                screen: 'Downloads',
+              })
+            }
+            theme={theme}
+          />
+          <List.Divider theme={theme} />
+          <List.Item
+            title="Settings"
+            icon="cog-outline"
+            onPress={() =>
+              navigation.navigate('MoreStack', {
+                screen: 'SettingsStack',
+              })
+            }
+            theme={theme}
+          />
+          <List.Item
+            title="About"
+            icon="information-outline"
+            onPress={() =>
+              navigation.navigate('MoreStack', {
+                screen: 'About',
+              })
+            }
+            theme={theme}
+          />
+        </List.Section>
+      </ScrollView>
     </ScreenContainer>
   );
 };

src/screens/novel/components/NovelBottomSheet.js

@@ -6,6 +6,7 @@ import {
   Animated,
   useWindowDimensions,
 } from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
 import Bottomsheet from 'rn-sliding-up-panel';
@@ -24,6 +25,10 @@ const ChaptersSettingsSheet = ({
   theme,
   showChapterTitles,
 }) => {
+  const {bottom} = useSafeAreaInsets();
+
+  const bottomSheetHeight = 220 + bottom;
+
   const sortChapters = val =>
     dispatch(sortAndFilterChapters(novelId, val, filter));
 
@@ -145,8 +150,8 @@ const ChaptersSettingsSheet = ({
     <Bottomsheet
       animatedValue={animatedValue}
       ref={bottomSheetRef}
-      draggableRange={{top: 220, bottom: 0}}
-      snappingPoints={[0, 220]}
+      draggableRange={{top: bottomSheetHeight, bottom: 0}}
+      snappingPoints={[0, bottomSheetHeight]}
       backdropOpacity={0.5}
     >
       <View

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

@@ -11,6 +11,7 @@ import SetTrackStatusDialog from './SetTrackStatusDialog';
 import SetTrackScoreDialog from './SetTrackScoreDialog';
 import SetTrackChaptersDialog from './SetTrackChaptersDialog';
 import {AddMalTrackingCard, MalTrackItemCard} from './MyAnimeListCards';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const TrackSheet = ({bottomSheetRef, novelId, novelName, theme}) => {
   const tracker = useSelector(state => state.trackerReducer.tracker);
@@ -19,6 +20,8 @@ const TrackSheet = ({bottomSheetRef, novelId, novelName, theme}) => {
   );
   const dispatch = useDispatch();
 
+  const {bottom} = useSafeAreaInsets();
+
   const [trackItem, setTrackItem] = useState();
 
   useEffect(() => {
@@ -103,12 +106,14 @@ const TrackSheet = ({bottomSheetRef, novelId, novelName, theme}) => {
     setTrackScoreDialog(false);
   };
 
+  const bottomSheetHeight = 120 + bottom;
+
   return (
     <>
       <Bottomsheet
         ref={bottomSheetRef}
-        draggableRange={{top: 140, bottom: 0}}
-        snappingPoints={[0, 140]}
+        draggableRange={{top: bottomSheetHeight, bottom: 0}}
+        snappingPoints={[0, bottomSheetHeight]}
         backdropOpacity={0.25}
       >
         <View

src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.js

@@ -18,6 +18,7 @@ import {
 } from '../../../../components/Common/ToggleButton';
 import {ReaderBottomSheetSwitch} from './components/ReaderBottomSheetSwitch';
 import {ReaderBottomSheetFontPicker} from './components/ReaderBottomSheetFontPicker';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const ReaderSheet = ({
   theme,
@@ -35,6 +36,8 @@ const ReaderSheet = ({
   fullScreenMode,
   verticalSeekbar,
 }) => {
+  const {bottom} = useSafeAreaInsets();
+
   const [animatedValue] = useState(new Animated.Value(0));
 
   const presetThemes = [
@@ -73,7 +76,7 @@ const ReaderSheet = ({
         ]}
       >
         <BottomSheetHandle theme={theme} />
-        <View style={{flex: 1, paddingVertical: 16, paddingTop: 24}}>
+        <View style={{flex: 1, paddingTop: 24, paddingBottom: bottom}}>
           <View
             style={{
               flexDirection: 'row',

src/screens/reader/components/ReaderSeekBar.js

@@ -3,6 +3,7 @@ import {Dimensions, View, Text, StyleSheet} from 'react-native';
 
 import Slider from '@react-native-community/slider';
 import {useDeviceOrientation} from '../../../services/utils/helpers';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const VerticalScrollbar = ({
   theme,
@@ -13,6 +14,8 @@ const VerticalScrollbar = ({
   scrollViewRef,
   verticalSeekbar,
 }) => {
+  const {bottom} = useSafeAreaInsets();
+
   const onSlidingComplete = value => {
     setLoading(true);
     scrollViewRef.current.scrollTo({
@@ -76,7 +79,7 @@ const VerticalScrollbar = ({
       <View
         style={[
           styles.horizontalSliderContainer,
-          {backgroundColor: `${theme.colorPrimary}E6`},
+          {backgroundColor: `${theme.colorPrimary}E6`, bottom: 80 + bottom},
         ]}
       >
         <Text
@@ -132,7 +135,6 @@ const styles = StyleSheet.create({
   horizontalSliderContainer: {
     position: 'absolute',
     zIndex: 2,
-    bottom: 100,
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center',