aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/icons/back-arrow.svg2
-rw-r--r--src/components/common/FriendsButton.tsx1
-rw-r--r--src/routes/main/MainStackScreen.tsx140
-rw-r--r--src/screens/profile/FriendsListScreen.tsx58
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx31
5 files changed, 108 insertions, 124 deletions
diff --git a/src/assets/icons/back-arrow.svg b/src/assets/icons/back-arrow.svg
index aa203dea..16beae5a 100644
--- a/src/assets/icons/back-arrow.svg
+++ b/src/assets/icons/back-arrow.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg> \ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17" stroke="currentColor"/></svg> \ No newline at end of file
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index c7f56e2d..243a551d 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
borderRadius: 3,
marginRight: '2%',
marginLeft: '1%',
- padding: 0,
backgroundColor: 'transparent',
},
requestedButtonTitle: {
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 37f9bef8..99446432 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,6 +2,9 @@ import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
import React, {useState} from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import BackIcon from '../../assets/icons/back-arrow.svg';
import {
CaptionScreen,
CategorySelection,
@@ -67,21 +70,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
}
})();
- const modalStyle: StackNavigationOptions = {
- cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
- gestureDirection: 'vertical',
- cardOverlayEnabled: true,
- cardStyleInterpolator: ({current: {progress}}) => ({
- cardStyle: {
- opacity: progress.interpolate({
- inputRange: [0, 0.5, 0.9, 1],
- outputRange: [0, 0.25, 0.7, 1],
- }),
- },
- }),
- };
-
- console.log('screenType: ', screenType);
return (
<MainStack.Navigator
screenOptions={{
@@ -93,16 +81,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
<MainStack.Screen
name="Profile"
component={ProfileScreen}
+ initialParams={{screenType}}
options={{
- headerShown: true,
- headerTransparent: true,
- headerBackTitleVisible: false,
- headerTitle: '',
- headerTintColor: 'white',
- headerStyle: {height: AvatarHeaderHeight},
- }}
- initialParams={{
- screenType,
+ ...headerBarOptions('white', ''),
}}
/>
{isSearchTab &&
@@ -136,94 +117,133 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
<MainStack.Screen
name="CaptionScreen"
component={CaptionScreen}
- options={{...modalStyle, gestureEnabled: false}}
+ options={{
+ ...modalStyle,
+ gestureEnabled: false,
+ }}
/>
<MainStack.Screen
name="SocialMediaTaggs"
component={SocialMediaTaggs}
+ initialParams={{screenType}}
options={{
- headerShown: true,
- headerTransparent: true,
- headerBackTitleVisible: false,
- headerTitle: '',
- headerTintColor: 'white',
+ ...headerBarOptions('white', ''),
headerStyle: {height: AvatarHeaderHeight},
}}
- initialParams={{screenType}}
/>
<MainStack.Screen
name="CategorySelection"
component={CategorySelection}
options={{
- headerShown: true,
- headerTransparent: true,
- headerBackTitleVisible: false,
- headerTintColor: 'white',
- headerTitle: '',
+ ...headerBarOptions('white', ''),
}}
/>
<MainStack.Screen
name="CreateCustomCategory"
component={CreateCustomCategory}
options={{
- headerShown: true,
- headerTransparent: true,
- headerBackTitleVisible: false,
- headerTintColor: 'white',
- headerTitle: '',
+ ...headerBarOptions('white', ''),
}}
/>
<MainStack.Screen
name="IndividualMoment"
component={IndividualMoment}
+ initialParams={{screenType}}
options={{
+ ...modalStyle,
gestureEnabled: false,
- cardStyle: {
- backgroundColor: 'rgba(0, 0, 0, 0.6)',
- },
- cardOverlayEnabled: true,
- cardStyleInterpolator: ({current: {progress}}) => ({
- cardStyle: {
- opacity: progress.interpolate({
- inputRange: [0, 0.5, 0.9, 1],
- outputRange: [0, 0.25, 0.7, 1],
- }),
- },
- }),
}}
- initialParams={{screenType}}
/>
<MainStack.Screen
name="MomentCommentsScreen"
component={MomentCommentsScreen}
initialParams={{screenType}}
+ options={{
+ ...headerBarOptions('black', 'Comments'),
+ }}
/>
<MainStack.Screen
name="MomentUploadPrompt"
component={MomentUploadPromptScreen}
+ initialParams={{screenType}}
options={{
...modalStyle,
}}
- initialParams={{screenType}}
/>
<MainStack.Screen
name="FriendsListScreen"
component={FriendsListScreen}
initialParams={{screenType}}
+ options={{
+ ...headerBarOptions('black', 'Friends'),
+ }}
/>
<MainStack.Screen
name="EditProfile"
component={EditProfile}
options={{
- headerShown: true,
- headerTitle: 'Edit Profile',
- headerTransparent: true,
- headerBackTitleVisible: false,
- headerTintColor: 'white',
+ ...headerBarOptions('white', 'Edit Profile'),
}}
/>
</MainStack.Navigator>
);
};
+export const headerBarOptions: (
+ color: 'white' | 'black',
+ title: string,
+) => StackNavigationOptions = (color, title) => ({
+ headerShown: true,
+ headerTransparent: true,
+ headerBackTitleVisible: false,
+ headerBackImage: () => (
+ <BackIcon
+ height={normalize(18)}
+ width={normalize(18)}
+ color={color}
+ style={styles.backButton}
+ />
+ ),
+ headerTitle: () => (
+ <Text style={[styles.headerTitle, {color: color}]}>{title}</Text>
+ ),
+});
+
+const modalStyle: StackNavigationOptions = {
+ cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
+ gestureDirection: 'vertical',
+ cardOverlayEnabled: true,
+ cardStyleInterpolator: ({current: {progress}}) => ({
+ cardStyle: {
+ opacity: progress.interpolate({
+ inputRange: [0, 0.5, 0.9, 1],
+ outputRange: [0, 0.25, 0.7, 1],
+ }),
+ },
+ }),
+};
+
+const styles = StyleSheet.create({
+ backButton: {
+ marginLeft: 30,
+ },
+ headerTitle: {
+ fontSize: normalize(16),
+ letterSpacing: normalize(1.3),
+ fontWeight: '700',
+ },
+ whiteHeaderTitle: {
+ fontSize: normalize(16),
+ letterSpacing: normalize(1.3),
+ fontWeight: '700',
+ color: 'white',
+ },
+ blackHeaderTitle: {
+ fontSize: normalize(16),
+ letterSpacing: normalize(1.3),
+ fontWeight: '700',
+ color: 'black',
+ },
+});
+
export default MainStackScreen;
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index b2123f44..1cfef058 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,21 +1,14 @@
+import {RouteProp} from '@react-navigation/native';
import React from 'react';
-import {RouteProp, useNavigation} from '@react-navigation/native';
-import {TabsGradient, Friends} from '../../components';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {
- SafeAreaView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
-import {ProfileStackParams} from '../../routes';
+import {SafeAreaView, StyleSheet, View} from 'react-native';
import {useSelector} from 'react-redux';
+import {Friends, TabsGradient} from '../../components';
+import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
-import BackIcon from '../../assets/icons/back-arrow.svg';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
type FriendsListScreenRouteProp = RouteProp<
- ProfileStackParams,
+ MainStackParams,
'FriendsListScreen'
>;
interface FriendsListScreenProps {
@@ -24,7 +17,6 @@ interface FriendsListScreenProps {
const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
const {userXId, screenType} = route.params;
- const navigation = useNavigation();
const {friends} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -33,17 +25,9 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
return (
<>
<SafeAreaView>
- <View style={styles.header}>
- <TouchableOpacity
- style={styles.headerButton}
- onPress={() => {
- navigation.pop();
- }}>
- <BackIcon height={'100%'} width={'100%'} color={'white'} />
- </TouchableOpacity>
- <Text style={styles.headerText}>Friends</Text>
+ <View style={styles.body}>
+ <Friends result={friends} screenType={screenType} userId={userXId} />
</View>
- <Friends result={friends} screenType={screenType} userId={userXId} />
</SafeAreaView>
<TabsGradient />
</>
@@ -55,31 +39,11 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
height: '100%',
},
- header: {
- flexDirection: 'column',
- justifyContent: 'center',
- height: SCREEN_HEIGHT * 0.05,
- padding: '3%',
- paddingBottom: 0,
- marginTop: '1%',
- },
- headerText: {
- position: 'absolute',
- alignSelf: 'center',
- fontSize: normalize(18),
- fontWeight: '700',
- lineHeight: normalize(21.48),
- letterSpacing: normalize(1.3),
- },
- headerButton: {
- width: '5%',
- aspectRatio: 1,
- padding: 0,
- marginLeft: '5%',
- alignSelf: 'flex-start',
- marginBottom: '1%',
+ backButton: {
+ marginLeft: 10,
},
body: {
+ marginTop: HeaderHeight,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT * 0.8,
},
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ec193db5..b0208f6f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,15 +1,19 @@
import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
-import BackIcon from '../../assets/icons/back-arrow.svg';
import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import CommentsContainer from '../../components/comments/CommentsContainer';
import {ADD_COMMENT_TEXT} from '../../constants/strings';
-import {MainStackParams} from '../../routes/main';
+import {headerBarOptions, MainStackParams} from '../../routes/main';
import {CommentType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+ HeaderHeight,
+ normalize,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
/**
* Comments Screen for an image uploaded
@@ -39,19 +43,15 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
CommentType | undefined
>(undefined);
+ useEffect(() => {
+ navigation.setOptions({
+ ...headerBarOptions('black', `${commentsLength} Comments`),
+ });
+ }, [commentsLength, navigation]);
+
return (
<View style={styles.background}>
<SafeAreaView>
- <View style={styles.header}>
- <TouchableOpacity
- style={styles.headerButton}
- onPress={() => {
- navigation.pop();
- }}>
- <BackIcon height={'100%'} width={'100%'} color={'white'} />
- </TouchableOpacity>
- <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
- </View>
<View style={styles.body}>
<CommentsContainer
objectId={moment_id}
@@ -110,6 +110,7 @@ const styles = StyleSheet.create({
fontWeight: '400',
},
body: {
+ marginTop: HeaderHeight,
width: SCREEN_WIDTH * 0.9,
height: SCREEN_HEIGHT * 0.8,
paddingTop: '3%',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:05:11 +0000