Update pod, Adjust display size for iPhone 8 etc

2 files changed, 31 insertions, 28 deletions

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index d668122e..ba0f4456 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -337,9 +337,6 @@ PODS:
     - React-Core
   - react-native-document-picker (5.1.0):
     - React-Core
-  - react-native-image-crop-tools (1.3.6):
-    - React
-    - TOCropViewController (= 2.5.3)
   - react-native-image-picker (4.0.3):
     - React-Core
   - react-native-image-resizer (1.4.4):
@@ -486,7 +483,7 @@ PODS:
     - React
   - RNVectorIcons (7.1.0):
     - React
-  - TOCropViewController (2.5.3)
+  - TOCropViewController (2.6.0)
   - WCPhotoManipulator (2.0.4)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -536,7 +533,6 @@ DEPENDENCIES:
   - react-native-contacts (from `../node_modules/react-native-contacts`)
   - react-native-date-picker (from `../node_modules/react-native-date-picker`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
-  - react-native-image-crop-tools (from `../node_modules/react-native-image-crop-tools`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
@@ -644,8 +640,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-date-picker"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
-  react-native-image-crop-tools:
-    :path: "../node_modules/react-native-image-crop-tools"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
   react-native-image-resizer:
@@ -760,7 +754,6 @@ SPEC CHECKSUMS:
   react-native-contacts: 931baebf460125c5a7bbce1c4521a96c69795123
   react-native-date-picker: 2dfef0fcb6c36d078bc62f5de3ca79eff7f42486
   react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5
-  react-native-image-crop-tools: 5d254e217773e75bfc09b2c372a8b6a027f0628b
   react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15
   react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
@@ -794,11 +787,11 @@ SPEC CHECKSUMS:
   RNShare: 4df87d1791f50a2c7b1d89432fb9bbb7c02a9c9a
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
-  TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6
+  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   WCPhotoManipulator: 45b7be19b75c9edf6d2b44f2f61dbc3673862a8f
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 33ee4093aebb548655b60536fb24108b5ca0d547
+PODFILE CHECKSUM: 506904e1c9d422356d8a7be45ae9115719e4d7be
 
 COCOAPODS: 1.10.1
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e069089c..9fe8d904 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -59,7 +59,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [visible, setVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
 
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
@@ -121,18 +120,23 @@ const MomentPost: React.FC<MomentPostProps> = ({
     [moment.moment_id],
   );
 
+  /*
+   *  Determines if an image is 9:16 to set aspect ratio of current image and
+   * determine if image must be displayed in full screen or not
+   */
   useEffect(() => {
     Image.getSize(
       moment.moment_url,
       (w, h) => {
-        const isFS = Math.abs(w / h - 9 / 16) < 0.01;
         setAspectRatio(w / h);
-        setIsFullScreen(isFS);
       },
       (err) => console.log(err),
     );
   }, []);
 
+  /*
+   * To animate tags display
+   */
   useEffect(() => {
     const fade = async () => {
       Animated.timing(fadeValue, {
@@ -172,17 +176,19 @@ const MomentPost: React.FC<MomentPostProps> = ({
     <>
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
-        <Image
-          source={{uri: moment.moment_url}}
-          style={[
-            styles.image,
-            {
-              height: isFullScreen ? SCREEN_HEIGHT : SCREEN_WIDTH / aspectRatio,
-            },
-          ]}
-          resizeMode={'cover'}
-          ref={imageRef}
-        />
+        <View style={styles.imageContainer}>
+          <Image
+            source={{uri: moment.moment_url}}
+            style={[
+              styles.image,
+              {
+                height: SCREEN_WIDTH / aspectRatio,
+              },
+            ]}
+            resizeMode={'contain'}
+            ref={imageRef}
+          />
+        </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
             <MomentTags
@@ -235,7 +241,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                       renderTextWithMentions({
                         value: moment.caption,
                         styles: styles.captionText,
-                        partTypes: mentionPartTypes('white'),
+                        partTypes: mentionPartTypes('white', 'caption'),
                         onPress: (userLocal: UserType) =>
                           navigateToProfile(
                             state,
@@ -275,10 +281,14 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
 const styles = StyleSheet.create({
   image: {
-    width: SCREEN_WIDTH,
-    marginBottom: '3%',
     zIndex: 0,
-    position: 'absolute',
+  },
+  imageContainer: {
+    height: SCREEN_HEIGHT,
+    width: SCREEN_WIDTH,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    overflow: 'hidden',
   },
   text: {
     marginHorizontal: '5%',