diff options
Diffstat (limited to 'src/screens')
-rw-r--r-- | src/screens/profile/MomentCommentsScreen.tsx | 130 |
1 files changed, 62 insertions, 68 deletions
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index ebe4da28..3008728e 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -1,17 +1,19 @@ import * as React from 'react'; -import {RouteProp, useNavigation} from '@react-navigation/native'; -import {ProfileStackParams} from '../../routes/main'; -import {CenteredView, CommentTile} from '../../components'; -import {CommentType} from '../../types'; -import {ScrollView, StyleSheet, Text, View} from 'react-native'; -import {SCREEN_WIDTH} from '../../utils/screenDimensions'; -import {Button} from 'react-native-elements'; -import {AddComment} from '../../components/'; -import {useEffect} from 'react'; +import { RouteProp, useNavigation } from '@react-navigation/native'; +import { ProfileStackParams } from '../../routes/main'; +import { CommentTile, TabsGradient } from '../../components'; +import { CommentType } from '../../types'; +import { StyleSheet, Text, View } from 'react-native'; +import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../utils/screenDimensions'; +import { Button } from 'react-native-elements'; +import { AddComment } from '../../components/'; +import { useEffect } from 'react'; import AsyncStorage from '@react-native-community/async-storage'; -import {getMomentComments} from '../..//services'; -import {useDispatch} from 'react-redux'; -import {logout} from '../../store/actions'; +import { getMomentComments } from '../..//services'; +import { useDispatch } from 'react-redux'; +import { logout } from '../../store/actions'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import Animated from 'react-native-reanimated'; /** * Comments Screen for an image uploaded @@ -28,9 +30,9 @@ interface MomentCommentsScreenProps { route: MomentCommentsScreenRouteProps; } -const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => { +const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({ route }) => { const navigation = useNavigation(); - const {moment_id, screenType} = route.params; + const { moment_id, screenType } = route.params; const [commentsList, setCommentsList] = React.useState([]); const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true); const dispatch = useDispatch(); @@ -51,13 +53,13 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => { }, [dispatch, moment_id, newCommentsAvailable]); return ( - <CenteredView> - <View style={styles.modalView}> + <View style={styles.background}> + <SafeAreaView> <View style={styles.header}> <Button title="X" - buttonStyle={styles.button} - titleStyle={styles.buttonText} + buttonStyle={styles.headerButton} + titleStyle={styles.headerButtonText} onPress={() => { navigation.pop(); }} @@ -66,72 +68,64 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => { {commentsList.length + ' Comments'} </Text> </View> - <ScrollView - style={styles.modalScrollView} - contentContainerStyle={styles.modalScrollViewContent}> - {commentsList && - commentsList.map((comment: CommentType) => ( - <CommentTile - key={comment.comment_id} - comment_object={comment} - screenType={screenType} - /> - ))} - </ScrollView> - <AddComment - setNewCommentsAvailable={setNewCommentsAvailable} - moment_id={moment_id} - /> - </View> - </CenteredView> + <View style={styles.body}> + <Animated.ScrollView + style={styles.scrollView} + contentContainerStyle={styles.scrollViewContent}> + {commentsList && + commentsList.map((comment: CommentType) => ( + <CommentTile + key={comment.comment_id} + comment_object={comment} + screenType={screenType} + /> + ))} + </Animated.ScrollView> + <AddComment + setNewCommentsAvailable={setNewCommentsAvailable} + moment_id={moment_id} + /> + </View> + </SafeAreaView> + <TabsGradient /> + </View> ); }; const styles = StyleSheet.create({ - header: {flexDirection: 'row'}, + background: { + backgroundColor: 'white', + height: '100%', + }, + header: { justifyContent: 'center', padding: '3%' }, headerText: { - position: 'relative', - left: '180%', + position: 'absolute', alignSelf: 'center', - fontSize: 18, - fontWeight: '500', + fontSize: 20.5, + fontWeight: '600', }, - container: { - position: 'relative', - top: '5%', - left: '5%', - backgroundColor: 'white', - borderRadius: 5, - width: SCREEN_WIDTH / 1.1, - height: '55%', - }, - button: { + headerButton: { backgroundColor: 'transparent', + width: 30, + aspectRatio: 1, + padding: 0, + alignSelf: 'flex-start', }, - buttonText: { + headerButtonText: { color: 'black', fontSize: 18, fontWeight: '400', }, - modalView: { - width: '85%', - height: '70%', - backgroundColor: '#fff', - shadowColor: '#000', - shadowOpacity: 30, - shadowOffset: {width: 0, height: 2}, - shadowRadius: 5, - borderRadius: 8, - paddingBottom: 15, - paddingHorizontal: 20, + body: { + width: SCREEN_WIDTH, + height: (4.9 / 6) * SCREEN_HEIGHT, paddingTop: 5, - justifyContent: 'space-between', }, - modalScrollViewContent: { - justifyContent: 'center', + scrollView: { + paddingHorizontal: 20, }, - modalScrollView: { - marginBottom: 10, + scrollViewContent: { + justifyContent: 'center', }, }); |