added SafeAreaViews

src/components/Actionbar/Actionbar.tsx

@@ -5,7 +5,7 @@ import {
   Pressable,
   StyleProp,
   StyleSheet,
-  ViewProps,
+  ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
@@ -20,7 +20,7 @@ type Action = {
 interface ActionbarProps {
   active: boolean;
   actions: Action[];
-  viewStyle?: StyleProp<ViewProps>;
+  viewStyle?: StyleProp<ViewStyle>;
 }
 
 export const Actionbar: React.FC<ActionbarProps> = ({

src/components/Common.tsx

@@ -1,27 +1,5 @@
-import { ThemeColors } from '@theme/types';
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const ScreenContainer = ({
-  children,
-}: {
-  children?: React.ReactNode;
-  theme: ThemeColors;
-}) => {
-  const { bottom } = useSafeAreaInsets();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        paddingBottom: bottom,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
 
 const Row = ({
   children,
@@ -31,7 +9,7 @@ const Row = ({
   style?: any;
 }) => <View style={[styles.row, style]}>{children}</View>;
 
-export { ScreenContainer, Row };
+export { Row };
 
 const styles = StyleSheet.create({
   row: {

src/components/SafeAreaView/SafeAreaView.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface SafeAreaViewProps {
+  children: React.ReactNode;
+  excludeTop?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SafeAreaView: React.FC<SafeAreaViewProps> = ({
+  children,
+  style,
+  excludeTop,
+}) => {
+  const { bottom, top, right, left } = useSafeAreaInsets();
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    padding: {
+      paddingBottom: bottom,
+      paddingTop: excludeTop ? 0 : top,
+      paddingRight: right,
+      paddingLeft: left,
+    },
+  });
+  return (
+    <View style={[styles.container, styles.padding, style]}>{children}</View>
+  );
+};
+
+export default memo(SafeAreaView);

src/components/SearchbarV2/SearchbarV2.tsx

@@ -1,6 +1,5 @@
 import React, { memo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, View, TextInput } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import IconButtonV2 from '../IconButtonV2/IconButtonV2';
 import { ThemeColors } from '../../theme/types';
@@ -49,10 +48,9 @@ const Searchbar: React.FC<SearcbarProps> = ({
   const focusSearchbar = () => searchbarRef.current.focus();
   const [extraMenu, showExtraMenu] = useState(false);
 
-  const { top, right, left } = useSafeAreaInsets();
-  const marginTop = top + 8;
-  const marginRight = right + 16;
-  const marginLeft = left + 16;
+  const marginTop = 8;
+  const marginRight = 16;
+  const marginLeft = 16;
 
   return (
     <View

src/components/index.ts

@@ -1,7 +1,6 @@
 export { default as IconButtonV2 } from './IconButtonV2/IconButtonV2';
 export { default as SearchbarV2 } from './SearchbarV2/SearchbarV2';
 export { default as LoadingScreenV2 } from './LoadingScreenV2/LoadingScreenV2';
-export { default as Container } from './Container/Container';
 export { default as ErrorScreenV2 } from './ErrorScreenV2/ErrorScreenV2';
 export { default as EmptyView } from './EmptyView/EmptyView';
 export { default as Chip } from './Chip/Chip';
@@ -14,3 +13,4 @@ export { default as LoadingMoreIndicator } from './LoadingMoreIndicator/LoadingM
 export { Checkbox } from './Checkbox/Checkbox';
 export { RadioButton } from './RadioButton/RadioButton';
 export { default as ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
+export { default as SafeAreaView } from './SafeAreaView/SafeAreaView';

src/screens/BrowseSourceScreen/BrowseSourceScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 
 import { FAB } from 'react-native-paper';
-import { Container, ErrorScreenV2, SearchbarV2 } from '@components/index';
+import { ErrorScreenV2, SafeAreaView, SearchbarV2 } from '@components/index';
 import NovelList from '@components/NovelList';
 import NovelCover from '@components/NovelCover';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
@@ -83,10 +83,10 @@ const BrowseSourceScreen = ({ route, navigation }: BrowseSourceScreenProps) => {
     [pluginId],
   );
 
-  const { bottom } = useSafeAreaInsets();
+  const { bottom, right } = useSafeAreaInsets();
   const filterSheetRef = useRef<BottomSheetModal | null>(null);
   return (
-    <Container>
+    <SafeAreaView>
       <SearchbarV2
         searchText={searchText}
         leftIcon="magnify"
@@ -177,7 +177,11 @@ const BrowseSourceScreen = ({ route, navigation }: BrowseSourceScreenProps) => {
             icon={'filter-variant'}
             style={[
               styles.filterFab,
-              { backgroundColor: theme.primary, marginBottom: bottom },
+              {
+                backgroundColor: theme.primary,
+                marginBottom: bottom + 16,
+                marginRight: right + 16,
+              },
             ]}
             label={getString('common.filter')}
             uppercase={false}
@@ -192,7 +196,7 @@ const BrowseSourceScreen = ({ route, navigation }: BrowseSourceScreenProps) => {
           />
         </>
       ) : null}
-    </Container>
+    </SafeAreaView>
   );
 };
 
@@ -203,6 +207,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     margin: 16,
     right: 0,
-    bottom: 16,
+    bottom: 0,
   },
 });

src/screens/Categories/CategoriesScreen.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { FAB } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 
-import { Appbar, EmptyView } from '@components/index';
+import { Appbar, EmptyView, SafeAreaView } from '@components/index';
 import AddCategoryModal from './components/AddCategoryModal';
 
 import {
@@ -26,7 +26,7 @@ const CategoriesScreen = () => {
 
   const [isLoading, setIsLoading] = useState(true);
   const [categories, setCategories] = useState<Category[]>();
-  const { bottom } = useSafeAreaInsets();
+  const { bottom, right } = useSafeAreaInsets();
 
   const {
     value: categoryModalVisible,
@@ -77,7 +77,7 @@ const CategoriesScreen = () => {
   };
 
   return (
-    <>
+    <SafeAreaView excludeTop>
       <Appbar
         title={getString('categories.header')}
         handleGoBack={goBack}
@@ -108,7 +108,7 @@ const CategoriesScreen = () => {
         />
       )}
       <FAB
-        style={[styles.fab, { backgroundColor: theme.primary, bottom: bottom }]}
+        style={[styles.fab, { backgroundColor: theme.primary, right, bottom }]}
         color={theme.onPrimary}
         label={getString('common.add')}
         uppercase={false}
@@ -121,7 +121,7 @@ const CategoriesScreen = () => {
         closeModal={closeCategoryModal}
         onSuccess={getCategories}
       />
-    </>
+    </SafeAreaView>
   );
 };
 

src/screens/StatsScreen/StatsScreen.tsx

@@ -5,7 +5,12 @@ import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '@hooks/persisted';
 import { getString } from '@strings/translations';
 
-import { Appbar, ErrorScreenV2, LoadingScreenV2 } from '@components';
+import {
+  Appbar,
+  ErrorScreenV2,
+  LoadingScreenV2,
+  SafeAreaView,
+} from '@components';
 
 import { LibraryStats } from '@database/types';
 import {
@@ -78,7 +83,7 @@ const StatsScreen = () => {
   }
 
   return (
-    <>
+    <SafeAreaView excludeTop>
       {Header}
       <ScrollView
         style={styles.screenCtn}
@@ -138,7 +143,7 @@ const StatsScreen = () => {
           ))}
         </Row>
       </ScrollView>
-    </>
+    </SafeAreaView>
   );
 };
 

src/screens/browse/BrowseScreen.tsx

@@ -6,7 +6,7 @@ import { useSearch } from '@hooks';
 import { usePlugins, useTheme } from '@hooks/persisted';
 import { getString } from '@strings/translations';
 
-import { EmptyView, SearchbarV2 } from '@components';
+import { EmptyView, SafeAreaView, SearchbarV2 } from '@components';
 import { BrowseScreenProps } from '@navigators/types';
 import { AvailableTab, InstalledTab } from './components/BrowseTabs';
 
@@ -21,20 +21,21 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
   const { languagesFilter } = usePlugins();
 
   const searchbarActions = useMemo(
-    () => [
-      {
-        iconName: 'book-search',
-        onPress: () => navigation.navigate('GlobalSearchScreen', {}),
-      },
-      {
-        iconName: 'swap-vertical-variant',
-        onPress: () => navigation.navigate('Migration'),
-      },
-      {
-        iconName: 'cog-outline',
-        onPress: () => navigation.navigate('BrowseSettings'),
-      },
-    ] as const,
+    () =>
+      [
+        {
+          iconName: 'book-search',
+          onPress: () => navigation.navigate('GlobalSearchScreen', {}),
+        },
+        {
+          iconName: 'swap-vertical-variant',
+          onPress: () => navigation.navigate('Migration'),
+        },
+        {
+          iconName: 'cog-outline',
+          onPress: () => navigation.navigate('BrowseSettings'),
+        },
+      ] as const,
     [navigation],
   );
 
@@ -52,7 +53,7 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
 
   const [index, setIndex] = React.useState(0);
   return (
-    <>
+    <SafeAreaView>
       <SearchbarV2
         searchText={searchText}
         placeholder={getString('browseScreen.searchbar')}
@@ -102,7 +103,7 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
         )}
         swipeEnabled={false}
       />
-    </>
+    </SafeAreaView>
   );
 };
 

src/screens/browse/discover/AniListTopNovels.tsx

@@ -10,7 +10,7 @@ import {
 import * as WebBrowser from 'expo-web-browser';
 
 import { ErrorView } from '@components/ErrorView/ErrorView';
-import { SearchbarV2 } from '@components';
+import { SafeAreaView, SearchbarV2 } from '@components';
 
 import { showToast } from '@utils/showToast';
 import TrackerNovelCard from './TrackerNovelCard';
@@ -178,7 +178,7 @@ const BrowseALScreen = ({ navigation }: BrowseALScreenProps) => {
   );
 
   return (
-    <View style={[styles.container]}>
+    <SafeAreaView>
       <SearchbarV2
         theme={theme}
         placeholder="Search AniList"
@@ -220,16 +220,13 @@ const BrowseALScreen = ({ navigation }: BrowseALScreenProps) => {
           }
         />
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 
 export default BrowseALScreen;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   contentContainer: {
     flex: 1,
   },