Add initial styling for caption screen

1 files changed, 65 insertions, 61 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 7fef73db..2c5356c0 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {FC, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -13,12 +13,11 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {MentionInputControlled} from '../../components';
 import {Button, normalize} from 'react-native-elements';
 import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
+import {MentionInputControlled, SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -40,7 +39,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -204,9 +203,34 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
   };
 
+  const SelectableItem: FC = () => (
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('TagFriendsScreen', {
+          media: {
+            uri: mediaUri,
+            isVideo: isMediaAVideo,
+          },
+          selectedTags: tags,
+        })
+      }
+      style={styles.tagFriendsContainer}>
+      <Image
+        source={require('../../assets/icons/tagging/tag-icon.png')}
+        style={styles.tagIcon}
+      />
+      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      <Text numberOfLines={1} style={styles.taggedListContainer}>
+        {taggedList}
+        {taggedList.length > 21 ? '. . .' : ''}
+      </Text>
+      <FrontArrow width={12} height={12} color={'white'} />
+    </TouchableOpacity>
+  );
+
   return (
     <SearchBackground>
-      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
+      {loading && <TaggLoadingIndicator fullscreen />}
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -225,53 +249,31 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 onPress={moment ? handleDoneEditing : handleShare}
               />
             </View>
-            <CaptionScreenHeader
-              style={styles.header}
-              {...{title: moment ? moment.moment_category : title ?? ''}}
-            />
-            {isMediaAVideo ? (
-              <Video
-                style={styles.media}
-                source={{uri: mediaUri}}
-                repeat={true}
-              />
-            ) : (
-              <Image
-                style={styles.media}
-                source={{uri: mediaUri}}
-                resizeMode={'contain'}
-              />
-            )}
-            <MentionInputControlled
-              containerStyle={styles.text}
-              placeholder="Write something....."
-              placeholderTextColor="gray"
-              value={caption}
-              onChange={setCaption}
-              partTypes={mentionPartTypes('blue', 'caption')}
-            />
-            <TouchableOpacity
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
-              style={styles.tagFriendsContainer}>
-              <Image
-                source={require('../../assets/icons/tagging/tag-icon.png')}
-                style={styles.tagIcon}
+            <CaptionScreenHeader style={styles.header} title={'Moments'} />
+            <View style={styles.captionContainer}>
+              {isMediaAVideo ? (
+                <Video
+                  style={styles.media}
+                  source={{uri: mediaUri}}
+                  repeat={true}
+                />
+              ) : (
+                <Image
+                  style={styles.media}
+                  source={{uri: mediaUri}}
+                  resizeMode={'contain'}
+                />
+              )}
+              <MentionInputControlled
+                containerStyle={styles.text}
+                placeholder="Write something....."
+                placeholderTextColor="gray"
+                value={caption}
+                onChange={setCaption}
+                partTypes={mentionPartTypes('blue', 'caption')}
               />
-              <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-              <Text numberOfLines={1} style={styles.taggedListContainer}>
-                {taggedList}
-                {taggedList.length > 21 ? '. . .' : ''}
-              </Text>
-              <FrontArrow width={12} height={12} color={'white'} />
-            </TouchableOpacity>
+            </View>
+            <SelectableItem />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -297,21 +299,23 @@ const styles = StyleSheet.create({
     color: TAGG_LIGHT_BLUE_2,
   },
   header: {
-    marginVertical: 20,
+    marginTop: 20,
+    marginBottom: 30,
+  },
+  captionContainer: {
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    padding: normalize(15),
   },
   media: {
-    position: 'relative',
-    width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
+    height: normalize(150),
+    aspectRatio: 9 / 16,
   },
   text: {
-    position: 'relative',
     backgroundColor: 'white',
-    width: '100%',
-    paddingHorizontal: '2%',
-    paddingVertical: '1%',
-    height: 60,
+    flex: 1,
+    height: normalize(150),
+    marginLeft: normalize(15),
   },
   flex: {
     flex: 1,