5 files changed, 36 insertions, 66 deletions
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 03842b0a..84c15f66 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -36,8 +36,9 @@ const NotificationsScreen: React.FC = () => {
   );
   const [refreshing, setRefreshing] = useState(false);
   // used for figuring out which ones are unread
-  const [lastViewed, setLastViewed] =
-    useState<moment.Moment | undefined>(undefined);
+  const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
+    undefined,
+  );
   const {notifications} = useSelector(
     (state: RootState) => state.notifications,
   );
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 570c3776..6956dc0d 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -86,7 +86,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
                 ref={imageRef}
                 style={styles.image}
                 source={{uri: imagePath}}
-                resizeMode={'cover'}
+                resizeMode={'contain'}
               />
             </TouchableWithoutFeedback>
             {tags.length !== 0 && (
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index d5998ac1..4c8da021 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -71,8 +71,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
   const [invalidWithError, setInvalidWithError] = useState(
     'Please enter a valid ',
   );
-  const [autoCapitalize, setAutoCap] =
-    useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none');
+  const [autoCapitalize, setAutoCap] = useState<
+    'none' | 'sentences' | 'words' | 'characters' | undefined
+  >('none');
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 253346d5..75533a9b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -197,7 +197,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <Image
               style={styles.image}
               source={{uri: moment ? moment.moment_url : image?.path}}
-              resizeMode={'cover'}
+              resizeMode={'contain'}
             />
             <MentionInputControlled
               containerStyle={styles.text}
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;