Add new Tag Friends Screen

4 files changed, 223 insertions, 0 deletions

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 054fb643..aeead38d 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -102,6 +102,11 @@ export type MainStackParams = {
   TagSelectionScreen: {
     selectedUsers: ProfilePreviewType[];
   };
+  TagFriendsScreen: {
+    image: Image;
+    screenType: ScreenType;
+    selectedUsers?: ProfilePreviewType[];
+  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 61491641..1b646f24 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -33,6 +33,7 @@ import {
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
   TagSelectionScreen,
+  TagFriendsScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -318,6 +319,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             ...headerBarOptions('black', ''),
           }}
         />
+        <MainStack.Screen
+          name="TagFriendsScreen"
+          component={TagFriendsScreen}
+        />
       </MainStack.Navigator>
     );
   };
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
new file mode 100644
index 00000000..54da94ee
--- /dev/null
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -0,0 +1,212 @@
+import {RouteProp} from '@react-navigation/core';
+import {useNavigation} from '@react-navigation/native';
+import React, {Fragment, useEffect, useState} from 'react';
+import {
+  Image,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {Button} from 'react-native-elements';
+import {MainStackParams} from 'src/routes';
+import {
+  CaptionScreenHeader,
+  ProfilePreview,
+  SearchBackground,
+  TaggLoadingIndicator,
+} from '../../components';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+
+type TagFriendsScreenRouteProps = RouteProp<
+  MainStackParams,
+  'TagFriendsScreen'
+>;
+interface TagFriendsScreenProps {
+  route: TagFriendsScreenRouteProps;
+}
+const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
+  const {image, selectedUsers} = route.params;
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+
+  useEffect(() => {
+    setTaggedUsers(selectedUsers ? selectedUsers : []);
+  }, [route.params]);
+
+  /*
+   * Navigate back to Tag Users Screen, send selected users
+   */
+  const handleDone = () => {
+    navigation.navigate('CaptionScreen', {
+      ...route.params,
+      selectedUsers: taggedUsers,
+    });
+  };
+
+  return (
+    <SearchBackground>
+      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.flex}>
+          <View style={styles.contentContainer}>
+            <View style={styles.buttonsContainer}>
+              <Button
+                title="Cancel"
+                buttonStyle={styles.button}
+                onPress={() => navigation.goBack()}
+              />
+              <Button
+                title="Done"
+                titleStyle={styles.shareButtonTitle}
+                buttonStyle={styles.button}
+                onPress={handleDone}
+              />
+            </View>
+            <CaptionScreenHeader
+              style={styles.header}
+              title={'Tap on photo to Tag friends!'}
+            />
+            <Image
+              style={styles.image}
+              source={{uri: image.path}}
+              resizeMode={'cover'}
+            />
+            <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                }}
+                disabled={taggedUsers.length !== 0}
+                onPress={() =>
+                  navigation.navigate('TagSelectionScreen', {
+                    selectedUsers: taggedUsers,
+                  })
+                }>
+                <Image
+                  source={require('../../assets/icons/tagging/tag-icon.png')}
+                  style={{width: 20, height: 20, marginRight: '3%'}}
+                />
+                <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+              </TouchableOpacity>
+              <View style={styles.tagFriendsContainer}>
+                {taggedUsers.map((user) => (
+                  <View>
+                    <TouchableOpacity
+                      onPress={() => console.log('Remove user')}>
+                      <Image
+                        source={require('../../assets/icons/tagging/x-icon.png')}
+                        style={{
+                          width: 15,
+                          height: 15,
+                          position: 'absolute',
+                          right: 15,
+                        }}
+                      />
+                    </TouchableOpacity>
+                    <ProfilePreview
+                      profilePreview={user}
+                      previewType={'Tag Selection'}
+                      screenType={ScreenType.Profile}
+                    />
+                  </View>
+                ))}
+                {taggedUsers.length !== 0 && (
+                  <TouchableOpacity
+                    onPress={() =>
+                      navigation.navigate('TagSelectionScreen', {
+                        selectedUsers: taggedUsers,
+                      })
+                    }
+                    style={{
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                    }}>
+                    <Image
+                      source={require('../../assets/icons/tagging/white-plus-icon.png')}
+                      style={{width: 38, height: 38, top: -2}}
+                    />
+                    <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text>
+                  </TouchableOpacity>
+                )}
+              </View>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </TouchableWithoutFeedback>
+    </SearchBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingTop: StatusBarHeight,
+    justifyContent: 'flex-end',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginLeft: '5%',
+    marginRight: '5%',
+  },
+  button: {
+    backgroundColor: 'transparent',
+  },
+  shareButtonTitle: {
+    fontWeight: 'bold',
+    color: TAGG_LIGHT_BLUE_2,
+  },
+  header: {
+    marginVertical: 20,
+  },
+  image: {
+    position: 'relative',
+    width: SCREEN_WIDTH,
+    aspectRatio: 1,
+    marginBottom: '3%',
+  },
+  text: {
+    position: 'relative',
+    backgroundColor: 'white',
+    width: '100%',
+    paddingHorizontal: '2%',
+    paddingVertical: '1%',
+    height: 60,
+  },
+  flex: {
+    flex: 1,
+  },
+  tagFriendsTitle: {
+    color: 'white',
+    fontSize: normalize(12),
+    lineHeight: normalize(16.71),
+    letterSpacing: normalize(0.3),
+    fontWeight: '600',
+  },
+  tagFriendsContainer: {
+    flexDirection: 'row',
+    marginTop: '3%',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+  },
+  taggMoreLabel: {
+    fontWeight: '500',
+    fontSize: normalize(9),
+    lineHeight: normalize(10),
+    letterSpacing: normalize(0.2),
+    color: 'white',
+    textAlign: 'center',
+    marginVertical: '5%',
+  },
+});
+
+export default TagFriendsScreen;
diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts
index 3cdd3128..aac2ddeb 100644
--- a/src/screens/moments/index.ts
+++ b/src/screens/moments/index.ts
@@ -1 +1,2 @@
 export {default as TagSelectionScreen} from './TagSelectionScreen';
+export {default as TagFriendsScreen} from './TagFriendsScreen';