Refactor styles

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-26 10:14:01 +03:00
parent caa98736e9
commit abe1c0847d
22 changed files with 261 additions and 328 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { AppState, StatusBar, useColorScheme } from 'react-native';
+import { AppState, StatusBar, useColorScheme, StyleSheet } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
@@ -13,7 +13,12 @@ import NavigationContainer from './navigation';
 import { store, persistor, validateSettings } from './state';
 import { LoadingView } from './components';
 import { Welcome } from './screens';
-import styles from './styles';
+
+const appStyles = StyleSheet.create({
+  gestureHandler: {
+    flex: 1,
+  },
+});

 const App = () => {
  const [showWelcome, setShowWelcome] = useState(false);
@@ -49,7 +54,7 @@ const App = () => {
          persistor={persistor}
          onBeforeLift={onBeforeLift}>
          <RealmProvider schema={[Meme, Tag]}>
-            <GestureHandlerRootView style={styles.flex}>
+            <GestureHandlerRootView style={appStyles.gestureHandler}>
              <SafeAreaProvider>
                <StatusBar
                  barStyle={isDarkMode ? 'light-content' : 'dark-content'}
--- a/src/components/hideableHeader.tsx
+++ b/src/components/hideableHeader.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';

 const hideableHeaderStyles = StyleSheet.create({
  headerView: {
@@ -11,6 +10,13 @@ const hideableHeaderStyles = StyleSheet.create({
    left: 0,
    right: 0,
    zIndex: 1,
+    paddingHorizontal: '4%',
+  },
+  headerViewPortrait: {
+    paddingTop: '4%',
+  },
+  headerViewLandscape: {
+    paddingTop: '2%',
  },
 });

@@ -38,8 +44,9 @@ const HideableHeader = ({
    <Animated.View
      style={[
        hideableHeaderStyles.headerView,
-        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
-        styles.paddingHorizontal,
+        orientation === 'portrait'
+          ? hideableHeaderStyles.headerViewPortrait
+          : hideableHeaderStyles.headerViewLandscape,
        {
          transform: [
            {
--- a/src/components/loadingView.tsx
+++ b/src/components/loadingView.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTheme } from 'react-native-paper';
-import styles from '../styles';
+
+const loadingViewStyles = StyleSheet.create({
+  view: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+});

 const LoadingView = () => {
  const { colors } = useTheme();

  return (
    <View
-      style={[
-        styles.center,
-        styles.flex,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+      style={[loadingViewStyles.view, { backgroundColor: colors.background }]}>
      <ActivityIndicator size="large" color={colors.primary} />
    </View>
  );
--- a/src/components/memes/memeTagSearchModal.tsx
+++ b/src/components/memes/memeTagSearchModal.tsx
@@ -7,7 +7,6 @@ import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { TAG_SORT, tagSortQuery } from '../../types';
 import { TagChip } from '../tags';
 import { Tag } from '../../database';
-import styles from '../../styles';
 import { validateTagName } from '../../utilities';

 const memeTagSearchModalStyles = StyleSheet.create({
@@ -17,6 +16,7 @@ const memeTagSearchModalStyles = StyleSheet.create({
    padding: 10,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
+    width: '100%',
  },
  searchbar: {
    marginBottom: 12,
@@ -97,11 +97,10 @@ const MemeTagSearchModal = ({
      <Modal
        visible={visible}
        contentContainerStyle={[
+          memeTagSearchModalStyles.modal,
          {
            backgroundColor: colors.surface,
          },
-          styles.fullWidth,
-          memeTagSearchModalStyles.modal,
        ]}
        onDismiss={() => setVisible(false)}>
        <Searchbar
--- a/src/components/memes/memeViewItem.tsx
+++ b/src/components/memes/memeViewItem.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
 import { ImageZoom } from '@likashefqet/react-native-image-zoom';
-import { Meme } from '../../database';
-import { View } from 'react-native';
-import styles from '../../styles';
-import LoadingView from '../loadingView';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import LoadingView from '../loadingView';
+import { Meme } from '../../database';
+
+const memeViewItemStyles = StyleSheet.create({
+  view: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

 const MemeViewItem = ({ meme }: { meme: Meme }) => {
  const { height, width } = useSafeAreaFrame();
@@ -15,7 +21,7 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
  if (loading || error || !dimensions) return <LoadingView />;

  return (
-    <View style={[{ width, height }, styles.center]}>
+    <View style={[{ width, height }, memeViewItemStyles.view]}>
      <ImageZoom
        source={{ uri: meme.uri }}
        style={
--- a/src/components/memes/memesHeader.tsx
+++ b/src/components/memes/memesHeader.tsx
@@ -19,14 +19,23 @@ import {
  toggleMemesFavoritesOnly,
  toggleMemesSortDirection,
 } from '../../state';
-import styles from '../../styles';
 import { MEME_SORT, SORT_DIRECTION } from '../../types';
 import { getSortIcon, getViewIcon } from '../../utilities';

 const memesHeaderStyles = StyleSheet.create({
  buttonView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
    height: 50,
  },
+  buttonSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });

 const MemesHeader = ({
@@ -78,13 +87,8 @@ const MemesHeader = ({
        value={search}
        onChangeText={setSearch}
      />
-      <View
-        style={[
-          styles.flexRowSpaceBetween,
-          styles.alignCenter,
-          memesHeaderStyles.buttonView,
-        ]}>
-        <View style={[styles.flexRow, styles.alignCenter]}>
+      <View style={memesHeaderStyles.buttonView}>
+        <View style={memesHeaderStyles.buttonSection}>
          <Menu
            visible={sortMenuVisible}
            onDismiss={() => setSortMenuVisible(false)}
@@ -92,7 +96,7 @@ const MemesHeader = ({
              <Button
                onPress={() => setSortMenuVisible(true)}
                icon={getSortIcon(sort, sortDirection)}
-                contentStyle={styles.flexRowReverse}
+                contentStyle={memesHeaderStyles.sortButton}
                compact>
                Sort By: {sort}
              </Button>
@@ -112,7 +116,7 @@ const MemesHeader = ({
            })}
          </Menu>
        </View>
-        <View style={[styles.flexRow, styles.alignCenter]}>
+        <View style={memesHeaderStyles.buttonSection}>
          <IconButton
            icon={getViewIcon(view)}
            iconColor={colors.primary}
--- a/src/components/memes/memesList/memesList.tsx
+++ b/src/components/memes/memesList/memesList.tsx
@@ -12,7 +12,6 @@ import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { VIEW } from '../../../types';
 import { getFlashListItemHeight } from '../../../utilities';
-import styles from '../../../styles';
 import MemesMasonryItem from './memesMasonryItem';
 import MemesGridItem from './memesGridItem';
 import MemesListItem from './memesListItem';
@@ -22,6 +21,7 @@ const sharedMemesListStyles = StyleSheet.create({
    paddingBottom: 100,
  },
  helperText: {
+    textAlign: 'center',
    marginVertical: 15,
  },
 });
@@ -89,9 +89,7 @@ const MemesList = ({
            ...memesMasonryListStyles.flashList,
          }}
          ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
              No memes found
            </HelperText>
          )}
@@ -119,9 +117,7 @@ const MemesList = ({
            ...memesGridListStyles.flashList,
          }}
          ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
              No memes found
            </HelperText>
          )}
@@ -149,9 +145,7 @@ const MemesList = ({
            ...memesListListStyles.flashList,
          }}
          ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
              No memes found
            </HelperText>
          )}
--- a/src/components/memes/memesList/memesListItem.tsx
+++ b/src/components/memes/memesList/memesListItem.tsx
@@ -4,10 +4,10 @@ import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
 import { Meme } from '../../../database';
-import styles from '../../../styles';

 const memesListItemStyles = StyleSheet.create({
  view: {
+    flexDirection: 'row',
    paddingVertical: 10,
  },
  image: {
@@ -16,12 +16,17 @@ const memesListItemStyles = StyleSheet.create({
    borderRadius: 5,
  },
  detailsView: {
+    flexDirection: 'column',
    marginLeft: 10,
  },
  text: {
    marginRight: 5,
    marginBottom: 5,
  },
+  tagsView: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
 });

 const MemesListItem = ({
@@ -42,13 +47,12 @@ const MemesListItem = ({
  return (
    <TouchableRipple
      onPress={() => focusMeme(index)}
-      style={[memesListItemStyles.view, styles.flexRow]}>
+      style={memesListItemStyles.view}>
      <>
        <Image source={{ uri: meme.uri }} style={memesListItemStyles.image} />
        <View
          style={[
            memesListItemStyles.detailsView,
-            styles.flexColumn,
            {
              width: width * 0.92 - 75 - 10,
            },
@@ -56,13 +60,11 @@ const MemesListItem = ({
          <Text variant="titleMedium" style={memesListItemStyles.text}>
            {meme.title}
          </Text>
-          <View style={styles.flexRow}>
-            <Text variant="labelSmall" style={memesListItemStyles.text}>
-              {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
-              KB
-            </Text>
-          </View>
-          <View style={[styles.flexRow, styles.flexWrap]}>
+          <Text variant="labelSmall" style={memesListItemStyles.text}>
+            {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
+            KB
+          </Text>
+          <View style={memesListItemStyles.tagsView}>
            {meme.tags.map(tag => (
              <Text
                variant="labelMedium"
--- a/src/components/tags/tagPreview.tsx
+++ b/src/components/tags/tagPreview.tsx
@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Chip, useTheme } from 'react-native-paper';
-import styles from '../../styles';
 import { getContrastColor } from '../../utilities';

 const tagPreviewStyles = StyleSheet.create({
  view: {
+    flexDirection: 'row',
+    justifyContent: 'center',
    margin: '10%',
  },
  chip: {
@@ -33,7 +34,7 @@ const TagPreview = ({ name, color }: { name: string; color: string }) => {
  const contrastColor = getContrastColor(color);

  return (
-    <View style={[styles.justifyCenter, styles.flexRow, tagPreviewStyles.view]}>
+    <View style={tagPreviewStyles.view}>
      <Chip
        icon={() => {
          return <FontAwesome5 name="tag" size={14} color={contrastColor} />;
--- a/src/components/tags/tagsHeader.tsx
+++ b/src/components/tags/tagsHeader.tsx
@@ -1,7 +1,6 @@
 import React, { ComponentProps, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button, Divider, Menu, Searchbar } from 'react-native-paper';
-import styles from '../../styles';
 import { useDispatch, useSelector } from 'react-redux';
 import {
  RootState,
@@ -14,8 +13,13 @@ import { getSortIcon } from '../../utilities';

 const tagsHeaderStyles = StyleSheet.create({
  buttonView: {
+    alignItems: 'center',
+    flexDirection: 'row',
    height: 50,
  },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });

 const TagsHeader = ({
@@ -57,12 +61,7 @@ const TagsHeader = ({
          setSearch(value);
        }}
      />
-      <View
-        style={[
-          styles.flexRow,
-          styles.alignCenter,
-          tagsHeaderStyles.buttonView,
-        ]}>
+      <View style={tagsHeaderStyles.buttonView}>
        <Menu
          visible={sortMenuVisible}
          onDismiss={() => setSortMenuVisible(false)}
@@ -70,7 +69,7 @@ const TagsHeader = ({
            <Button
              onPress={() => setSortMenuVisible(true)}
              icon={getSortIcon(sort, sortDirection)}
-              contentStyle={styles.flexRowReverse}
+              contentStyle={tagsHeaderStyles.sortButton}
              compact>
              Sort By: {sort}
            </Button>
--- a/src/screens/editors/addMeme.tsx
+++ b/src/screens/editors/addMeme.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useRealm } from '@realm/react';
 import { BSON } from 'realm';
@@ -13,23 +13,16 @@ import {
  DocumentPickerResponse,
  pickSingle,
 } from 'react-native-document-picker';
-import styles from '../styles';
-import { ROUTE, RootStackParamList } from '../types';
-import { Meme, Tag } from '../database';
-import { RootState } from '../state';
-import { allowedMimeTypes, getMemeType, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
-
-const addMemeStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
+import { ROUTE, RootStackParamList } from '../../types';
+import { Meme, Tag } from '../../database';
+import { RootState } from '../../state';
+import {
+  allowedMimeTypes,
+  getMemeType,
+  validateMemeTitle,
+} from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';

 const AddMeme = ({
  route,
@@ -104,15 +97,13 @@ const AddMeme = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
+          editorStyles.scrollView,
          orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
          { backgroundColor: colors.background },
        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
          <MemeEditor
            memeUri={memeUri}
            memeTitle={memeTitle}
@@ -121,7 +112,7 @@ const AddMeme = ({
            setMemeTags={setMemeTags}
          />
        </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
+        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained-tonal"
            icon="plus"
@@ -139,7 +130,7 @@ const AddMeme = ({
            }}
            disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
            loading={isSavingAndAddingAnother}
-            style={addMemeStyles.saveAndAddButton}>
+            style={editorStyles.saveAndAddButton}>
            Save & Add
          </Button>
          <Button
@@ -153,7 +144,7 @@ const AddMeme = ({
            }}
            disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
            loading={isSaving}
-            style={addMemeStyles.saveButton}>
+            style={editorStyles.saveButton}>
            Save
          </Button>
        </View>
--- a/src/screens/editors/addTag.tsx
+++ b/src/screens/editors/addTag.tsx
@@ -1,28 +1,17 @@
 import React, { useCallback, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import {
  generateRandomColor,
  validateColor,
  validateTagName,
-} from '../utilities';
-import { Tag } from '../database';
-import { TagEditor } from '../components';
-
-const addTagStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
+} from '../../utilities';
+import { Tag } from '../../database';
+import { TagEditor } from '../../components';
+import editorStyles from './editorStyles';

 const AddTag = () => {
  const { goBack } = useNavigation();
@@ -57,15 +46,13 @@ const AddTag = () => {
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
+          editorStyles.scrollView,
          orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
          { backgroundColor: colors.background },
        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
          <TagEditor
            tagName={tagName}
            setTagName={setTagName}
@@ -73,7 +60,7 @@ const AddTag = () => {
            setTagColor={setTagColor}
          />
        </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
+        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained-tonal"
            icon="plus"
@@ -86,7 +73,7 @@ const AddTag = () => {
            }}
            disabled={!tagName.valid || isSavingAndAddingAnother}
            loading={isSavingAndAddingAnother}
-            style={addTagStyles.saveAndAddButton}>
+            style={editorStyles.saveAndAddButton}>
            Save & Add
          </Button>
          <Button
@@ -97,7 +84,7 @@ const AddTag = () => {
              goBack();
            }}
            disabled={!tagName.valid || isSavingAndAddingAnother}
-            style={addTagStyles.saveButton}>
+            style={editorStyles.saveButton}>
            Save
          </Button>
        </View>
--- a/src/screens/editors/editMeme.tsx
+++ b/src/screens/editors/editMeme.tsx
@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { BSON } from 'realm';
-import styles from '../styles';
-import { RootStackParamList, ROUTE } from '../types';
-import { Tag, Meme } from '../database';
-import { deleteMeme, favoriteMeme, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
+import { RootStackParamList, ROUTE } from '../../types';
+import { Tag, Meme } from '../../database';
+import { deleteMeme, favoriteMeme, validateMemeTitle } from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';

 const EditMeme = ({
  route,
@@ -80,15 +80,13 @@ const EditMeme = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
+          editorStyles.scrollView,
          orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
          { backgroundColor: colors.background },
        ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
          <MemeEditor
            memeUri={meme.uri}
            memeTitle={memeTitle}
@@ -97,7 +95,7 @@ const EditMeme = ({
            setMemeTags={setMemeTags}
          />
        </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
+        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained"
            icon="floppy"
--- a/src/screens/editors/editTag.tsx
+++ b/src/screens/editors/editTag.tsx
@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { BSON } from 'realm';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import { TagEditor } from '../components';
-import styles from '../styles';
-import { ROUTE, RootStackParamList } from '../types';
-import { Tag } from '../database';
-import { deleteTag, validateColor, validateTagName } from '../utilities';
+import { TagEditor } from '../../components';
+import { ROUTE, RootStackParamList } from '../../types';
+import { Tag } from '../../database';
+import { deleteTag, validateColor, validateTagName } from '../../utilities';
+import editorStyles from './editorStyles';

 const EditTag = ({
  route,
@@ -52,16 +52,14 @@ const EditTag = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
+          editorStyles.scrollView,
          orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
          { backgroundColor: colors.background },
        ]}
        nestedScrollEnabled>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
          <TagEditor
            tagName={tagName}
            setTagName={setTagName}
@@ -69,7 +67,7 @@ const EditTag = ({
            setTagColor={setTagColor}
          />
        </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
+        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained"
            icon="floppy"
--- a/src/screens/editors/editorStyles.ts
+++ b/src/screens/editors/editorStyles.ts
@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+const editorStyles = StyleSheet.create({
+  scrollView: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingHorizontal: '4%',
+  },
+  scrollViewPortrait: {
+    paddingVertical: '4%',
+  },
+  scrollViewLandscape: {
+    paddingVertical: '2%',
+  },
+  editorView: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  saveButtonView: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  saveAndAddButton: {
+    flex: 1,
+    marginRight: 5,
+  },
+  saveButton: {
+    flex: 1,
+    marginLeft: 5,
+  },
+});
+
+export default editorStyles;
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,7 +1,7 @@
-export { default as AddMeme } from './addMeme';
-export { default as AddTag } from './addTag';
-export { default as EditMeme } from './editMeme';
-export { default as EditTag } from './editTag';
+export { default as AddMeme } from './editors/addMeme';
+export { default as AddTag } from './editors/addTag';
+export { default as EditMeme } from './editors/editMeme';
+export { default as EditTag } from './editors/editTag';
 export { default as Memes } from './memes';
 export { default as MemeView } from './memeView';
 export { default as Settings } from './settings';
--- a/src/screens/memeView.tsx
+++ b/src/screens/memeView.tsx
@@ -17,7 +17,6 @@ import {
  shareMeme,
 } from '../utilities';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
-import styles from '../styles';

 const memeViewStyles = StyleSheet.create({
  // eslint-disable-next-line react-native/no-color-literals
@@ -36,6 +35,8 @@ const memeViewStyles = StyleSheet.create({
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
  },
  snackbar: {
    marginBottom: 64,
@@ -88,7 +89,7 @@ const MemeView = ({
        showsHorizontalScrollIndicator={false}
        renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
      />
-      <Appbar style={[styles.flexRowSpaceEvenly, memeViewStyles.footer]}>
+      <Appbar style={memeViewStyles.footer}>
        <Appbar.Action
          icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
          onPress={() => favoriteMeme(realm, memes[index])}
--- a/src/screens/memes.tsx
+++ b/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>
+    </>
  );
 };

--- a/src/screens/settings.tsx
+++ b/src/screens/settings.tsx
@@ -13,8 +13,6 @@ import {
 import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
-import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import {
  RootState,
  setGridColumns,
@@ -24,17 +22,28 @@ import {
 } from '../state';

 const settingsStyles = StyleSheet.create({
+  scrollView: {
+    paddingHorizontal: '4%',
+  },
  snackbar: {
    marginBottom: 90,
  },
  marginBottom: {
    marginBottom: 15,
  },
+  columnSegmentedButtons: {
+    marginBottom: 15,
+    paddingHorizontal: '2%',
+  },
+  hideMediaSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '2%',
+  },
 });

 const Settings = () => {
  const { colors } = useTheme();
-  const orientation = useDeviceOrientation();
  const noMedia = useSelector((state: RootState) => state.settings.noMedia);
  const masonryColumns = useSelector(
    (state: RootState) => state.settings.masonryColumns,
@@ -60,19 +69,12 @@ const Settings = () => {
    <>
      <ScrollView
        contentContainerStyle={[
-          orientation === 'portrait'
-            ? styles.paddingTop
-            : styles.smallPaddingTop,
-          styles.paddingHorizontal,
+          settingsStyles.scrollView,
          { backgroundColor: colors.background },
        ]}>
        <List.Section>
          <List.Subheader>Views</List.Subheader>
-          <Text
-            style={[
-              settingsStyles.marginBottom,
-              styles.smallPaddingHorizontal,
-            ]}>
+          <Text style={settingsStyles.columnSegmentedButtons}>
            Masonry Columns
          </Text>
          <SegmentedButtons
@@ -90,11 +92,7 @@ const Settings = () => {
            ]}
            style={settingsStyles.marginBottom}
          />
-          <Text
-            style={[
-              settingsStyles.marginBottom,
-              styles.smallPaddingHorizontal,
-            ]}>
+          <Text style={settingsStyles.columnSegmentedButtons}>
            Grid Columns
          </Text>
          <SegmentedButtons
@@ -123,8 +121,7 @@ const Settings = () => {
            }}>
            Change External Storage Path
          </Button>
-          <View
-            style={[styles.flexRowSpaceBetween, styles.smallPaddingHorizontal]}>
+          <View style={settingsStyles.hideMediaSwitch}>
            <Text>Hide media from gallery</Text>
            <Switch
              value={noMedia}
--- a/src/screens/tags.tsx
+++ b/src/screens/tags.tsx
@@ -15,16 +15,21 @@ import { useDeviceOrientation } from '@react-native-community/hooks';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { HideableHeader, TagRow, TagsHeader } from '../components';
 import { Tag } from '../database';
-import styles from '../styles';
 import { RootState, setNavVisible } from '../state';
 import { SORT_DIRECTION, tagSortQuery } from '../types';

 const tagsStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
  flashList: {
    paddingBottom: 100,
  },
  helperText: {
    marginVertical: 15,
+    textAlign: 'center',
  },
 });

@@ -104,12 +109,7 @@ const Tags = () => {
  );

  return (
-    <View
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+    <>
      <HideableHeader visible={navVisisble}>
        <TagsHeader
          search={search}
@@ -119,34 +119,35 @@ const Tags = () => {
          }}
        />
      </HideableHeader>
-      <FlashList
-        ref={flashListRef}
-        data={tags}
-        estimatedItemSize={50}
-        estimatedListSize={{
-          height,
-          width: width * 0.92,
-        }}
-        showsVerticalScrollIndicator={false}
-        renderItem={({ item: tag }) => <TagRow tag={tag} />}
-        contentContainerStyle={{
-          paddingTop:
-            flashListPadding +
-            height * (orientation === 'portrait' ? 0.02 : 0.04),
-          ...tagsStyles.flashList,
-        }}
-        ItemSeparatorComponent={() => <Divider />}
-        ListEmptyComponent={() => (
-          <HelperText
-            type={'info'}
-            style={[tagsStyles.helperText, styles.centerText]}>
-            No tags found
-          </HelperText>
-        )}
-        onScroll={handleScroll}
-        fadingEdgeLength={100}
-      />
-    </View>
+      <View
+        style={[tagsStyles.listView, { backgroundColor: colors.background }]}>
+        <FlashList
+          ref={flashListRef}
+          data={tags}
+          estimatedItemSize={50}
+          estimatedListSize={{
+            height,
+            width: width * 0.92,
+          }}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: tag }) => <TagRow tag={tag} />}
+          contentContainerStyle={{
+            paddingTop:
+              flashListPadding +
+              height * (orientation === 'portrait' ? 0.02 : 0.04),
+            ...tagsStyles.flashList,
+          }}
+          ItemSeparatorComponent={() => <Divider />}
+          ListEmptyComponent={() => (
+            <HelperText type={'info'} style={tagsStyles.helperText}>
+              No tags found
+            </HelperText>
+          )}
+          onScroll={handleScroll}
+          fadingEdgeLength={100}
+        />
+      </View>
+    </>
  );
 };

--- a/src/screens/welcome.tsx
+++ b/src/screens/welcome.tsx
@@ -3,14 +3,19 @@ import { StyleSheet, View } from 'react-native';
 import { Button, Text, useTheme } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import { noOp } from '../utilities';
 import { setStorageUri } from '../state';

 const welcomeStyles = StyleSheet.create({
+  view: {
+    paddingHorizontal: '4%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
  text: {
    marginBottom: 30,
+    textAlign: 'center',
  },
  button: {
    marginBottom: 100,
@@ -19,7 +24,6 @@ const welcomeStyles = StyleSheet.create({

 const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  const { colors } = useTheme();
-  const orientation = useDeviceOrientation();
  const dispatch = useDispatch();

  const selectStorageLocation = async () => {
@@ -30,18 +34,8 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  };

  return (
-    <View
-      style={[
-        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
-        styles.paddingHorizontal,
-        styles.center,
-        styles.flex,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
-      <Text
-        variant="displayMedium"
-        style={[welcomeStyles.text, styles.centerText]}>
+    <View style={[welcomeStyles.view, { backgroundColor: colors.background }]}>
+      <Text variant="displayMedium" style={welcomeStyles.text}>
        Welcome to Terminally Online!
      </Text>
      <Button
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -1,95 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  smallPadding: {
-    padding: '2%',
-  },
-  smallPaddingHorizontal: {
-    paddingHorizontal: '2%',
-  },
-  smallPaddingVertical: {
-    paddingVertical: '2%',
-  },
-  smallPaddingTop: {
-    paddingTop: '2%',
-  },
-  padding: {
-    padding: '4%',
-  },
-  paddingHorizontal: {
-    paddingHorizontal: '4%',
-  },
-  paddingVertical: {
-    paddingVertical: '4%',
-  },
-  paddingTop: {
-    paddingTop: '4%',
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  alignCenter: {
-    alignItems: 'center',
-  },
-  justifyCenter: {
-    justifyContent: 'center',
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  centerSelf: {
-    alignSelf: 'center',
-  },
-  flex: {
-    flex: 1,
-  },
-  flexGrow: {
-    flexGrow: 1,
-  },
-  flexShrink: {
-    flexShrink: 1,
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  flexRowSpaceBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  flexRowSpaceEvenly: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  flexColumn: {
-    flexDirection: 'column',
-  },
-  flexColumnSpaceBetween: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  flexRowReverse: {
-    flexDirection: 'row-reverse',
-  },
-  flexWrap: {
-    flexWrap: 'wrap',
-  },
-  justifyStart: {
-    justifyContent: 'flex-start',
-  },
-  justifyEnd: {
-    justifyContent: 'flex-end',
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  fullHeight: {
-    height: '100%',
-  },
-  fullSize: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default styles;