Refactor tag screen to use FlashList

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

src/components/rootScrollView.tsx

@@ -24,14 +24,17 @@ const RootScrollView = ({
         padded &&
           orientation == 'portrait' && [
             styles.paddingHorizontal,
-            styles.paddingVertical,
+            styles.paddingTop,
           ],
         padded &&
           orientation == 'landscape' && [
             styles.paddingHorizontal,
-            styles.smallPaddingVertical,
+            styles.smallPaddingTop,
           ],
         centered && [styles.centered, styles.flex],
+        styles.fullSize,
+        centered && [styles.centered, styles.flex],
+        styles.fullSize,
         { backgroundColor: colors.background },
         style,
       ]}

src/components/rootView.tsx

@@ -24,14 +24,15 @@ const RootView = ({
         padded &&
           orientation == 'portrait' && [
             styles.paddingHorizontal,
-            styles.paddingVertical,
+            styles.paddingTop,
           ],
         padded &&
           orientation == 'landscape' && [
             styles.paddingHorizontal,
-            styles.smallPaddingVertical,
+            styles.smallPaddingTop,
           ],
         centered && [styles.centered, styles.flex],
+        styles.fullSize,
         { backgroundColor: colors.background },
         style,
       ]}>

src/components/tagChip.tsx

@@ -4,8 +4,8 @@ import { Chip } from 'react-native-paper';
 import { Tag } from '../database';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
-const TagChip = (properties: { tag: Tag }) => {
-  const contrastColor = getContrastColor(properties.tag.color);
+const TagChip = ({ tag }: { tag: Tag }) => {
+  const contrastColor = getContrastColor(tag.color);
 
   return (
     <Chip
@@ -15,11 +15,11 @@ const TagChip = (properties: { tag: Tag }) => {
       compact
       style={[
         {
-          backgroundColor: properties.tag.color,
+          backgroundColor: tag.color,
         },
       ]}
       textStyle={{ color: contrastColor }}>
-      {'#' + properties.tag.name}
+      {'#' + tag.name}
     </Chip>
   );
 };

src/components/tagPreview.tsx

@@ -15,9 +15,9 @@ const tagPreviewStyles = StyleSheet.create({
   },
 });
 
-const TagPreview = (properties: { name: string; color: string }) => {
+const TagPreview = ({ name, color }: { name: string; color: string }) => {
   const { responsive } = useDimensions();
-  const contrastColor = getContrastColor(properties.color);
+  const contrastColor = getContrastColor(color);
 
   return (
     <View
@@ -36,11 +36,11 @@ const TagPreview = (properties: { name: string; color: string }) => {
         style={[
           tagPreviewStyles.chip,
           {
-            backgroundColor: properties.color,
+            backgroundColor: color,
           },
         ]}
         textStyle={[tagPreviewStyles.text, { color: contrastColor }]}>
-        {'#' + properties.name}
+        {'#' + name}
       </Chip>
     </View>
   );