Add tag datatable

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

src/components/floatingActionButton.tsx

@@ -1,23 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Keyboard } from 'react-native';
+import { Keyboard } from 'react-native';
 import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useDimensions } from '../contexts';
 
-const styles = StyleSheet.create({
-  fab: {
-    position: 'absolute',
-  },
-});
-
 const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   const { navigate } =
     useNavigation<NativeStackNavigationProp<ParamListBase>>();
-  const dimensions = useDimensions();
+  const { responsive } = useDimensions();
 
   const [state, setState] = useState(false);
   const [keyboardOpen, setKeyboardOpen] = useState(false);
+
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
@@ -29,8 +24,8 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
     );
 
     return () => {
-      keyboardDidHideListener.remove();
       keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
     };
   }, []);
 
@@ -60,13 +55,10 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
       onPress={() => {
         if (state) navigate('Add Meme');
       }}
-      style={[
-        styles.fab,
-        {
-          paddingRight: dimensions.responsive.horizontalScale(10),
-          paddingBottom: dimensions.responsive.verticalScale(75),
-        },
-      ]}
+      style={{
+        paddingBottom: responsive.verticalScale(75),
+        paddingRight: responsive.horizontalScale(10),
+      }}
     />
   );
 };

src/components/index.ts

@@ -2,4 +2,5 @@ export { default as FloatingActionButton } from './floatingActionButton';
 export { default as LoadingView } from './loadingView';
 export { default as RootScrollView } from './rootScrollView';
 export { default as RootView } from './rootView';
+export { default as TagChip } from './tagChip';
 export { default as TagPreview } from './tagPreview';

src/components/rootScrollView.tsx

@@ -1,11 +1,8 @@
 import React, { ReactNode } from 'react';
-import {
-  StyleProp,
-  ScrollView,
-  ViewStyle,
-} from 'react-native';
+import { StyleProp, ScrollView, ViewStyle } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import styles from '../styles';
+import { useDimensions } from '../contexts';
 
 const RootScrollView = ({
   children,
@@ -19,11 +16,21 @@ const RootScrollView = ({
   padded?: boolean;
 }) => {
   const { colors } = useTheme();
+  const { orientation } = useDimensions();
 
   return (
     <ScrollView
       contentContainerStyle={[
-        padded && styles.padding,
+        padded &&
+          orientation == 'portrait' && [
+            styles.paddingHorizontal,
+            styles.paddingVertical,
+          ],
+        padded &&
+          orientation == 'landscape' && [
+            styles.paddingHorizontal,
+            styles.smallPaddingVertical,
+          ],
         centered && [styles.centered, styles.flex],
         { backgroundColor: colors.background },
         style,

src/components/rootView.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import styles from '../styles';
+import { useDimensions } from '../contexts';
 
 const RootView = ({
   children,
@@ -15,11 +16,21 @@ const RootView = ({
   padded?: boolean;
 }) => {
   const { colors } = useTheme();
+  const { orientation } = useDimensions();
 
   return (
     <View
       style={[
-        padded && styles.padding,
+        padded &&
+          orientation == 'portrait' && [
+            styles.paddingHorizontal,
+            styles.paddingVertical,
+          ],
+        padded &&
+          orientation == 'landscape' && [
+            styles.paddingHorizontal,
+            styles.smallPaddingVertical,
+          ],
         centered && [styles.centered, styles.flex],
         { backgroundColor: colors.background },
         style,

src/components/tagChip.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { getContrastColor } from '../utilities';
+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);
+
+  return (
+    <Chip
+      icon={() => {
+        return <FontAwesome5 name="tag" color={contrastColor} />;
+      }}
+      compact
+      style={[
+        {
+          backgroundColor: properties.tag.color,
+        },
+      ]}
+      textStyle={{ color: contrastColor }}>
+      {'#' + properties.tag.name}
+    </Chip>
+  );
+};
+
+export default TagChip;

src/components/tagPreview.tsx

@@ -1,44 +1,45 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Chip } from 'react-native-paper';
 import styles from '../styles';
 import { useDimensions } from '../contexts';
 import { getContrastColor } from '../utilities';
 
+const tagPreviewStyles = StyleSheet.create({
+  chip: {
+    padding: 5,
+  },
+  text: {
+    fontSize: 18,
+  },
+});
+
 const TagPreview = (properties: { name: string; color: string }) => {
-  const dimensions = useDimensions();
+  const { responsive } = useDimensions();
+  const contrastColor = getContrastColor(properties.color);
 
   return (
     <View
       style={[
-        styles.centeredHorizontal,
+        styles.justifyCenter,
         styles.flexRow,
         {
-          margin: dimensions.responsive.verticalScale(50),
+          margin: responsive.verticalScale(50),
         },
       ]}>
       <Chip
         icon={() => {
-          return (
-            <FontAwesome5
-              name="tag"
-              size={dimensions.static.horizontalScale(12)}
-              color={getContrastColor(properties.color)}
-            />
-          );
+          return <FontAwesome5 name="tag" size={14} color={contrastColor} />;
         }}
         elevated
         style={[
+          tagPreviewStyles.chip,
           {
             backgroundColor: properties.color,
-            padding: dimensions.static.verticalScale(5),
           },
         ]}
-        textStyle={[
-          { fontSize: dimensions.static.horizontalScale(15) },
-          { color: getContrastColor(properties.color) },
-        ]}>
+        textStyle={[tagPreviewStyles.text, { color: contrastColor }]}>
         {'#' + properties.name}
       </Chip>
     </View>