Merge pull request #469 from shravyaramesh/tma923-image-cropper

[TMA-923/924] Image cropper, Display arbitrary sized image

5 files changed, 73 insertions, 73 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..15926b5a 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -34,6 +34,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const imageRef = useRef(null);
   const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [imageWidth, setImageWidth] = useState<number>(0);
+  const [imageHeight, setImageHeight] = useState<number>(0);
 
   /*
    * Update list of tagged users from route params
@@ -52,6 +54,32 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     });
   };
 
+  /*
+   * Calculating image width and height with respect to it's enclosing view's dimensions
+   */
+  useEffect(() => {
+    if (imageRef && imageRef.current) {
+      Image.getSize(
+        imagePath,
+        (w, h) => {
+          const imageAspectRatio = w / h;
+
+          // aspectRatio: >= 1 [Landscape] [1:1]
+          if (imageAspectRatio >= 1) {
+            setImageWidth(SCREEN_WIDTH);
+            setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+          }
+          // aspectRatio: < 1 [Portrait]
+          else if (imageAspectRatio < 1) {
+            setImageHeight(SCREEN_WIDTH);
+            setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+          }
+        },
+        (err) => console.log(err),
+      );
+    }
+  }, []);
+
   return (
     <SearchBackground>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
@@ -84,9 +112,16 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               }>
               <Image
                 ref={imageRef}
-                style={styles.image}
+                style={[
+                  {
+                    width: imageWidth,
+                    height: imageHeight,
+                    marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                    marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+                  },
+                  styles.image,
+                ]}
                 source={{uri: imagePath}}
-                resizeMode={'cover'}
               />
             </TouchableWithoutFeedback>
             {tags.length !== 0 && (
@@ -131,12 +166,7 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {
-    position: 'relative',
-    width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
-  },
+  image: {zIndex: 0, justifyContent: 'center', alignSelf: 'center'},
   text: {
     position: 'relative',
     backgroundColor: 'white',
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;