aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/GenericMoreInfoDrawer.tsx8
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx2
-rw-r--r--src/components/profile/ProfileMoreInfoDrawer.tsx1
-rw-r--r--src/routes/profile/ProfileStackNavigator.tsx (renamed from src/routes/profile/ProfileStack.tsx)0
-rw-r--r--src/routes/profile/ProfileStackScreen.tsx (renamed from src/routes/profile/Profile.tsx)79
-rw-r--r--src/routes/profile/index.ts4
-rw-r--r--src/routes/tabs/NavigationBar.tsx2
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx1
8 files changed, 58 insertions, 39 deletions
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 3607ef8f..098482ae 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -20,12 +20,13 @@ interface GenericMoreInfoDrawerProps extends ViewProps {
isOpen: boolean;
setIsOpen: (visible: boolean) => void;
showIcons: boolean;
+ textColor: string;
// An array of title, onPressHandler, and icon component
buttons: [string, OnPressHandler, JSX.Element?][];
}
const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
- const {buttons, showIcons} = props;
+ const {buttons, showIcons, textColor} = props;
// each button is 80px high, cancel button is always there
const initialSnapPosition =
(buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
@@ -47,7 +48,9 @@ const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
<View key={index}>
<TouchableOpacity style={panelButtonStyle} onPress={action}>
{showIcons && <View style={styles.icon}>{icon}</View>}
- <Text style={styles.panelButtonTitle}>{title}</Text>
+ <Text style={[styles.panelButtonTitle, {color: textColor}]}>
+ {title}
+ </Text>
</TouchableOpacity>
<View style={styles.divider} />
</View>
@@ -74,7 +77,6 @@ const styles = StyleSheet.create({
panelButtonTitle: {
fontSize: 18,
fontWeight: 'bold',
- color: 'red',
},
icon: {
height: 25,
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 91fb3d2b..e127e05c 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -77,12 +77,14 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
<GenericMoreInfoDrawer
{...props}
showIcons={false}
+ textColor={'red'}
buttons={[['Delete Moment', handleDeleteMoment]]}
/>
) : (
<GenericMoreInfoDrawer
{...props}
showIcons={false}
+ textColor={'red'}
buttons={[['Report an Issue', handleReportMoment]]}
/>
)}
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 4fe24128..80ad9bba 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -41,6 +41,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
<GenericMoreInfoDrawer
{...props}
showIcons={true}
+ textColor={'black'}
buttons={[
['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
]}
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStackNavigator.tsx
index bc0a9560..bc0a9560 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStackNavigator.tsx
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/ProfileStackScreen.tsx
index 4c93b1ee..4fc9f0c7 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/ProfileStackScreen.tsx
@@ -10,9 +10,11 @@ import {
EditProfile,
CategorySelection,
} from '../../screens';
-import {ProfileStack, ProfileStackParams} from './ProfileStack';
+import {ProfileStack, ProfileStackParams} from './ProfileStackNavigator';
import {RouteProp} from '@react-navigation/native';
import {ScreenType} from '../../types';
+import {AvatarHeaderHeight} from '../../utils';
+import {StackNavigationOptions} from '@react-navigation/stack';
/**
* Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
@@ -31,42 +33,51 @@ interface ProfileStackProps {
route: ProfileStackRouteProps;
}
-const Profile: React.FC<ProfileStackProps> = ({route}) => {
+const ProfileStackScreen: React.FC<ProfileStackProps> = ({route}) => {
const {screenType} = route.params;
- /**
- * This parameter isProfileStack acts as a switch between Search and Profile Stacks
- */
const isProfileStack = screenType === ScreenType.Profile;
+
+ const modalStyle: StackNavigationOptions = {
+ cardStyle: {backgroundColor: 'transparent'},
+ 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],
+ }),
+ },
+ overlayStyle: {
+ backgroundColor: '#505050',
+ opacity: progress.interpolate({
+ inputRange: [0, 1],
+ outputRange: [0, 0.9],
+ extrapolate: 'clamp',
+ }),
+ },
+ }),
+ };
+
return (
<ProfileStack.Navigator
screenOptions={{
headerShown: false,
- cardStyle: {backgroundColor: 'white'},
- cardOverlayEnabled: true,
- cardStyleInterpolator: ({current: {progress}}) => ({
- cardStyle: {
- opacity: progress.interpolate({
- inputRange: [0, 0.5, 0.9, 1],
- outputRange: [0, 0.25, 0.7, 1],
- }),
- },
- overlayStyle: {
- backgroundColor: '#505050',
- opacity: progress.interpolate({
- inputRange: [0, 1],
- outputRange: [0, 0.9],
- extrapolate: 'clamp',
- }),
- },
- }),
}}
- mode="modal"
+ mode="card"
initialRouteName={isProfileStack ? 'Profile' : 'Search'}>
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
- options={{headerShown: false}}
+ options={{
+ headerShown: true,
+ headerTransparent: true,
+ headerBackTitleVisible: false,
+ headerTitle: '',
+ headerTintColor: 'white',
+ headerStyle: {height: AvatarHeaderHeight},
+ }}
initialParams={{
screenType,
}}
@@ -87,7 +98,9 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
headerShown: true,
headerTransparent: true,
headerBackTitleVisible: false,
+ headerTitle: '',
headerTintColor: 'white',
+ headerStyle: {height: AvatarHeaderHeight},
}}
initialParams={{screenType}}
/>
@@ -103,7 +116,11 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
}}
/>
{isProfileStack ? (
- <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
+ <ProfileStack.Screen
+ name="CaptionScreen"
+ component={CaptionScreen}
+ options={{...modalStyle, gestureEnabled: false}}
+ />
) : (
<React.Fragment />
)}
@@ -111,8 +128,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
name="IndividualMoment"
component={IndividualMoment}
options={{
- headerShown: false,
- cardStyle: {backgroundColor: 'transparent'},
+ ...modalStyle,
}}
initialParams={{screenType}}
/>
@@ -120,8 +136,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
name="MomentCommentsScreen"
component={MomentCommentsScreen}
options={{
- headerShown: false,
- cardStyle: {backgroundColor: 'transparent'},
+ ...modalStyle,
}}
initialParams={{screenType}}
/>
@@ -129,7 +144,7 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
name="FollowersListScreen"
component={FollowersListScreen}
options={{
- cardStyle: {backgroundColor: 'transparent'},
+ ...modalStyle,
}}
initialParams={{screenType}}
/>
@@ -148,4 +163,4 @@ const Profile: React.FC<ProfileStackProps> = ({route}) => {
);
};
-export default Profile;
+export default ProfileStackScreen;
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
index eed5c6b4..05a6b24a 100644
--- a/src/routes/profile/index.ts
+++ b/src/routes/profile/index.ts
@@ -1,2 +1,2 @@
-export * from './ProfileStack';
-export * from './Profile';
+export * from './ProfileStackNavigator';
+export * from './ProfileStackScreen';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e6c30134..f3043696 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -2,7 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React, {Fragment} from 'react';
import {NavigationIcon} from '../../components';
import {ScreenType} from '../../types';
-import Profile from '../profile/Profile';
+import Profile from '../profile/ProfileStackScreen';
const Tabs = createBottomTabNavigator();
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index b058e38d..81d271d1 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -70,7 +70,6 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
headerTitle: () => {
return <AvatarTitle avatar={avatar} />;
},
- headerStyle: {height: AvatarHeaderHeight},
});
}, [avatar, navigation]);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:02:24 +0000