[TMA-328] Enable keyboard avoiding view captions comments (#93)

* resizes non square images to be displayed without being cropped

* Enabled keyboard avoiding view on caption screen and comments screen

* Delete TaggPost.tsx

* Delete TwitterTaggPost.tsx

* removed unnecessarilyy deleted files

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

1 files changed, 50 insertions, 35 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fd51c84f..08dd8e5b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
-import {StyleSheet, View, Image, Alert, Text, Platform} from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Image,
+  Alert,
+  Keyboard,
+  TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
 import {Button} from 'react-native-elements';
-import {SearchBackground, TabsGradient, TaggBigInput} from '../../components';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {SearchBackground, TaggBigInput} from '../../components';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {ProfileStackParams} from 'src/routes';
@@ -10,6 +19,7 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import {CaptionScreenHeader} from '../../components/';
 import {MOMENTS_ENDPOINT} from '../../constants';
 import {AuthContext} from '../../routes/authentication';
+
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
@@ -88,44 +98,49 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
 
   return (
     <SearchBackground>
-      <View style={styles.contentContainer}>
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Cancel"
-            buttonStyle={styles.button}
-            onPress={() => {
-              navigation.navigate('Profile', {isProfileView: false});
-            }}
-          />
-          <Button
-            title="Share"
-            titleStyle={styles.shareButtonTitle}
-            buttonStyle={styles.button}
-            onPress={handleShare}
-          />
-        </View>
-        <CaptionScreenHeader style={styles.header} {...{title: title}} />
-        <Image
-          style={styles.image}
-          source={{uri: image.path}}
-          resizeMode={'cover'}
-        />
-        <TaggBigInput
-          style={styles.text}
-          multiline
-          placeholder="Write something....."
-          placeholderTextColor="gray"
-          onChangeText={handleCaptionUpdate}
-        />
-      </View>
-      <TabsGradient />
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{flex: 1}}>
+          <View style={styles.contentContainer}>
+            <View style={styles.buttonsContainer}>
+              <Button
+                title="Cancel"
+                buttonStyle={styles.button}
+                onPress={() => {
+                  navigation.navigate('Profile', {isProfileView: false});
+                }}
+              />
+              <Button
+                title="Share"
+                titleStyle={styles.shareButtonTitle}
+                buttonStyle={styles.button}
+                onPress={handleShare}
+              />
+            </View>
+            <CaptionScreenHeader style={styles.header} {...{title: title}} />
+            <Image
+              style={styles.image}
+              source={{uri: image.path}}
+              resizeMode={'cover'}
+            />
+            <TaggBigInput
+              style={styles.text}
+              multiline
+              placeholder="Write something....."
+              placeholderTextColor="gray"
+              onChangeText={handleCaptionUpdate}
+            />
+          </View>
+        </KeyboardAvoidingView>
+      </TouchableWithoutFeedback>
     </SearchBackground>
   );
 };
 const styles = StyleSheet.create({
   contentContainer: {
     paddingTop: StatusBarHeight,
-    paddingBottom: SCREEN_HEIGHT,
+    justifyContent: 'flex-end',
   },
   buttonsContainer: {
     flexDirection: 'row',