Refactor dimension handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/screens/settings.tsx

@@ -4,18 +4,19 @@ import { Button, List, Snackbar, Switch, Text } from 'react-native-paper';
 import { useRealm } from '@realm/react';
 import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
-import { PaddedView } from '../components';
+import { RootScrollView } from '../components';
 import styles from '../styles';
 import { Meme } from '../database';
 import { RootState, updateNoMedia, updateStorageUri } from '../state';
 import type {} from 'redux-thunk/extend-redux';
+import { useDimensions } from '../contexts';
 
 const SettingsScreen = () => {
-  const [optimizingDatabase, setOptimizingDatabase] = useState(false);
-
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
   const dispatch = useDispatch();
+  const dimensions = useDimensions();
 
+  const [optimizingDatabase, setOptimizingDatabase] = useState(false);
   const [snackbarVisible, setSnackbarVisible] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
 
@@ -45,13 +46,15 @@ const SettingsScreen = () => {
 
   return (
     <>
-      <PaddedView>
+      <RootScrollView padded>
         <View>
           <List.Section>
             <List.Subheader>Database</List.Subheader>
             <Button
               mode="elevated"
-              style={styles.marginBottom}
+              style={{
+                marginBottom: dimensions.responsive.verticalScale(15),
+              }}
               loading={optimizingDatabase}
               onPress={optimizeDatabase}>
               Optimize Database Now
@@ -61,7 +64,9 @@ const SettingsScreen = () => {
             <List.Subheader>Media Storage</List.Subheader>
             <Button
               mode="elevated"
-              style={styles.marginBottom}
+              style={{
+                marginBottom: dimensions.responsive.verticalScale(15),
+              }}
               onPress={async () => {
                 const { uri } = await openDocumentTree(true);
                 void dispatch(updateStorageUri(uri));
@@ -72,7 +77,9 @@ const SettingsScreen = () => {
               style={[
                 styles.flexRowSpaceBetween,
                 styles.smallPaddingHorizontal,
-                styles.marginBottom,
+                {
+                  marginBottom: dimensions.responsive.verticalScale(15),
+                },
               ]}>
               <Text>Hide media from gallery</Text>
               <Switch
@@ -84,7 +91,7 @@ const SettingsScreen = () => {
             </View>
           </List.Section>
         </View>
-      </PaddedView>
+      </RootScrollView>
       <Snackbar
         visible={snackbarVisible}
         onDismiss={() => setSnackbarVisible(false)}