Refactor dimension handling

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

src/screens/addTag.tsx

@@ -1,37 +1,12 @@
 import React, { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import {
-  Chip,
-  TextInput,
-  Appbar,
-  HelperText,
-  Button,
-} from 'react-native-paper';
+import { View } from 'react-native';
+import { TextInput, Appbar, HelperText, Button } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { BSON } from 'realm';
 import { useRealm } from '@realm/react';
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import { PaddedView } from '../components';
-import styles, { horizontalScale, verticalScale } from '../styles';
-import {
-  generateRandomColor,
-  getContrastColor,
-  isValidColor,
-} from '../utilities';
-
-const tagStyles = StyleSheet.create({
-  preview: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-    marginVertical: verticalScale(75),
-  },
-  chip: {
-    padding: horizontalScale(5),
-  },
-  chipText: {
-    fontSize: horizontalScale(15),
-  },
-});
+import { RootScrollView, TagPreview } from '../components';
+import styles from '../styles';
+import { generateRandomColor, isValidColor } from '../utilities';
 
 const AddTag = () => {
   const navigation = useNavigation();
@@ -87,34 +62,19 @@ const AddTag = () => {
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         <Appbar.Content title="Add Tag" />
       </Appbar.Header>
-      <PaddedView style={[styles.flex, styles.flexColumnSpaceBetween]}>
-        <View>
-          <View style={[tagStyles.preview]}>
-            <Chip
-              icon={() => {
-                return (
-                  <FontAwesome5
-                    name="tag"
-                    size={horizontalScale(12)}
-                    color={getContrastColor(validatedTagColor)}
-                  />
-                );
-              }}
-              elevated
-              style={[tagStyles.chip, { backgroundColor: validatedTagColor }]}
-              textStyle={[
-                tagStyles.chipText,
-                { color: getContrastColor(validatedTagColor) },
-              ]}>
-              {'#' + tagName}
-            </Chip>
-          </View>
+      <RootScrollView
+        padded
+        style={[styles.flexGrow, styles.flexColumnSpaceBetween]}>
+        <View style={[styles.flex, styles.justifyStart]}>
+          <TagPreview name={tagName} color={validatedTagColor} />
           <TextInput
             mode="outlined"
             label="Tag Name"
             value={tagName}
             onChangeText={handleTagNameChange}
             error={!!tagNameError}
+            autoCapitalize="none"
+            selectTextOnFocus
           />
           <HelperText type="error" visible={!!tagNameError}>
             {tagNameError}
@@ -125,6 +85,7 @@ const AddTag = () => {
             value={tagColor}
             onChangeText={handleTagColorChange}
             error={!!tagColorError}
+            autoCorrect={false}
             right={
               <TextInput.Icon
                 icon="palette"
@@ -136,14 +97,16 @@ const AddTag = () => {
             {tagColorError}
           </HelperText>
         </View>
-        <Button
-          mode="contained"
-          icon="floppy"
-          onPress={handleSave}
-          disabled={!!tagNameError || !!tagColorError}>
-          Save
-        </Button>
-      </PaddedView>
+        <View style={[styles.flex, styles.justifyEnd]}>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={!!tagNameError || !!tagColorError}>
+            Save
+          </Button>
+        </View>
+      </RootScrollView>
     </>
   );
 };