diff options
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 195 |
1 files changed, 81 insertions, 114 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 10c3b711..73c34d39 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -171,14 +171,7 @@ const MomentPost: React.FC<MomentPostProps> = ({ return ( <> <StatusBar barStyle={'light-content'} /> - <View - style={{ - backgroundColor: 'black', - width: SCREEN_WIDTH, - height: SCREEN_HEIGHT, - flexDirection: 'column', - justifyContent: 'center', - }}> + <View style={styles.mainContainer}> <Image source={{uri: moment.moment_url}} style={[ @@ -190,117 +183,91 @@ const MomentPost: React.FC<MomentPostProps> = ({ resizeMode={'cover'} ref={imageRef} /> - <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} + {visible && ( + <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}> + <MomentTags + editing={false} tags={tags} + setTags={() => null} + imageRef={imageRef} /> - </View> - {visible && ( - <Animated.View - style={[ - { - opacity: fadeValue, - height: isFullScreen - ? SCREEN_HEIGHT - : SCREEN_WIDTH / aspectRatio, - width: SCREEN_WIDTH, - marginBottom: '3%', - }, - ]}> - <MomentTags - editing={false} + </Animated.View> + )} + <TouchableWithoutFeedback + onPress={() => { + setVisible(!visible); + setFadeValue(new Animated.Value(0)); + }}> + <View style={styles.contentContainer}> + <View style={styles.topContainer}> + <MomentMoreInfoDrawer + isOpen={drawerVisible} + setIsOpen={setDrawerVisible} + isOwnProfile={isOwnProfile} + momentTagId={momentTagId} + removeTag={removeTag} + dismissScreenAndUpdate={() => { + dispatch(loadUserMoments(loggedInUserId)); + navigation.goBack(); + }} + screenType={screenType} + moment={moment} tags={tags} - setTags={() => null} - imageRef={imageRef} /> - </Animated.View> - )} - <KeyboardAvoidingView - behavior={Platform.OS === 'ios' ? 'padding' : 'height'} - keyboardVerticalOffset={-20}> - <View - style={{ - flexDirection: 'column', - justifyContent: 'flex-end', - }}> - <TagsIcon /> - <View - style={{ - position: 'absolute', - right: '2%', - bottom: SCREEN_HEIGHT * 0.12, - }}> - <CommentsCount moment={moment} screenType={screenType} /> - </View> - <MomentPosterPreview /> - {!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> + <KeyboardAvoidingView + behavior={Platform.OS === 'ios' ? 'padding' : 'height'} + keyboardVerticalOffset={-20}> + <View style={styles.bottomContainer}> + {tags.length > 0 && ( + <Image + source={require('../../assets/icons/tag_indicate.png')} + style={styles.tagIcon} + /> + )} + <View style={styles.commentsCountContainer}> + <CommentsCount moment={moment} screenType={screenType} /> + </View> + <MomentPosterPreview /> + {!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={() => { + setCommentCount(commentCount + 1); + }} + onFocus={() => { + setHideText(true); + }} + isKeyboardAvoiding={false} + theme={'dark'} + /> + <Text style={styles.text}> + {getTimePosted(moment.date_created)} + </Text> + </View> + </View> + </KeyboardAvoidingView> + </View> + </TouchableWithoutFeedback> </View> </> ); |