Fix various spacing issues

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-25 22:00:33 +03:00
parent e479e3c0ad
commit caa98736e9
28 changed files with 362 additions and 488 deletions
--- a/src/screens/addMeme.tsx
+++ b/src/screens/addMeme.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
-import { ORIENTATION, useDimensions } from '../contexts';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useRealm } from '@realm/react';
@@ -9,16 +8,17 @@ import { BSON } from 'realm';
 import { AndroidScoped, FileSystem } from 'react-native-file-access';
 import { useSelector } from 'react-redux';
 import { extension } from 'react-native-mime-types';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+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';
-import {
-  DocumentPickerResponse,
-  pickSingle,
-} from 'react-native-document-picker';

 const addMemeStyles = StyleSheet.create({
  saveAndAddButton: {
@@ -36,7 +36,7 @@ const AddMeme = ({
 }: NativeStackScreenProps<RootStackParamList, ROUTE.ADD_MEME>) => {
  const { goBack } = useNavigation();
  const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
  const realm = useRealm();
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const storageUri = useSelector(
@@ -104,7 +104,7 @@ const AddMeme = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          orientation === 'portrait'
            ? styles.paddingVertical
            : styles.smallPaddingVertical,
          styles.paddingHorizontal,
--- a/src/screens/addTag.tsx
+++ b/src/screens/addTag.tsx
@@ -3,13 +3,13 @@ import { ScrollView, StyleSheet, 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 { ORIENTATION, useDimensions } from '../contexts';
 import { Tag } from '../database';
 import { TagEditor } from '../components';

@@ -27,7 +27,7 @@ const addTagStyles = StyleSheet.create({
 const AddTag = () => {
  const { goBack } = useNavigation();
  const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
  const realm = useRealm();

  const [tagName, setTagName] = useState(validateTagName('newTag'));
@@ -57,7 +57,7 @@ const AddTag = () => {
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          orientation === 'portrait'
            ? styles.paddingVertical
            : styles.smallPaddingVertical,
          styles.paddingHorizontal,
--- a/src/screens/editMeme.tsx
+++ b/src/screens/editMeme.tsx
@@ -4,8 +4,8 @@ import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 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 { ORIENTATION, useDimensions } from '../contexts';
 import styles from '../styles';
 import { RootStackParamList, ROUTE } from '../types';
 import { Tag, Meme } from '../database';
@@ -17,7 +17,7 @@ const EditMeme = ({
 }: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_MEME>) => {
  const { goBack } = useNavigation();
  const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
  const realm = useRealm();

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -80,7 +80,7 @@ const EditMeme = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          orientation === 'portrait'
            ? styles.paddingVertical
            : styles.smallPaddingVertical,
          styles.paddingHorizontal,
--- a/src/screens/editTag.tsx
+++ b/src/screens/editTag.tsx
@@ -5,9 +5,9 @@ import { useNavigation } from '@react-navigation/native';
 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 { ORIENTATION, useDimensions } from '../contexts';
 import { ROUTE, RootStackParamList } from '../types';
 import { Tag } from '../database';
 import { deleteTag, validateColor, validateTagName } from '../utilities';
@@ -17,7 +17,7 @@ const EditTag = ({
 }: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_TAG>) => {
  const { goBack } = useNavigation();
  const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
  const realm = useRealm();

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -52,7 +52,7 @@ const EditTag = ({
      </Appbar.Header>
      <ScrollView
        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          orientation === 'portrait'
            ? styles.paddingVertical
            : styles.smallPaddingVertical,
          styles.paddingHorizontal,
--- a/src/screens/memeView.tsx
+++ b/src/screens/memeView.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useQuery, useRealm } from '@realm/react';
 import { FlashList } from '@shopify/flash-list';
 import { Appbar, Portal, Snackbar } from 'react-native-paper';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { RootStackParamList, ROUTE } from '../types';
 import { Meme } from '../database';
-import { useDimensions } from '../contexts';
 import { MemeViewItem } from '../components';
 import {
  copyMeme,
@@ -20,22 +20,32 @@ import { NavigationProp, useNavigation } from '@react-navigation/native';
 import styles from '../styles';

 const memeViewStyles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    backgroundColor: 'transparent',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
  footer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
-    height: 80,
+    backgroundColor: 'transparent',
  },
  snackbar: {
-    marginBottom: 90,
+    marginBottom: 64,
  },
 });

 const MemeView = ({
  route,
 }: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
-  const { orientation, dimensions } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const realm = useRealm();

@@ -55,35 +65,30 @@ const MemeView = ({

  return (
    <>
-      <Appbar.Header>
+      <Appbar.Header style={memeViewStyles.header}>
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title={memes[index].title} />
      </Appbar.Header>
-      <View>
-        <FlashList
-          ref={flashListRef}
-          key={orientation}
-          data={memes}
-          initialScrollIndex={index}
-          onScroll={event => {
-            const newIndex = Math.round(
-              event.nativeEvent.contentOffset.x /
-                event.nativeEvent.layoutMeasurement.width,
-            );
-            if (newIndex !== index) setIndex(newIndex);
-          }}
-          estimatedItemSize={dimensions.width}
-          pagingEnabled
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          estimatedListSize={{
-            height: dimensions.height - 160,
-            width: dimensions.width,
-          }}
-          renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
-        />
-      </View>
-      <Appbar style={[memeViewStyles.footer, styles.flexRowSpaceEvenly]}>
+      <FlashList
+        ref={flashListRef}
+        key={height}
+        data={memes}
+        initialScrollIndex={index}
+        onScroll={event => {
+          const newIndex = Math.round(
+            event.nativeEvent.contentOffset.x /
+              event.nativeEvent.layoutMeasurement.width,
+          );
+          if (newIndex !== index) setIndex(newIndex);
+        }}
+        estimatedItemSize={width}
+        estimatedListSize={{ height, width }}
+        pagingEnabled
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
+      />
+      <Appbar style={[styles.flexRowSpaceEvenly, 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
@@ -4,6 +4,7 @@ import {
  NativeScrollEvent,
  NativeSyntheticEvent,
  View,
+  useWindowDimensions,
 } from 'react-native';
 import { useQuery } from '@realm/react';
 import { useTheme } from 'react-native-paper';
@@ -20,11 +21,14 @@ 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 Memes = () => {
  const { colors } = useTheme();
  const { navigate } =
    useNavigation<NativeStackNavigationProp<ParamListBase>>();
+  const { height } = useWindowDimensions();
+  const orientation = useDeviceOrientation();
  const sort = useSelector((state: RootState) => state.memes.sort);
  const sortDirection = useSelector(
    (state: RootState) => state.memes.sortDirection,
@@ -135,7 +139,10 @@ const Memes = () => {
          search={search}
          setSearch={setSearch}
          onLayout={event => {
-            setFlashListPadding(event.nativeEvent.layout.height);
+            setFlashListPadding(
+              event.nativeEvent.layout.height +
+                height * (orientation === 'portrait' ? 0.02 : 0.04),
+            );
          }}
        />
      </HideableHeader>
--- a/src/screens/settings.tsx
+++ b/src/screens/settings.tsx
@@ -13,6 +13,7 @@ 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,
@@ -21,7 +22,6 @@ import {
  setNoMedia,
  setStorageUri,
 } from '../state';
-import { ORIENTATION, useDimensions } from '../contexts';

 const settingsStyles = StyleSheet.create({
  snackbar: {
@@ -34,7 +34,7 @@ const settingsStyles = StyleSheet.create({

 const Settings = () => {
  const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
  const noMedia = useSelector((state: RootState) => state.settings.noMedia);
  const masonryColumns = useSelector(
    (state: RootState) => state.settings.masonryColumns,
@@ -60,85 +60,80 @@ const Settings = () => {
    <>
      <ScrollView
        contentContainerStyle={[
-          orientation === ORIENTATION.PORTRAIT
+          orientation === 'portrait'
            ? styles.paddingTop
            : styles.smallPaddingTop,
          styles.paddingHorizontal,
          { backgroundColor: colors.background },
        ]}>
-        <View>
-          <List.Section>
-            <List.Subheader>Views</List.Subheader>
-            <Text
-              style={[
-                settingsStyles.marginBottom,
-                styles.smallPaddingHorizontal,
-              ]}>
-              Masonry Columns
-            </Text>
-            <SegmentedButtons
-              value={masonryColumns.toString()}
+        <List.Section>
+          <List.Subheader>Views</List.Subheader>
+          <Text
+            style={[
+              settingsStyles.marginBottom,
+              styles.smallPaddingHorizontal,
+            ]}>
+            Masonry Columns
+          </Text>
+          <SegmentedButtons
+            value={masonryColumns.toString()}
+            onValueChange={value => {
+              void dispatch(
+                setMasonryColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+              );
+            }}
+            buttons={[
+              { label: '1', value: '1' },
+              { label: '2', value: '2' },
+              { label: '3', value: '3' },
+              { label: '4', value: '4' },
+            ]}
+            style={settingsStyles.marginBottom}
+          />
+          <Text
+            style={[
+              settingsStyles.marginBottom,
+              styles.smallPaddingHorizontal,
+            ]}>
+            Grid Columns
+          </Text>
+          <SegmentedButtons
+            value={gridColumns.toString()}
+            onValueChange={value => {
+              void dispatch(
+                setGridColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+              );
+            }}
+            buttons={[
+              { label: '1', value: '1' },
+              { label: '2', value: '2' },
+              { label: '3', value: '3' },
+              { label: '4', value: '4' },
+            ]}
+          />
+        </List.Section>
+        <List.Section>
+          <List.Subheader>Media Storage</List.Subheader>
+          <Button
+            mode="elevated"
+            style={settingsStyles.marginBottom}
+            onPress={async () => {
+              const { uri } = await openDocumentTree(true);
+              void dispatch(setStorageUri(uri));
+            }}>
+            Change External Storage Path
+          </Button>
+          <View
+            style={[styles.flexRowSpaceBetween, styles.smallPaddingHorizontal]}>
+            <Text>Hide media from gallery</Text>
+            <Switch
+              value={noMedia}
              onValueChange={value => {
-                void dispatch(
-                  setMasonryColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
-                );
+                void dispatch(setNoMedia(value));
              }}
-              buttons={[
-                { label: '1', value: '1' },
-                { label: '2', value: '2' },
-                { label: '3', value: '3' },
-                { label: '4', value: '4' },
-              ]}
-              style={settingsStyles.marginBottom}
            />
-            <Text
-              style={[
-                settingsStyles.marginBottom,
-                styles.smallPaddingHorizontal,
-              ]}>
-              Grid Columns
-            </Text>
-            <SegmentedButtons
-              value={gridColumns.toString()}
-              onValueChange={value => {
-                void dispatch(
-                  setGridColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
-                );
-              }}
-              buttons={[
-                { label: '1', value: '1' },
-                { label: '2', value: '2' },
-                { label: '3', value: '3' },
-                { label: '4', value: '4' },
-              ]}
-            />
-          </List.Section>
-          <List.Section>
-            <List.Subheader>Media Storage</List.Subheader>
-            <Button
-              mode="elevated"
-              style={settingsStyles.marginBottom}
-              onPress={async () => {
-                const { uri } = await openDocumentTree(true);
-                void dispatch(setStorageUri(uri));
-              }}>
-              Change External Storage Path
-            </Button>
-            <View
-              style={[
-                styles.flexRowSpaceBetween,
-                styles.smallPaddingHorizontal,
-              ]}>
-              <Text>Hide media from gallery</Text>
-              <Switch
-                value={noMedia}
-                onValueChange={value => {
-                  void dispatch(setNoMedia(value));
-                }}
-              />
-            </View>
-          </List.Section>
-        </View>
+          </View>
+        </List.Section>
        <List.Section>
          <List.Subheader>Database</List.Subheader>
          <Button
--- a/src/screens/tags.tsx
+++ b/src/screens/tags.tsx
@@ -11,12 +11,13 @@ import { useQuery } from '@realm/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FlashList } from '@shopify/flash-list';
 import { useFocusEffect } from '@react-navigation/native';
+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';
-import { ORIENTATION, useDimensions } from '../contexts';

 const tagsStyles = StyleSheet.create({
  flashList: {
@@ -29,7 +30,8 @@ const tagsStyles = StyleSheet.create({

 const Tags = () => {
  const { colors } = useTheme();
-  const { dimensions, orientation } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
+  const orientation = useDeviceOrientation();
  const sort = useSelector((state: RootState) => state.tags.sort);
  const sortDirection = useSelector(
    (state: RootState) => state.tags.sortDirection,
@@ -122,16 +124,15 @@ const Tags = () => {
        data={tags}
        estimatedItemSize={50}
        estimatedListSize={{
-          height: dimensions.height,
-          width: dimensions.width * 0.92,
+          height,
+          width: width * 0.92,
        }}
        showsVerticalScrollIndicator={false}
        renderItem={({ item: tag }) => <TagRow tag={tag} />}
        contentContainerStyle={{
          paddingTop:
            flashListPadding +
-            dimensions.height *
-              (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04),
+            height * (orientation === 'portrait' ? 0.02 : 0.04),
          ...tagsStyles.flashList,
        }}
        ItemSeparatorComponent={() => <Divider />}
@@ -143,6 +144,7 @@ const Tags = () => {
          </HelperText>
        )}
        onScroll={handleScroll}
+        fadingEdgeLength={100}
      />
    </View>
  );
--- a/src/screens/welcome.tsx
+++ b/src/screens/welcome.tsx
@@ -3,10 +3,10 @@ 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';
-import { ORIENTATION, useDimensions } from '../contexts';

 const welcomeStyles = StyleSheet.create({
  text: {
@@ -19,7 +19,7 @@ const welcomeStyles = StyleSheet.create({

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

  const selectStorageLocation = async () => {
@@ -32,11 +32,9 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  return (
    <View
      style={[
-        orientation === ORIENTATION.PORTRAIT
-          ? styles.paddingTop
-          : styles.smallPaddingTop,
+        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
        styles.paddingHorizontal,
-        styles.centered,
+        styles.center,
        styles.flex,
        styles.fullSize,
        { backgroundColor: colors.background },