Add navigation element animations

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

src/screens/addTag.tsx

@@ -1,15 +1,24 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
-import { TextInput, Appbar, HelperText, Button } from 'react-native-paper';
+import { ScrollView, View } from 'react-native';
+import {
+  TextInput,
+  Appbar,
+  HelperText,
+  Button,
+  useTheme,
+} from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { BSON } from 'realm';
 import { useRealm } from '@realm/react';
-import { RootScrollView, TagPreview } from '../components';
+import { TagPreview } from '../components';
 import styles from '../styles';
 import { generateRandomColor, isValidColor } from '../utilities';
+import { useDimensions } from '../contexts';
 
 const AddTag = () => {
   const navigation = useNavigation();
+  const { colors } = useTheme();
+  const { orientation } = useDimensions();
   const realm = useRealm();
 
   const [tagName, setTagName] = useState('newTag');
@@ -61,9 +70,16 @@ const AddTag = () => {
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         <Appbar.Content title="Add Tag" />
       </Appbar.Header>
-      <RootScrollView
-        padded
-        style={[styles.flexGrow, styles.flexColumnSpaceBetween]}>
+      <ScrollView
+        contentContainerStyle={[
+          orientation == 'portrait' && styles.paddingVertical,
+          orientation == 'landscape' && styles.smallPaddingVertical,
+          styles.paddingHorizontal,
+          styles.fullSize,
+          styles.flexGrow,
+          styles.flexColumnSpaceBetween,
+          { backgroundColor: colors.background },
+        ]}>
         <View style={[styles.flex, styles.justifyStart]}>
           <TagPreview name={tagName} color={validatedTagColor} />
           <TextInput
@@ -105,7 +121,7 @@ const AddTag = () => {
             Save
           </Button>
         </View>
-      </RootScrollView>
+      </ScrollView>
     </>
   );
 };