Refactor dimension handling

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

src/screens/home.tsx

@@ -9,8 +9,8 @@ import {
   Searchbar,
 } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
-import { PaddedView } from '../components';
-import styles, { verticalScale } from '../styles';
+import { RootScrollView } from '../components';
+import styles from '../styles';
 import { SORT, SORT_DIRECTION } from '../types';
 import { getSortIcon, getViewIcon } from '../utilities';
 import {
@@ -23,10 +23,11 @@ import {
   setFilter,
 } from '../state';
 import { MEME_TYPE, memeTypePlural } from '../database';
+import { useDimensions } from '../contexts';
 
 const Home = () => {
   const theme = useTheme();
-
+  const dimensions = useDimensions();
   const sort = useSelector((state: RootState) => state.home.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.home.sortDirection,
@@ -63,7 +64,7 @@ const Home = () => {
   const [search, setSearch] = useState('');
 
   return (
-    <PaddedView>
+    <RootScrollView padded>
       <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
       <View style={[styles.flexRowSpaceBetween, styles.centeredVertical]}>
         <View style={[styles.flexRow, styles.centeredVertical]}>
@@ -96,13 +97,13 @@ const Home = () => {
           <IconButton
             icon={getViewIcon(view)}
             iconColor={theme.colors.primary}
-            size={verticalScale(16)}
+            size={dimensions.static.verticalScale(16)}
             onPress={() => dispatch(cycleView())}
           />
           <IconButton
             icon={favoritesOnly ? 'heart' : 'heart-outline'}
             iconColor={theme.colors.primary}
-            size={verticalScale(16)}
+            size={dimensions.static.verticalScale(16)}
             onPress={() => dispatch(toggleFavoritesOnly())}
           />
           <Menu
@@ -113,7 +114,7 @@ const Home = () => {
                 onPress={() => setFilterMenuVisible(true)}
                 icon={filter ? 'filter' : 'filter-outline'}
                 iconColor={theme.colors.primary}
-                size={verticalScale(16)}
+                size={dimensions.static.verticalScale(16)}
               />
             }>
             <Menu.Item
@@ -138,7 +139,7 @@ const Home = () => {
         </View>
       </View>
       <Divider />
-    </PaddedView>
+    </RootScrollView>
   );
 };