Refactor styles

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

src/screens/memes.tsx

@@ -3,6 +3,7 @@ import {
   BackHandler,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleSheet,
   View,
   useWindowDimensions,
 } from 'react-native';
@@ -16,13 +17,20 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import styles from '../styles';
 import { ROUTE, SORT_DIRECTION, memesSortQuery } from '../types';
 import { RootState, setNavVisible } from '../state';
 import { Meme } from '../database';
 import { HideableHeader, MemesHeader, MemesList } from '../components';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 
+const memesStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
+});
+
 const Memes = () => {
   const { colors } = useTheme();
   const { navigate } =
@@ -128,12 +136,7 @@ const Memes = () => {
   );
 
   return (
-    <View
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+    <>
       <HideableHeader visible={navVisisble}>
         <MemesHeader
           search={search}
@@ -146,19 +149,22 @@ const Memes = () => {
           }}
         />
       </HideableHeader>
-      <MemesList
-        memes={memes}
-        flashListRef={flashListRef}
-        flashListPadding={flashListPadding}
-        handleScroll={handleScroll}
-        focusMeme={(index: number) => {
-          navigate(ROUTE.MEME_VIEW, {
-            ids: memes.map(meme => meme.id.toHexString()),
-            index,
-          });
-        }}
-      />
-    </View>
+      <View
+        style={[memesStyles.listView, { backgroundColor: colors.background }]}>
+        <MemesList
+          memes={memes}
+          flashListRef={flashListRef}
+          flashListPadding={flashListPadding}
+          handleScroll={handleScroll}
+          focusMeme={(index: number) => {
+            navigate(ROUTE.MEME_VIEW, {
+              ids: memes.map(meme => meme.id.toHexString()),
+              index,
+            });
+          }}
+        />
+      </View>
+    </>
   );
 };