Clean up styling in tagg friends screen

1 files changed, 34 insertions, 51 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index d11f8049..677ceefa 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -10,15 +10,13 @@ import {
   View,
 } from 'react-native';
 import Video from 'react-native-video';
-import {MainStackParams} from 'src/routes';
-import BackArrow from '../../assets/icons/back-arrow.svg';
 import {MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
+import {headerBarOptions, MainStackParams} from '../../routes';
 import {MomentTagType} from '../../types';
 import {
   HeaderHeight,
   isIPhoneX,
-  normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
@@ -48,6 +46,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     setTags(selectedTags ? selectedTags : []);
   }, [selectedTags]);
 
+  useEffect(() => {
+    const title = media.isVideo
+      ? ''
+      : tags.length === 0
+      ? 'Tap on photo to tag friends!'
+      : 'Press and drag to move';
+    navigation.setOptions({
+      ...headerBarOptions('white', title),
+      headerRight: () => (
+        <TouchableOpacity
+          style={styles.buttonContainer}
+          // Altering the opacity style of TouchableOpacity doesn't work,
+          // so the next two lines are needed
+          disabled={tags.length === 0}
+          activeOpacity={tags.length === 0 ? 0 : 1}
+          onPress={handleDone}>
+          <Text
+            style={[
+              styles.shareButtonTitle,
+              // makes the Done buttomn invisible if there are no tags
+              // eslint-disable-next-line react-native/no-inline-styles
+              {opacity: tags.length !== 0 ? 1 : 0},
+            ]}>
+            Done
+          </Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, [tags]);
+
   /*
    * Navigate back to Tag Users Screen, send selected users
    */
@@ -174,49 +202,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         onLayout={(event) => {
           const {y, height} = event.nativeEvent.layout;
           setTopHeight(y + height);
-        }}>
-        <TouchableOpacity
-          onPress={() => {
-            navigation.goBack();
-          }}
-          style={styles.backArrow}>
-          <View style={styles.backArrowContainer}>
-            <BackArrow
-              height={normalize(18)}
-              width={normalize(18)}
-              color={'white'}
-            />
-          </View>
-        </TouchableOpacity>
-        {!media.isVideo ? (
-          <TouchableWithoutFeedback style={styles.headerContainer}>
-            {tags.length === 0 ? (
-              <Text style={styles.header}>Tap on photo to tag friends!</Text>
-            ) : (
-              <Text style={styles.header}>Press and drag to move</Text>
-            )}
-          </TouchableWithoutFeedback>
-        ) : (
-          <View style={styles.headerPlaceholder} />
-        )}
-        <TouchableOpacity
-          style={styles.buttonContainer}
-          // Altering the opacity style of TouchableOpacity doesn't work,
-          // so the next two lines are needed
-          disabled={tags.length === 0}
-          activeOpacity={tags.length === 0 ? 0 : 1}
-          onPress={handleDone}>
-          <Text
-            style={[
-              styles.shareButtonTitle,
-              // makes the Done buttomn invisible if there are no tags
-              // eslint-disable-next-line react-native/no-inline-styles
-              {opacity: tags.length !== 0 ? 1 : 0},
-            ]}>
-            Done
-          </Text>
-        </TouchableOpacity>
-      </View>
+        }}
+      />
       {tags.length !== 0 && !media.isVideo && (
         <MomentTags
           tags={tags}
@@ -258,11 +245,7 @@ const styles = StyleSheet.create({
     zIndex: 9999,
   },
   buttonContainer: {
-    marginTop: isIPhoneX() ? HeaderHeight : '10%',
-    right: 0,
-    zIndex: 9999,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
+    right: 20,
   },
   headerContainer: {
     width: SCREEN_WIDTH,