From 2b341648ea27823912d80bc73cc7954556b63b9d Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 29 Mar 2021 17:16:14 -0400
Subject: Fix tutorial positioning bug on iPhone 11

---
 src/screens/profile/MomentUploadPromptScreen.tsx | 48 +++++++++++++-----------
 1 file changed, 26 insertions(+), 22 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index 9d46c1e9..24715f60 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -7,6 +7,8 @@ import {StyleSheet, Text, View} from 'react-native';
 import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
+import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
+import {SCREEN_HEIGHT} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -26,12 +28,10 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, momentCategory} = route.params;
+  const {screenType, momentCategory, profileBodyHeight} = route.params;
   return (
     <View style={styles.container}>
       <CloseIcon
-        height={'10%'}
-        width={'10%'}
         color={'white'}
         style={styles.closeButton}
         onPress={() => {
@@ -42,7 +42,11 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
       <Text style={styles.text}>{UPLOAD_MOMENT_PROMPT_ONE_MESSAGE}</Text>
       <Image
         source={require('../../assets/gifs/dotted-arrow-white.gif')}
-        style={styles.arrowGif}
+        style={[
+          StyleSheet.absoluteFill,
+          styles.arrowGif,
+          {top: profileBodyHeight + PROFILE_CUTOUT_BOTTOM_Y},
+        ]}
       />
       <Moment
         key={1}
@@ -55,7 +59,7 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         showDownButton={false}
         showUpButton={false}
         externalStyles={{
-          container: styles.momentContainer,
+          container: {...styles.momentContainer, top: profileBodyHeight + 615},
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
           scrollContainer: styles.momentScrollContainer,
@@ -67,32 +71,28 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'column',
-    justifyContent: 'center',
   },
   closeButton: {
-    position: 'relative',
-    height: '48%',
-    aspectRatio: 1,
-    top: 20,
+    ...StyleSheet.absoluteFillObject,
+    top: 45,
+    left: 20,
+    width: 40,
+    height: 40,
   },
   text: {
-    justifyContent: 'center',
+    marginTop: 250,
     color: '#fff',
     fontWeight: 'bold',
     fontSize: 20,
     textAlign: 'center',
-    position: 'relative',
-    top: '40%',
   },
   arrowGif: {
-    position: 'relative',
-    width: '25%',
-    height: '40%',
-    left: '40%',
-    aspectRatio: 1.2,
-    top: '50%',
-    transform: [{scaleX: -1}, {rotate: '15deg'}],
+    width: 200,
+    height: 150,
+    left: 120,
+    transform: [{rotate: '350deg'}, {rotateY: '180deg'}],
   },
 
   //Styles to adjust moment container
@@ -100,14 +100,18 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   momentContainer: {
-    top: '62%',
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
+    height: 170,
   },
   momentHeaderText: {
-    paddingBottom: '5%',
+    ...StyleSheet.absoluteFillObject,
+    marginLeft: 12,
+    marginTop: 10,
   },
   momentHeader: {
     backgroundColor: 'transparent',
+    paddingVertical: 20,
   },
 });
 
-- 
cgit v1.2.3-70-g09d2


From d1e5d18c36af46b450ec7d019550c05b1a78f2db Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 29 Mar 2021 17:57:54 -0400
Subject: fixed issue

---
 src/screens/profile/MomentUploadPromptScreen.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index 24715f60..f79c81b4 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -8,7 +8,7 @@ import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
 import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
-import {SCREEN_HEIGHT} from '../../utils';
+import {isIPhoneX, normalize} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -59,7 +59,12 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         showDownButton={false}
         showUpButton={false}
         externalStyles={{
-          container: {...styles.momentContainer, top: profileBodyHeight + 615},
+          container: {
+            ...styles.momentContainer,
+            top: isIPhoneX()
+              ? profileBodyHeight + 615
+              : profileBodyHeight + 500,
+          },
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
           scrollContainer: styles.momentScrollContainer,
@@ -85,7 +90,7 @@ const styles = StyleSheet.create({
     marginTop: 250,
     color: '#fff',
     fontWeight: 'bold',
-    fontSize: 20,
+    fontSize: normalize(20),
     textAlign: 'center',
   },
   arrowGif: {
-- 
cgit v1.2.3-70-g09d2