aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx130
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',
},
});