diff options
| -rw-r--r-- | src/components/profile/Content.tsx | 24 | ||||
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 1 | ||||
| -rw-r--r-- | src/screens/profile/MomentUploadPromptScreen.tsx | 48 |
3 files changed, 49 insertions, 24 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 1a5a205c..c0cae4b8 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,5 +1,5 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState, useRef} from 'react'; import { Alert, LayoutChangeEvent, @@ -91,6 +91,15 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { const navigation = useNavigation(); + /* + * Used to imperatively scroll to the top when presenting the moment tutorial. + */ + const scrollViewRef = useRef(null); + /* + * If scrolling is enabled. Set to false before scrolling up for the tutorial. + */ + const [scrollEnabled, setScrollEnabled] = useState<boolean>(true); + /** * States */ @@ -169,6 +178,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { */ useFocusEffect( useCallback(() => { + setScrollEnabled(false); const navigateToMomentUploadPrompt = () => { switch (profile.profile_completion_stage) { case 1: @@ -180,6 +190,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { navigation.navigate('MomentUploadPrompt', { screenType, momentCategory: momentCategories[0], + profileBodyHeight, }); setIsStageOnePromptClosed(true); } @@ -195,13 +206,20 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { } }; if (!userXId) { - setTimeout(navigateToMomentUploadPrompt, 2000); + setTimeout(() => { + if (scrollViewRef.current) { + scrollViewRef.current.getNode().scrollTo({y: 0}); + } + navigateToMomentUploadPrompt(); + setScrollEnabled(true); + }, 2000); } }, [ profile.profile_completion_stage, momentCategories, userXId, isStageOnePromptClosed, + profileBodyHeight, ]), ); @@ -285,12 +303,14 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { return ( <Animated.ScrollView + ref={scrollViewRef} style={styles.container} onScroll={(e) => handleScroll(e)} bounces={shouldBounce} showsVerticalScrollIndicator={false} scrollEventThrottle={1} stickyHeaderIndices={[4]} + scrollEnabled={scrollEnabled} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> }> diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 26d9943b..bbe9baf0 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -69,6 +69,7 @@ export type MainStackParams = { MomentUploadPrompt: { screenType: ScreenType; momentCategory: string; + profileBodyHeight: number; }; AnimatedTutorial: { screenType: ScreenType; 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, }, }); |