Merge branch 'master' into tma948-video-playback

# Conflicts:
#	ios/Podfile.lock
#	package.json
#	src/components/moments/Moment.tsx
#	src/routes/main/MainStackNavigator.tsx
#	src/screens/moments/TagFriendsScreen.tsx
#	src/screens/profile/CaptionScreen.tsx
#	yarn.lock

3 files changed, 34 insertions, 67 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index d53570cb..364b81a3 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -13,7 +13,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {MentionInput} from 'react-native-controlled-mentions';
+import {MentionInputControlled} from '../../components';
 import {Button, normalize} from 'react-native-elements';
 import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
@@ -237,16 +237,16 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               <Image
                 style={styles.media}
                 source={{uri: mediaUri}}
-                resizeMode={'cover'}
+                resizeMode={'contain'}
               />
             )}
-            <MentionInput
+            <MentionInputControlled
               containerStyle={styles.text}
               placeholder="Write something....."
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes('blue')}
+              partTypes={mentionPartTypes('blue', 'caption')}
             />
             <TouchableOpacity
               onPress={() =>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f8113aba..ca31ad5b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,20 +1,14 @@
-import {BlurView} from '@react-native-community/blur';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard, StyleSheet} from 'react-native';
+import {FlatList, Keyboard} from 'react-native';
 import {useSelector} from 'react-redux';
-import {IndividualMomentTitleBar, MomentPost} from '../../components';
+import {MomentPost, TabsGradient} from '../../components';
 import {AVATAR_DIM} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentPostType} from '../../types';
-import {
-  isIPhoneX,
-  normalize,
-  SCREEN_HEIGHT,
-  StatusBarHeight,
-} from '../../utils';
+import {isIPhoneX} from '../../utils';
 
 /**
  * Individual moment view opened when user clicks on a moment tile
@@ -39,10 +33,7 @@ interface IndividualMomentProps {
   navigation: IndividualMomentNavigationProp;
 }
 
-const IndividualMoment: React.FC<IndividualMomentProps> = ({
-  route,
-  navigation,
-}) => {
+const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   const {
     userXId,
     screenType,
@@ -84,55 +75,32 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         keyboardVisible,
         scrollTo,
       }}>
-      <BlurView
-        blurType="light"
-        blurAmount={30}
-        reducedTransparencyFallbackColor="white"
-        style={styles.contentContainer}>
-        <IndividualMomentTitleBar
-          style={styles.header}
-          close={() => navigation.goBack()}
-          title={moment_category}
-        />
-        <FlatList
-          ref={scrollRef}
-          data={momentData}
-          contentContainerStyle={styles.listContentContainer}
-          renderItem={({item, index}) => (
-            <MomentPost
-              moment={item}
-              userXId={userXId}
-              screenType={screenType}
-              index={index}
-            />
-          )}
-          keyExtractor={(item, _) => item.moment_id}
-          showsVerticalScrollIndicator={false}
-          initialScrollIndex={initialIndex}
-          onScrollToIndexFailed={() => {
-            // TODO: code below does not work, index resets to 0
-            // const wait = new Promise((resolve) => setTimeout(resolve, 500));
-            // wait.then(() => {
-            //   console.log('scrolling to ', initialIndex);
-            //   scrollRef.current?.scrollToIndex({index: initialIndex});
-            // });
-          }}
-        />
-      </BlurView>
+      <FlatList
+        ref={scrollRef}
+        data={momentData}
+        renderItem={({item}) => (
+          <MomentPost
+            key={item.moment_id}
+            moment={item}
+            userXId={userXId}
+            screenType={screenType}
+          />
+        )}
+        keyExtractor={(item, _) => item.moment_id}
+        showsVerticalScrollIndicator={false}
+        initialScrollIndex={initialIndex}
+        onScrollToIndexFailed={(info) => {
+          setTimeout(() => {
+            scrollRef.current?.scrollToIndex({
+              index: info.index,
+            });
+          }, 500);
+        }}
+        pagingEnabled
+      />
+      <TabsGradient />
     </MomentContext.Provider>
   );
 };
-const styles = StyleSheet.create({
-  contentContainer: {
-    paddingTop: StatusBarHeight,
-    flex: 1,
-  },
-  header: {
-    height: normalize(70),
-  },
-  listContentContainer: {
-    paddingBottom: SCREEN_HEIGHT * 0.2,
-  },
-});
 
 export default IndividualMoment;
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 7dfe8ae9..402e5f44 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,9 +48,8 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     React.useState(true);
 
   //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
-  const [commentTapped, setCommentTapped] = useState<
-    CommentType | CommentThreadType | undefined
-  >();
+  const [commentTapped, setCommentTapped] =
+    useState<CommentType | CommentThreadType | undefined>();
 
   useEffect(() => {
     navigation.setOptions({