[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>

2 files changed, 80 insertions, 55 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 65c0b066..ac1628da 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import {Image, StyleSheet, TextInput, View} from 'react-native';
+import {
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {AuthContext} from '../../routes';
 import {TaggBigInput} from '../onboarding';
@@ -58,25 +64,29 @@ const AddComment: React.FC<AddCommentProps> = ({
   };
 
   return (
-    <View style={styles.container}>
-      <Image
-        style={styles.avatar}
-        source={
-          avatar
-            ? {uri: avatar}
-            : require('../../assets/images/avatar-placeholder.png')
-        }
-      />
-      <TaggBigInput
-        style={styles.text}
-        multiline
-        placeholder="Add a comment....."
-        placeholderTextColor="gray"
-        onChangeText={handleCommentUpdate}
-        onSubmitEditing={postComment}
-        value={comment}
-      />
-    </View>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={130}>
+      <View style={styles.container}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <TaggBigInput
+          style={styles.text}
+          multiline
+          placeholder="Add a comment....."
+          placeholderTextColor="gray"
+          onChangeText={handleCommentUpdate}
+          onSubmitEditing={postComment}
+          value={comment}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 };
 const styles = StyleSheet.create({
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',