From a249f2d027c9cd5d7f20602cf79ec2265f60a54c Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Fri, 11 Jun 2021 01:59:02 +0900
Subject: Add check for contacts permission

---
 src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index c65d2012..39d98bcc 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -3,6 +3,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {FlatList, RefreshControl, StatusBar, ViewToken} from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
+import {checkPermission} from 'react-native-contacts';
 import {Background, TabsGradient, TaggLoadingIndicator} from '../../components';
 import {SP_PAGE_SIZE} from '../../constants';
 import {getSuggestedPeople} from '../../services/SuggestedPeopleService';
@@ -59,11 +60,17 @@ const SuggestedPeopleScreen: React.FC = () => {
   const stausBarRef = useRef(hideStatusBar);
 
   useEffect(() => {
-    AsyncStorage.getItem('respondedToAccessContacts').then((value) => {
-      if (value === null) {
+    const handlePageChange = async () => {
+      const checkAsync = await AsyncStorage.getItem(
+        'respondedToAccessContacts',
+      );
+      const permission = await checkPermission();
+      if (checkAsync === null && permission !== 'authorized') {
         navigation.navigate('RequestContactsAccess');
       }
-    });
+    };
+
+    handlePageChange();
   }, []);
 
   // loads data and append it to users based on current page
-- 
cgit v1.2.3-70-g09d2


From bc2c093e9342ed8deb98652d1c278417dd6435f3 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 03:53:00 +0900
Subject: Fixed styles for comments vs captions

---
 src/components/comments/AddComment.tsx  |  2 +-
 src/components/common/TaggTypeahead.tsx | 23 ++++++++++++++++++-----
 src/screens/profile/CaptionScreen.tsx   |  2 +-
 src/utils/comments.tsx                  | 11 +++++++----
 4 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c48ce627..db85d525 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -122,7 +122,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes('blue')}
+            partTypes={mentionPartTypes('blue', 'comment')}
             addComment={addComment}
           />
         </View>
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 6686b4d9..6b3df559 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,35 @@
 import React, {Fragment, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, View} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
-const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+type TaggTypeaheadProps = {
+  keyword: string | undefined;
+  component: string | undefined;
+  onSuggestionPress: (suggestion: Suggestion) => void;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
+  component,
   onSuggestionPress,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
   const [height, setHeight] = useState(0);
+  const [margin, setMargin] = useState(0);
+
+  useEffect(() => {
+    if (component === 'comment') {
+      setMargin(-10);
+    }
+  }, [component]);
 
   useEffect(() => {
     if (keyword === '') {
@@ -45,7 +59,7 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
     <View>
       <View style={styles.overlay} />
       <ScrollView
-        style={[styles.container, {top: -height}]}
+        style={[styles.container, {top: -height, margin: margin}]}
         showsVerticalScrollIndicator={false}
         onLayout={(event) => {
           setHeight(event.nativeEvent.layout.height);
@@ -76,7 +90,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    margin: -10,
   },
   overlay: {
     width: SCREEN_WIDTH,
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8bffd82b..05095d16 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -167,7 +167,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes('blue')}
+              partTypes={mentionPartTypes('blue', 'caption')}
             />
             <TouchableOpacity
               onPress={() =>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 5c17cefe..80786b74 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
-  style,
-) => {
+export const mentionPartTypes: (
+  style: 'blue' | 'white',
+  component: 'caption' | 'comment',
+) => PartType[] = (style, component) => {
   return [
     {
       trigger: '@',
-      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      renderSuggestions: (props) => (
+        <TaggTypeahead component={component} {...props} />
+      ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
       textStyle:
-- 
cgit v1.2.3-70-g09d2


From 6ee452c257d388913a1effd817c37bef638bc179 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 12:21:53 +0900
Subject: Fix bug in caption screen of suggestions not disappearing

---
 src/components/comments/AddComment.tsx             |   5 +-
 src/components/comments/CommentTextField.tsx       | 162 +++++++++++++++++++++
 src/components/comments/MentionInputControlled.tsx | 106 ++++++--------
 src/components/comments/index.ts                   |   1 +
 src/screens/profile/CaptionScreen.tsx              |   4 +-
 5 files changed, 210 insertions(+), 68 deletions(-)
 create mode 100644 src/components/comments/CommentTextField.tsx

(limited to 'src/screens')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index db85d525..3c0e9a0a 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -18,8 +18,8 @@ import {RootState} from '../../store/rootreducer';
 import {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {Avatar} from '../common';
-import {MentionInputControlled} from './MentionInputControlled';
+import {CommentTextField} from './CommentTextField';
+import MentionInputControlled from './MentionInputControlled';
 import {normalize} from 'react-native-elements';
 
 export interface AddCommentProps {
@@ -124,6 +124,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             inputRef={ref}
             partTypes={mentionPartTypes('blue', 'comment')}
             addComment={addComment}
+            NewText={CommentTextField}
           />
         </View>
       </View>
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
new file mode 100644
index 00000000..61b489bb
--- /dev/null
+++ b/src/components/comments/CommentTextField.tsx
@@ -0,0 +1,162 @@
+import React, {
+  FC,
+  MutableRefObject,
+  Ref,
+  useMemo,
+  useRef,
+  useState,
+  ReactFragment,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  StyleProp,
+  Text,
+  TextInput,
+  TextInputProps,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {
+  Part,
+  PartType,
+  PatternPartType,
+  MentionPartType,
+  Suggestion,
+} from 'react-native-controlled-mentions/dist/types';
+import {
+  defaultMentionTextStyle,
+  generateValueFromPartsAndChangedText,
+  generateValueWithAddedSuggestion,
+  getMentionPartSuggestionKeywords,
+  isMentionPartType,
+  parseValue,
+} from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from 'react-native-elements';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
+
+type CommentTextFieldProps = {
+  containerStyle: StyleProp<ViewStyle>;
+  validateInput: any;
+  keyboardText: string;
+  partTypes: PartType[];
+  renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment;
+  handleTextInputRef: (ref: TextInput) => null;
+  onChangeInput: (changedText: string) => null;
+  handleSelectionChange: (
+    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
+  ) => null;
+  parts: Part[];
+  addComment: () => any;
+};
+
+const CommentTextField: FC<CommentTextFieldProps> = ({
+  containerStyle,
+  validateInput,
+  keyboardText,
+  partTypes,
+  renderMentionSuggestions,
+  handleTextInputRef,
+  onChangeInput,
+  handleSelectionChange,
+  parts,
+  addComment,
+  ...textInputProps
+}) => {
+  const {avatar} = useSelector((state: RootState) => state.user);
+
+  return (
+    <View style={containerStyle}>
+      {validateInput(keyboardText)
+        ? (
+            partTypes.filter(
+              (one) =>
+                isMentionPartType(one) &&
+                one.renderSuggestions != null &&
+                !one.isBottomMentionSuggestionsRender,
+            ) as MentionPartType[]
+          ).map(renderMentionSuggestions)
+        : null}
+
+      <View style={styles.containerStyle}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <TextInput
+          multiline
+          {...textInputProps}
+          ref={handleTextInputRef}
+          onChangeText={onChangeInput}
+          onSelectionChange={handleSelectionChange}
+          style={styles.text}>
+          <Text>
+            {parts.map(({text, partType, data}, index) =>
+              partType ? (
+                <Text
+                  key={`${index}-${data?.trigger ?? 'pattern'}`}
+                  style={partType.textStyle ?? defaultMentionTextStyle}>
+                  {text}
+                </Text>
+              ) : (
+                <Text key={index}>{text}</Text>
+              ),
+            )}
+          </Text>
+        </TextInput>
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {validateInput(keyboardText)
+        ? (
+            partTypes.filter(
+              (one) =>
+                isMentionPartType(one) &&
+                one.renderSuggestions != null &&
+                one.isBottomMentionSuggestionsRender,
+            ) as MentionPartType[]
+          ).map(renderMentionSuggestions)
+        : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+  },
+  containerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: normalize(40),
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  text: {flex: 1},
+});
+
+export {CommentTextField};
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index c37d2182..50762ac0 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  ReactFragment,
 } from 'react';
 import {
   NativeSyntheticEvent,
@@ -51,7 +52,9 @@ type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
 
   containerStyle?: StyleProp<ViewStyle>;
 
-  addComment?: () => any;
+  addComment?: () => any | null;
+
+  NewText?: FC<any>;
 };
 
 const MentionInputControlled: FC<MentionInputControlledProps> = ({
@@ -68,6 +71,8 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   addComment,
 
+  NewText,
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -76,8 +81,6 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   const [keyboardText, setKeyboardText] = useState<string>('');
 
-  const {avatar} = useSelector((state: RootState) => state.user);
-
   const validRegex = () => {
     if (partTypes.length === 0) {
       return /.*@[^ ]*$/;
@@ -185,7 +188,21 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
     return validRegex().test(testString);
   };
 
-  return (
+  return NewText ? (
+    <NewText
+      {...textInputProps}
+      containerStyle={containerStyle}
+      validateInput={validateInput}
+      keyboardText={keyboardText}
+      partTypes={partTypes}
+      renderMentionSuggestions={renderMentionSuggestions}
+      handleTextInputRef={handleTextInputRef}
+      onChangeInput={onChangeInput}
+      handleSelectionChange={handleSelectionChange}
+      parts={parts}
+      addComment={addComment}
+    />
+  ) : (
     <View style={containerStyle}>
       {validateInput(keyboardText)
         ? (
@@ -198,35 +215,26 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
           ).map(renderMentionSuggestions)
         : null}
 
-      <View style={styles.containerStyle}>
-        <Avatar style={styles.avatar} uri={avatar} />
-        <TextInput
-          multiline
-          {...textInputProps}
-          ref={handleTextInputRef}
-          onChangeText={onChangeInput}
-          onSelectionChange={handleSelectionChange}
-          style={styles.text}>
-          <Text>
-            {parts.map(({text, partType, data}, index) =>
-              partType ? (
-                <Text
-                  key={`${index}-${data?.trigger ?? 'pattern'}`}
-                  style={partType.textStyle ?? defaultMentionTextStyle}>
-                  {text}
-                </Text>
-              ) : (
-                <Text key={index}>{text}</Text>
-              ),
-            )}
-          </Text>
-        </TextInput>
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
-      </View>
+      <TextInput
+        multiline
+        {...textInputProps}
+        ref={handleTextInputRef}
+        onChangeText={onChangeInput}
+        onSelectionChange={handleSelectionChange}>
+        <Text>
+          {parts.map(({text, partType, data}, index) =>
+            partType ? (
+              <Text
+                key={`${index}-${data?.trigger ?? 'pattern'}`}
+                style={partType.textStyle ?? defaultMentionTextStyle}>
+                {text}
+              </Text>
+            ) : (
+              <Text key={index}>{text}</Text>
+            ),
+          )}
+        </Text>
+      </TextInput>
 
       {validateInput(keyboardText)
         ? (
@@ -242,34 +250,4 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  avatar: {
-    height: 35,
-    width: 35,
-    borderRadius: 30,
-    marginRight: 10,
-    marginLeft: '3%',
-    marginVertical: '2%',
-  },
-  containerStyle: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: normalize(40),
-  },
-  submitButton: {
-    height: 35,
-    width: 35,
-    backgroundColor: TAGG_LIGHT_BLUE,
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
-  text: {flex: 1},
-});
-
-export {MentionInputControlled};
+export default MentionInputControlled;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 6293f799..653f594c 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,4 @@
 export {default as CommentsCount} from '../comments/CommentsCount';
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
+export {default as MentionInputControlled} from './MentionInputControlled';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 05095d16..755c668b 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 {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
@@ -161,7 +161,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               source={{uri: image.path}}
               resizeMode={'cover'}
             />
-            <MentionInput
+            <MentionInputControlled
               containerStyle={styles.text}
               placeholder="Write something....."
               placeholderTextColor="gray"
-- 
cgit v1.2.3-70-g09d2


From f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 16 Jun 2021 01:58:59 -0700
Subject: image cropper dump

---
 ios/Podfile                              |  1 +
 ios/Podfile.lock                         | 37 +++++++++----
 package.json                             |  4 +-
 src/components/comments/ImageCropper.tsx | 94 ++++++++++++++++++++++++++++++++
 src/components/comments/index.ts         |  1 +
 src/components/moments/Moment.tsx        | 10 +---
 src/routes/main/MainStackNavigator.tsx   | 10 +++-
 src/routes/main/MainStackScreen.tsx      |  8 +++
 src/screens/profile/CaptionScreen.tsx    |  2 +-
 yarn.lock                                | 10 ++++
 10 files changed, 155 insertions(+), 22 deletions(-)
 create mode 100644 src/components/comments/ImageCropper.tsx

(limited to 'src/screens')

diff --git a/ios/Podfile b/ios/Podfile
index 4eca4100..58c388c2 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -5,6 +5,7 @@ platform :ios, '10.0'
 
 target 'Frontend' do
   config = use_native_modules!
+  pod 'react-native-image-crop-tools', :path => '../node_modules/react-native-image-crop-tools'
   use_react_native!(:path => config["reactNativePath"])
 
   target 'FrontendTests' do
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 7d6ce3a8..eec8a988 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -134,24 +134,24 @@ PODS:
     - GoogleUtilities/Environment (~> 7.2)
     - nanopb (~> 2.30907.0)
     - PromisesObjC (~> 1.2)
-  - GoogleUtilities/AppDelegateSwizzler (7.4.0):
+  - GoogleUtilities/AppDelegateSwizzler (7.4.1):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
     - GoogleUtilities/Network
-  - GoogleUtilities/Environment (7.4.0):
+  - GoogleUtilities/Environment (7.4.1):
     - PromisesObjC (~> 1.2)
-  - GoogleUtilities/Logger (7.4.0):
+  - GoogleUtilities/Logger (7.4.1):
     - GoogleUtilities/Environment
-  - GoogleUtilities/MethodSwizzler (7.4.0):
+  - GoogleUtilities/MethodSwizzler (7.4.1):
     - GoogleUtilities/Logger
-  - GoogleUtilities/Network (7.4.0):
+  - GoogleUtilities/Network (7.4.1):
     - GoogleUtilities/Logger
     - "GoogleUtilities/NSData+zlib"
     - GoogleUtilities/Reachability
-  - "GoogleUtilities/NSData+zlib (7.4.0)"
-  - GoogleUtilities/Reachability (7.4.0):
+  - "GoogleUtilities/NSData+zlib (7.4.1)"
+  - GoogleUtilities/Reachability (7.4.1):
     - GoogleUtilities/Logger
-  - GoogleUtilities/UserDefaults (7.4.0):
+  - GoogleUtilities/UserDefaults (7.4.1):
     - GoogleUtilities/Logger
   - libevent (2.1.12)
   - nanopb (2.30907.0):
@@ -337,6 +337,11 @@ 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):
     - React-Core
   - react-native-netinfo (6.0.0):
@@ -478,7 +483,7 @@ PODS:
     - React
   - RNVectorIcons (7.1.0):
     - React
-  - TOCropViewController (2.6.0)
+  - TOCropViewController (2.5.3)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -527,6 +532,8 @@ 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`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -631,6 +638,10 @@ 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:
     :path: "../node_modules/react-native-image-resizer"
   react-native-netinfo:
@@ -721,7 +732,7 @@ SPEC CHECKSUMS:
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   GoogleAppMeasurement: c542a2feaac9ab98fd074e8f1a02c3585bbfbd47
   GoogleDataTransport: 8b0e733ea77c9218778e5a9e34ba9508b8328939
-  GoogleUtilities: 284cddc7fffc14ae1907efb6f78ab95c1fccaedc
+  GoogleUtilities: f8a43108b38a68eebe8b3540e1f4f2d28843ce20
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   nanopb: 59221d7f958fb711001e6a449489542d92ae113e
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
@@ -741,6 +752,8 @@ 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
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
@@ -772,10 +785,10 @@ SPEC CHECKSUMS:
   RNShare: 4df87d1791f50a2c7b1d89432fb9bbb7c02a9c9a
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
-  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
+  TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: e24412577971b52c81c348785bf01cb915155d6d
+PODFILE CHECKSUM: 33ee4093aebb548655b60536fb24108b5ca0d547
 
 COCOAPODS: 1.10.1
diff --git a/package.json b/package.json
index ea8c946a..5b07e8b3 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-hyperlink": "^0.0.19",
     "react-native-image-crop-picker": "^0.36.0",
+    "react-native-image-crop-tools": "^1.3.6",
+    "react-native-image-picker": "^4.0.3",
     "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.5.0",
     "react-native-linear-gradient": "^2.5.6",
@@ -105,4 +107,4 @@
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/comments/ImageCropper.tsx b/src/components/comments/ImageCropper.tsx
new file mode 100644
index 00000000..7d4eabff
--- /dev/null
+++ b/src/components/comments/ImageCropper.tsx
@@ -0,0 +1,94 @@
+import {RouteProp} from '@react-navigation/core';
+import {useFocusEffect} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useCallback, useRef, useState} from 'react';
+import {Button, StatusBar, View} from 'react-native';
+import {CropView} from 'react-native-image-crop-tools';
+import {MainStackParams} from '../../routes';
+import {HeaderHeight} from '../../utils';
+
+type ImageCropperRouteProps = RouteProp<MainStackParams, 'ImageCropper'>;
+
+type ImageCropperNavigationProps = StackNavigationProp<
+  MainStackParams,
+  'ImageCropper'
+>;
+
+interface ImageCropperProps {
+  route: ImageCropperRouteProps;
+  navigation: ImageCropperNavigationProps;
+}
+
+const ImageCropper: React.FC<ImageCropperProps> = ({route, navigation}) => {
+  const {image, title, screenType} = route.params;
+  const cropViewRef = useRef();
+  const aspectRatios = [
+    {width: 9, height: 16},
+    {width: 4, height: 5},
+    {width: 1, height: 1},
+  ];
+  const [aspectRatioIndex, setAspectRatioIndex] = useState<number>(0);
+  //Function to get the parent TabBar navigator and setting the option for this screen.
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <View
+        style={{
+          flex: 1,
+          paddingTop: HeaderHeight,
+        }}>
+        <Button
+          title={'Toggle Ratio'}
+          onPress={() => {
+            setAspectRatioIndex(
+              aspectRatioIndex < 2 ? aspectRatioIndex + 1 : 0,
+            );
+          }}
+        />
+        <Button
+          title={'Done'}
+          onPress={() => {
+            if (cropViewRef && cropViewRef.current) {
+              cropViewRef.current.saveImage(100);
+            }
+          }}
+        />
+        {image !== undefined && (
+          <CropView
+            sourceUrl={image.sourceURL ? image.sourceURL : ''}
+            style={{
+              position: 'relative',
+              flex: 1,
+              marginBottom: '3%',
+            }}
+            onImageCrop={(res) => {
+              const arr = res.uri.split('/');
+              navigation.navigate('CaptionScreen', {
+                screenType,
+                title,
+                image: {filename: arr[arr.length - 1], path: res.uri},
+              });
+            }}
+            keepAspectRatio
+            aspectRatio={aspectRatios[aspectRatioIndex]}
+            ref={cropViewRef}
+          />
+        )}
+      </View>
+    </>
+  );
+};
+
+export default ImageCropper;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index ebd93844..d715714a 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,2 +1,3 @@
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
+export {default as ImageCropper} from './ImageCropper';
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..1c850b29 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
 import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD} from '../../constants/strings';
@@ -52,15 +52,11 @@ const Moment: React.FC<MomentProps> = ({
         'Screenshots',
         'UserLibrary',
       ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Upload a moment',
-      mediaType: 'photo',
+      mediaType: 'any',
     })
       .then((picture) => {
         if ('path' in picture) {
-          navigation.navigate('CaptionScreen', {
+          navigation.navigate('ImageCropper', {
             screenType,
             title: title,
             image: picture,
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 8fce5e2f..757d89f7 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -38,7 +38,10 @@ export type MainStackParams = {
   };
   CaptionScreen: {
     title?: string;
-    image?: Image;
+    image?: {
+      filename: string;
+      path: string;
+    };
     screenType: ScreenType;
     selectedTags?: MomentTagType[];
     moment?: MomentType;
@@ -107,6 +110,11 @@ export type MainStackParams = {
   ChatList: undefined;
   Chat: undefined;
   NewChatModal: undefined;
+  ImageCropper: {
+    image: Image;
+    screenType: ScreenType;
+    title: string;
+  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 3be2ff28..cb23f9fc 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -3,6 +3,7 @@ import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
+import {ImageCropper} from '../../components/comments';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
@@ -325,6 +326,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             gestureEnabled: false,
           }}
         />
+        <MainStack.Screen
+          name="ImageCropper"
+          component={ImageCropper}
+          options={{
+            gestureEnabled: false,
+          }}
+        />
       </MainStack.Navigator>
     );
   };
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9e1b4674..74f774b9 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'}
             />
             <MentionInput
               containerStyle={styles.text}
diff --git a/yarn.lock b/yarn.lock
index 9c1ebdf8..c4c5ec2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6445,6 +6445,16 @@ react-native-image-crop-picker@^0.36.0:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.2.tgz#fcb35c1a12d805bedbb6d94a87078e86a6c9b49f"
   integrity sha512-cTauoEHHzx14ZHA7Pt65e7RVnbn1WRYQz2ufTZp9/05EtNDrdsXwNhgtXdWVFbOhYB8qgUFQjy2NelkBOHIH3g==
 
+react-native-image-crop-tools@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-tools/-/react-native-image-crop-tools-1.3.6.tgz#c7060c61f6e81b64b9f279b5e9b2a42f35209d1a"
+  integrity sha512-MXz+4k6SHwbvRHfifws9Jhd//rEQD5NC/2SKy80cRbc13XsWDA9bkIY396HCQrpwBT8zXLF7DjyTSEq+GqbBMg==
+
+react-native-image-picker@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.3.tgz#dd8d393e0c57321688885c74b52244ad36e532d6"
+  integrity sha512-S4a1jE4fAPDzmah/7OVTEAXGz1/wlGyClU+spygmek5rVLERR5BgwnkX3tLP/UvMQbfdPZNUbnH0hEe7su2AZg==
+
 react-native-image-resizer@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/react-native-image-resizer/-/react-native-image-resizer-1.4.4.tgz#75eee65580de509ada674669d13e4d236caea2d5"
-- 
cgit v1.2.3-70-g09d2


From 41a9ecf350ccc1567e7cbf9c0a3413565d2397f7 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:11:49 +0900
Subject: Fix issue with background messing up appearance of AddComment
 elsewhere

---
 src/components/comments/AddComment.tsx          | 2 +-
 src/components/moments/MomentCommentPreview.tsx | 2 +-
 src/screens/profile/MomentCommentsScreen.tsx    | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 01325475..4a1822a3 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -130,7 +130,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f7f7f7',
+    // backgroundColor: '#f7f7f7',
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index f6b9d75b..d4729888 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -9,7 +9,7 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 
 interface MomentCommentPreviewProps {
   momentId: string;
-  commentsCount: number | null;
+  commentsCount: number;
   commentPreview: MomentCommentPreviewType | null;
   screenType: ScreenType;
 }
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({
-- 
cgit v1.2.3-70-g09d2


From 67fcb0b963a9f38451a382803bcfaa5fb001cded Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 17 Jun 2021 23:04:57 -0700
Subject: Revamp Moment Post View

---
 src/components/moments/MomentPost.tsx           | 352 ++++++++++++++++++++++--
 src/components/profile/MomentMoreInfoDrawer.tsx |   7 -
 src/screens/profile/IndividualMoment.tsx        |  55 ++--
 3 files changed, 349 insertions(+), 65 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 60cb16fa..8a3cfacb 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,12 +1,42 @@
-import React, {useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
-import {MomentPostContent, MomentPostHeader} from '.';
+import {useNavigation} from '@react-navigation/native';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {EasingNode} from 'react-native-reanimated';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {headerBarOptions} from '../../routes';
+import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
+import {loadUserMoments} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {MomentPostType, MomentTagType, ScreenType} from '../../types';
-import {normalize, SCREEN_HEIGHT} from '../../utils';
-
+import {
+  MomentCommentPreviewType,
+  MomentPostType,
+  MomentTagType,
+  ScreenType,
+  UserType,
+} from '../../types';
+import {
+  getLoggedInUserAsProfilePreview,
+  getTimePosted,
+  HeaderHeight,
+  navigateToProfile,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+import {AddComment} from '../comments';
+import CommentsCount from '../comments/CommentsCount';
+import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
 interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
@@ -24,15 +54,13 @@ const MomentPost: React.FC<MomentPostProps> = ({
     (state: RootState) => state.user.user,
   );
 
-  const {
-    user: {username},
-  } = useSelector((state: RootState) =>
+  const {user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [momentTagId, setMomentTagId] = useState<string>('');
 
-  const isOwnProfile = username === loggedInUsername;
+  const isOwnProfile = user.username === loggedInUsername;
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -71,18 +99,201 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   };
 
-  return (
-    <>
-      <MomentPostHeader
-        style={styles.postHeader}
+  // const [tags, setTags] = useState<MomentTagType[]>(momentTags);
+  const state: RootState = useStore().getState();
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
+  const imageRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
+    new Animated.Value(0),
+  );
+  const [commentCount, setCommentCount] = useState<number>(
+    moment.comments_count,
+  );
+  const [commentPreview, setCommentPreview] =
+    useState<MomentCommentPreviewType | null>(moment.comment_preview);
+  const {keyboardVisible, scrollTo} = useContext(MomentContext);
+  const [hideText, setHideText] = useState(false);
+
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+  const [aspectRatio, setAspectRatio] = useState<number>(1);
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  useEffect(
+    () =>
+      navigation.setOptions({
+        ...headerBarOptions('white', ''),
+        headerTitle: () => (
+          <View
+            style={{
+              flex: 1,
+              width: SCREEN_WIDTH * 0.6,
+              flexDirection: 'row',
+              justifyContent: 'flex-end',
+              marginVertical: '2%',
+            }}>
+            <View
+              style={{
+                width: '80%',
+                position: 'absolute',
+                left: '10%',
+                right: '10%',
+                height: normalize(70),
+              }}>
+              <Text
+                style={[
+                  {
+                    textAlign: 'center',
+                    color: 'white',
+                    fontSize: normalize(18),
+                    fontWeight: '700',
+                    lineHeight: normalize(21.48),
+                    letterSpacing: normalize(1.3),
+                  },
+                  {
+                    fontSize:
+                      moment.moment_category.length > 18
+                        ? normalize(14)
+                        : normalize(16),
+                  },
+                ]}>
+                {moment.moment_category}
+              </Text>
+            </View>
+          </View>
+        ),
+      }),
+    [moment.moment_id],
+  );
+
+  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),
+    );
+  }, []);
+
+  useEffect(() => {
+    const fade = async () => {
+      Animated.timing(fadeValue, {
+        toValue: 1,
+        duration: 250,
+        easing: EasingNode.linear,
+      }).start();
+    };
+    fade();
+  }, [fadeValue]);
+
+  useEffect(() => {
+    if (!keyboardVisible && hideText) {
+      setHideText(false);
+    }
+  }, [keyboardVisible, hideText]);
+
+  const tagsIcon = useMemo(() => {
+    tags.length > 0 && (
+      <Image
+        source={require('../../assets/icons/tag_indicate.png')}
+        style={styles.tagIcon}
+      />
+    );
+  }, [tags]);
+
+  const MomentUserPreview = () => (
+    <TouchableOpacity
+      onPress={() =>
+        navigateToProfile(state, dispatch, navigation, screenType, user)
+      }
+      style={styles.header}>
+      <TaggAvatar
+        style={styles.avatar}
         userXId={userXId}
         screenType={screenType}
-        username={isOwnProfile ? loggedInUsername : username}
-        momentTagId={momentTagId}
-        removeTag={removeTag}
-        moment={moment}
-        tags={tags}
+        editable={false}
+      />
+      <Text style={styles.headerText}>{user.username}</Text>
+    </TouchableOpacity>
+  );
+
+  const TagsIcon = () => {
+    return tags.length === 0 ? (
+      <Image
+        source={require('../../assets/icons/tag_indicate.png')}
+        style={styles.tagIcon}
       />
+    ) : (
+      <React.Fragment />
+    );
+  };
+
+  const [verticalOffset, setVerticalOffset] = useState<number>(0);
+  return (
+    <>
+      <StatusBar barStyle={'light-content'} />
+      <View
+        style={{
+          backgroundColor: 'black',
+          width: SCREEN_WIDTH,
+          height: SCREEN_HEIGHT,
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}>
+        <Image
+          source={{uri: moment.moment_url}}
+          style={[
+            styles.image,
+            {
+              height: isFullScreen ? SCREEN_HEIGHT : SCREEN_WIDTH / aspectRatio,
+            },
+          ]}
+          resizeMode={'cover'}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            width: SCREEN_WIDTH,
+            height: SCREEN_HEIGHT,
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            paddingBottom: '24%',
+          }}>
+          <View
+            style={{
+              paddingTop: HeaderHeight,
+              alignSelf: 'flex-end',
+              paddingRight: '8%',
+            }}>
+            <MomentMoreInfoDrawer
+              isOpen={drawerVisible}
+              setIsOpen={setDrawerVisible}
+              isOwnProfile={isOwnProfile}
+              momentTagId={momentTagId}
+              removeTag={removeTag}
+              dismissScreenAndUpdate={() => {
+                dispatch(loadUserMoments(loggedInUserId));
+                navigation.goBack();
+              }}
+              screenType={screenType}
+              moment={moment}
+              tags={tags}
+            />
+          </View>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={-20}>
+            <View
+              style={{
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+              }}>
+              <TagsIcon />
               <View
                 style={{
                   position: 'absolute',
@@ -91,6 +302,51 @@ const MomentPost: React.FC<MomentPostProps> = ({
                 }}>
                 <CommentsCount moment={moment} screenType={screenType} />
               </View>
+              <MomentUserPreview />
+              {!hideText && (
+                <>
+                  {moment.caption !== '' &&
+                    renderTextWithMentions({
+                      value: moment.caption,
+                      styles: styles.captionText,
+                      partTypes: mentionPartTypes('white'),
+                      onPress: (user: UserType) =>
+                        navigateToProfile(
+                          state,
+                          dispatch,
+                          navigation,
+                          screenType,
+                          user,
+                        ),
+                    })}
+                </>
+              )}
+              <View>
+                <AddComment
+                  placeholderText={'Add a comment here!'}
+                  momentId={moment.moment_id}
+                  callback={(message) => {
+                    setCommentPreview({
+                      commenter: getLoggedInUserAsProfilePreview(state),
+                      comment: message,
+                    });
+                    setCommentCount(commentCount + 1);
+                  }}
+                  onFocus={() => {
+                    setHideText(true);
+                    setVerticalOffset(SCREEN_HEIGHT * 0.05);
+                  }}
+                  isKeyboardAvoiding={false}
+                  theme={'dark'}
+                />
+                <Text style={styles.text}>
+                  {getTimePosted(moment.date_created)}
+                </Text>
+              </View>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </View>
     </>
   );
 };
@@ -98,9 +354,63 @@ const MomentPost: React.FC<MomentPostProps> = ({
 const styles = StyleSheet.create({
   postHeader: {},
   postContent: {
-    minHeight: SCREEN_HEIGHT * 0.8,
+    // minHeight: SCREEN_HEIGHT * 0.8,
     paddingBottom: normalize(20),
   },
+  image: {
+    width: SCREEN_WIDTH,
+    marginBottom: '3%',
+    zIndex: 0,
+    position: 'absolute',
+  },
+  text: {
+    marginHorizontal: '5%',
+    color: 'white',
+    fontWeight: '500',
+    textAlign: 'right',
+    marginTop: 5,
+  },
+  captionText: {
+    position: 'relative',
+    marginHorizontal: '5%',
+    color: '#ffffff',
+    fontWeight: '500',
+    fontSize: normalize(13),
+    lineHeight: normalize(15.51),
+    letterSpacing: normalize(0.6),
+    marginBottom: normalize(5),
+    width: SCREEN_WIDTH * 0.79,
+  },
+  tapTag: {
+    position: 'absolute',
+    backgroundColor: 'red',
+    width: 100,
+    height: 100,
+  },
+  tagIcon: {
+    width: normalize(30),
+    height: normalize(30),
+    bottom: normalize(20),
+    left: '5%',
+  },
+  avatar: {
+    width: 48,
+    aspectRatio: 1,
+    borderRadius: 100,
+    marginLeft: '3%',
+  },
+  headerText: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: 'white',
+    paddingHorizontal: '3%',
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: normalize(15),
+  },
 });
 
 export default MomentPost;
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a796ffd8..a8adcfda 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -169,7 +169,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   return (
     <>
       <TouchableOpacity
-        style={styles.icon}
         onPress={() => {
           setIsOpen(true);
         }}>
@@ -184,10 +183,4 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   );
 };
 
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: '3%',
-  },
-});
-
 export default MomentMoreInfoDrawer;
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f8113aba..4088895a 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,10 +1,9 @@
-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 {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';
@@ -84,41 +83,23 @@ 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, index}) => (
+          <MomentPost
+            moment={item}
+            userXId={userXId}
+            screenType={screenType}
+            index={index}
+          />
+        )}
+        keyExtractor={(item, _) => item.moment_id}
+        showsVerticalScrollIndicator={false}
+        initialScrollIndex={initialIndex}
+        pagingEnabled
+      />
+      <TabsGradient />
     </MomentContext.Provider>
   );
 };
-- 
cgit v1.2.3-70-g09d2


From d5915af9c1f13f7d7d62df0b215e94792ab0538a Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Sun, 20 Jun 2021 22:25:26 -0700
Subject: Contain image on tag friends screen

---
 src/screens/moments/TagFriendsScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/screens')

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 && (
-- 
cgit v1.2.3-70-g09d2


From 17af6485eb251c979430a7953acac34316f03cb4 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Mon, 21 Jun 2021 13:51:42 -0700
Subject: Fix double click crash bug

---
 src/screens/profile/IndividualMoment.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 4088895a..2ad22db4 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -88,32 +88,27 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         data={momentData}
         renderItem={({item, index}) => (
           <MomentPost
+            key={item.moment_id}
             moment={item}
             userXId={userXId}
             screenType={screenType}
-            index={index}
           />
         )}
         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;
-- 
cgit v1.2.3-70-g09d2


From 706a6c77971a10d8d45d1b3e189eadc28f89841e Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Tue, 22 Jun 2021 08:44:12 -0700
Subject: Fix lint errors

---
 src/components/comments/CommentsCount.tsx       | 39 +++++++++++++------------
 src/components/comments/ZoomInCropper.tsx       |  3 +-
 src/components/moments/MomentPost.tsx           |  4 +--
 src/components/profile/MomentMoreInfoDrawer.tsx |  1 -
 src/screens/main/NotificationsScreen.tsx        |  5 ++--
 src/screens/onboarding/BasicInfoOnboarding.tsx  |  5 ++--
 src/screens/profile/IndividualMoment.tsx        | 16 +++-------
 7 files changed, 34 insertions(+), 39 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index cb30fe76..90514193 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/core';
 import React from 'react';
-import {Text} from 'react-native';
+import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
 import {MomentPostType, ScreenType} from '../../types';
@@ -15,12 +15,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
-      style={{
-        minWidth: 50,
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
+      style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
           moment_id: moment.moment_id,
@@ -28,20 +23,26 @@ const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text
-        style={{
-          fontWeight: '500',
-          fontSize: normalize(11),
-          lineHeight: normalize(13),
-          letterSpacing: normalize(0.05),
-          textAlign: 'center',
-          color: 'white',
-          marginTop: normalize(5),
-        }}>
-        {moment.comments_count}
-      </Text>
+      <Text style={styles.count}>{moment.comments_count}</Text>
     </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  countContainer: {
+    minWidth: 50,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  count: {
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(13),
+    letterSpacing: normalize(0.05),
+    textAlign: 'center',
+    color: 'white',
+    marginTop: normalize(5),
+  },
+});
 export default CommentsCount;
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index f3fb5c05..25301e6a 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -130,7 +130,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <ImageZoom
-        style={{backgroundColor: 'black'}}
+        style={styles.zoomView}
         cropWidth={SCREEN_WIDTH}
         cropHeight={SCREEN_HEIGHT}
         imageWidth={SCREEN_WIDTH}
@@ -180,4 +180,5 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
     textAlign: 'center',
   },
+  zoomView: {backgroundColor: 'black'},
 });
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 26490315..e069089c 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -236,13 +236,13 @@ const MomentPost: React.FC<MomentPostProps> = ({
                         value: moment.caption,
                         styles: styles.captionText,
                         partTypes: mentionPartTypes('white'),
-                        onPress: (user: UserType) =>
+                        onPress: (userLocal: UserType) =>
                           navigateToProfile(
                             state,
                             dispatch,
                             navigation,
                             screenType,
-                            user,
+                            userLocal,
                           ),
                       })}
                   </>
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a8adcfda..dc4ebe32 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -3,7 +3,6 @@ import React, {useEffect, useState} from 'react';
 import {
   Alert,
   GestureResponderEvent,
-  StyleSheet,
   TextStyle,
   TouchableOpacity,
   ViewProps,
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/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/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 2ad22db4..ca31ad5b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,19 +1,14 @@
 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 {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
@@ -38,10 +33,7 @@ interface IndividualMomentProps {
   navigation: IndividualMomentNavigationProp;
 }
 
-const IndividualMoment: React.FC<IndividualMomentProps> = ({
-  route,
-  navigation,
-}) => {
+const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   const {
     userXId,
     screenType,
@@ -86,7 +78,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
       <FlatList
         ref={scrollRef}
         data={momentData}
-        renderItem={({item, index}) => (
+        renderItem={({item}) => (
           <MomentPost
             key={item.moment_id}
             moment={item}
-- 
cgit v1.2.3-70-g09d2


From b3d4c64c8a2d742455b5f96cc9e4b7b8973e10e9 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 23 Jun 2021 07:02:44 -0700
Subject: Fix moment tags crash issue on tag friends screen

---
 src/screens/moments/TagFriendsScreen.tsx | 46 ++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 8 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 6956dc0d..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={'contain'}
               />
             </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',
-- 
cgit v1.2.3-70-g09d2


From 63bef47bffd2893f3013a02f71383c9c0a27881f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:20:15 -0400
Subject: Fix moment comment count, Add video support

---
 src/components/comments/CommentsCount.tsx | 15 ++++++----
 src/components/moments/MomentPost.tsx     | 47 ++++++++++++++++++++++---------
 src/constants/strings.ts                  |  2 +-
 src/screens/moments/TagFriendsScreen.tsx  |  6 ----
 4 files changed, 45 insertions(+), 25 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 90514193..d4a93bdd 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -3,27 +3,32 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
-import {MomentPostType, ScreenType} from '../../types';
+import {ScreenType} from '../../types';
 import {normalize} from '../../utils';
 
 interface CommentsCountProps {
-  moment: MomentPostType;
+  momentId: string;
+  count: number;
   screenType: ScreenType;
 }
 
-const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  momentId,
+  count,
+  screenType,
+}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
-          moment_id: moment.moment_id,
+          moment_id: momentId,
           screenType,
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text style={styles.count}>{moment.comments_count}</Text>
+      <Text style={styles.count}>{count}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..f030c41e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,6 +12,7 @@ import {
   View,
 } from 'react-native';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
@@ -72,6 +73,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
   const imageRef = useRef(null);
   const {keyboardVisible} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -178,17 +185,26 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
-          <Image
-            source={{uri: moment.moment_url}}
-            style={[
-              styles.image,
-              {
-                height: SCREEN_WIDTH / aspectRatio,
-              },
-            ]}
-            resizeMode={'contain'}
-            ref={imageRef}
-          />
+          {isVideo ? (
+            <View ref={imageRef}>
+              <Video
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={styles.media}
+                repeat={true}
+                resizeMode={'contain'}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,7 +249,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   />
                 )}
                 <View style={styles.commentsCountContainer}>
-                  <CommentsCount moment={moment} screenType={screenType} />
+                  <CommentsCount
+                    momentId={moment.moment_id}
+                    count={commentCount}
+                    screenType={screenType}
+                  />
                 </View>
                 <MomentPosterPreview />
                 {!hideText && (
@@ -281,8 +301,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index a1064f49..112bc546 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -77,7 +77,7 @@ You've been tagged by ${invitee}. Follow the instructions below to skip the line
 Sign up and use this code to get in: ${inviteCode}\n ${APP_STORE_LINK}`;
 export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
-export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
+export const SUCCESS_PIC_UPLOAD = 'Beautiful, the Moment was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
 export const UP_TO_DATE = 'Up-to-Date!';
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index db7456bc..69118660 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -108,12 +108,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               />
             </View>
           ) : (
-            // <Image
-            //   ref={imageRef}
-            //   style={styles.media}
-            //   source={{uri: media.uri}}
-            //   resizeMode={'cover'}
-            // />
             <Image
               ref={imageRef}
               style={[
-- 
cgit v1.2.3-70-g09d2


From e4d73a338d7cffd92cc40e44629cc035337d6e3a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 24 Jun 2021 18:43:13 -0400
Subject: Fix tagg layout issue, Cleanup css

---
 src/screens/moments/TagFriendsScreen.tsx | 88 +++++++++++++++-----------------
 1 file changed, 42 insertions(+), 46 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 69118660..81415437 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -47,26 +47,30 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     });
   };
 
+  const setMediaDimensions = (width: number, height: number) => {
+    const imageAspectRatio = width / height;
+
+    // aspectRatio: >= 1 [Landscape] [1:1]
+    if (imageAspectRatio >= 1) {
+      setImageWidth(SCREEN_WIDTH);
+      setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+    }
+    // aspectRatio: < 1 [Portrait]
+    if (imageAspectRatio < 1) {
+      setImageHeight(SCREEN_WIDTH);
+      setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+    }
+  };
+
   /*
-   * Calculating image width and height with respect to it's enclosing view's dimensions
+   * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
   useEffect(() => {
     if (imageRef && imageRef.current) {
       Image.getSize(
         media.uri,
         (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);
-          }
+          setMediaDimensions(w, h);
         },
         (err) => console.log(err),
       );
@@ -100,25 +104,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             })
           }>
           {media.isVideo ? (
-            <View style={styles.media} ref={imageRef}>
+            <View
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
+              ref={imageRef}>
               <Video
-                style={styles.media}
+                style={{
+                  width: imageWidth,
+                  height: imageHeight,
+                }}
                 source={{uri: media.uri}}
                 repeat={true}
+                onLoad={(response) => {
+                  const {width, height} = response.naturalSize;
+                  setMediaDimensions(width, height);
+                }}
               />
             </View>
           ) : (
             <Image
               ref={imageRef}
-              style={[
-                {
-                  width: imageWidth,
-                  height: imageHeight,
-                  marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
-                  marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
-                },
-                styles.media,
-              ]}
+              style={{
+                width: imageWidth,
+                height: imageHeight,
+                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+              }}
               source={{uri: media.uri}}
             />
           )}
@@ -162,29 +177,10 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  // media: {
-  //   position: 'relative',
-  //   width: SCREEN_WIDTH,
-  //   aspectRatio: 1,
-  //   marginBottom: '3%',
-  // },
-  media: {
-    zIndex: 0,
-    justifyContent: 'center',
-    alignSelf: 'center',
-  },
-  text: {
-    position: 'relative',
-    backgroundColor: 'white',
-    width: '100%',
-    paddingHorizontal: '2%',
-    paddingVertical: '1%',
-    height: 60,
-  },
-  flex: {
-    flex: 1,
+  footerContainer: {
+    marginHorizontal: '5%',
+    marginTop: '3%',
   },
-  footerContainer: {marginHorizontal: '5%', marginTop: '3%'},
 });
 
 export default TagFriendsScreen;
-- 
cgit v1.2.3-70-g09d2


From 8198e4349dd589be2fbc9fb42aefaa8c5915bef5 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 16:26:19 -0400
Subject: Fix video dimension in tagging screen

---
 src/components/moments/Moment.tsx        | 14 ++++++++------
 src/screens/moments/TagFriendsScreen.tsx | 11 ++++++++---
 src/services/MomentService.ts            |  1 -
 3 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 47de1c6a..a43a2830 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -157,12 +157,14 @@ const Moment: React.FC<MomentProps> = ({
                       onPress: () =>
                         ImagePicker.openCamera({
                           mediaType: 'video',
-                        }).then((vid) => {
-                          console.log(vid);
-                          if (vid.path) {
-                            navigateToCaptionScreenForVideo(vid.path);
-                          }
-                        }),
+                        })
+                          .then((vid) => {
+                            console.log(vid);
+                            if (vid.path) {
+                              navigateToCaptionScreenForVideo(vid.path);
+                            }
+                          })
+                          .catch((err) => console.error(err)),
                     },
                   ])
                 }
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 81415437..201caf49 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -66,7 +66,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
   useEffect(() => {
-    if (imageRef && imageRef.current) {
+    if (imageRef && imageRef.current && !media.isVideo) {
       Image.getSize(
         media.uri,
         (w, h) => {
@@ -120,8 +120,13 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
                 source={{uri: media.uri}}
                 repeat={true}
                 onLoad={(response) => {
-                  const {width, height} = response.naturalSize;
-                  setMediaDimensions(width, height);
+                  const {width, height, orientation} = response.naturalSize;
+                  // portrait will flip width and height
+                  if (orientation === 'portrait') {
+                    setMediaDimensions(height, width);
+                  } else {
+                    setMediaDimensions(width, height);
+                  }
                 }}
               />
             </View>
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index ca32a3f3..b274ef04 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -241,7 +241,6 @@ export const handlePresignedURL = async (
     const status = response.status;
     let data: PresignedURLResponse = await response.json();
     if (status === 200) {
-      console.log('done');
       return data;
     } else {
       if (status === 404) {
-- 
cgit v1.2.3-70-g09d2


From 4bab63b7b0c24043749e78cbb4d639e8a4047bad Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 16:40:35 -0400
Subject: Add logic to pause video when not visible

---
 src/components/moments/MomentPost.tsx    |  3 ++-
 src/screens/profile/IndividualMoment.tsx | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 770cdcee..e6bb5405 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -72,7 +72,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
-  const {keyboardVisible} = useContext(MomentContext);
+  const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
   const isVideo = !(
     moment.moment_url.endsWith('jpg') ||
     moment.moment_url.endsWith('JPG') ||
@@ -213,6 +213,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   const {width, height} = response.naturalSize;
                   setAspectRatio(width / height);
                 }}
+                paused={moment.moment_id !== currentVisibleMomentId}
               />
             </View>
           ) : (
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ca31ad5b..7944c336 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard} from 'react-native';
+import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {AVATAR_DIM} from '../../constants';
@@ -17,6 +17,7 @@ import {isIPhoneX} from '../../utils';
 type MomentContextType = {
   keyboardVisible: boolean;
   scrollTo: (index: number) => void;
+  currentVisibleMomentId: string | undefined;
 };
 
 export const MomentContext = React.createContext({} as MomentContextType);
@@ -48,6 +49,18 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
+    string | undefined
+  >();
+  // https://stackoverflow.com/a/57502343
+  const viewabilityConfigCallback = useRef(
+    (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
+      const index = info.viewableItems[0].index;
+      if (index !== null) {
+        setCurrentVisibleMomentId(momentData[index].moment_id);
+      }
+    },
+  );
 
   useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
@@ -74,6 +87,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
       value={{
         keyboardVisible,
         scrollTo,
+        currentVisibleMomentId,
       }}>
       <FlatList
         ref={scrollRef}
@@ -89,6 +103,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
+        onViewableItemsChanged={viewabilityConfigCallback.current}
         onScrollToIndexFailed={(info) => {
           setTimeout(() => {
             scrollRef.current?.scrollToIndex({
-- 
cgit v1.2.3-70-g09d2


From 7009b08b83997152db97b3710d923029ed11a75a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 17:54:00 -0400
Subject: Cleanup dead code

---
 src/components/moments/legacy/MomentPostContent.tsx |  7 ++-----
 src/screens/profile/IndividualMoment.tsx            | 17 -----------------
 2 files changed, 2 insertions(+), 22 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/moments/legacy/MomentPostContent.tsx b/src/components/moments/legacy/MomentPostContent.tsx
index d372a332..0e6e5eed 100644
--- a/src/components/moments/legacy/MomentPostContent.tsx
+++ b/src/components/moments/legacy/MomentPostContent.tsx
@@ -33,14 +33,12 @@ interface MomentPostContentProps extends ViewProps {
   screenType: ScreenType;
   moment: MomentPostType;
   momentTags: MomentTagType[];
-  index: number;
 }
 const MomentPostContent: React.FC<MomentPostContentProps> = ({
   screenType,
   moment,
   style,
   momentTags,
-  index,
 }) => {
   const [tags, setTags] = useState<MomentTagType[]>(momentTags);
   const state: RootState = useStore().getState();
@@ -56,7 +54,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
-  const {keyboardVisible, scrollTo} = useContext(MomentContext);
+  const {keyboardVisible} = useContext(MomentContext);
   const [hideText, setHideText] = useState(false);
   const isVideo = !(
     moment.moment_url.endsWith('jpg') ||
@@ -143,7 +141,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             renderTextWithMentions({
               value: moment.caption,
               styles: styles.captionText,
-              partTypes: mentionPartTypes('white'),
+              partTypes: mentionPartTypes('white', 'caption'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,
@@ -173,7 +171,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
         }}
         onFocus={() => {
           setHideText(true);
-          scrollTo(index);
         }}
         isKeyboardAvoiding={false}
         theme={'dark'}
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 7944c336..a322b1e9 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -4,19 +4,12 @@ import React, {useEffect, useRef, useState} from 'react';
 import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 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} from '../../utils';
-
-/**
- * Individual moment view opened when user clicks on a moment tile
- */
 
 type MomentContextType = {
   keyboardVisible: boolean;
-  scrollTo: (index: number) => void;
   currentVisibleMomentId: string | undefined;
 };
 
@@ -73,20 +66,10 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
     };
   }, []);
 
-  const scrollTo = (index: number) => {
-    // TODO: make this dynamic
-    const offset = isIPhoneX() ? -(AVATAR_DIM + 100) : -(AVATAR_DIM + 160);
-    scrollRef.current?.scrollToIndex({
-      index: index,
-      viewOffset: offset,
-    });
-  };
-
   return (
     <MomentContext.Provider
       value={{
         keyboardVisible,
-        scrollTo,
         currentVisibleMomentId,
       }}>
       <FlatList
-- 
cgit v1.2.3-70-g09d2