1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import React from 'react';
import {
IndividualMoment,
CaptionScreen,
SocialMediaTaggs,
SearchScreen,
ProfileScreen,
MomentCommentsScreen,
FollowersListScreen,
} from '../../screens';
import {ProfileStack, ProfileStackParams} from './ProfileStack';
import {RouteProp} from '@react-navigation/native';
/**
* What will be the First Screen of the stack depends on value of isProfileView (Search if its true else Profile)
* Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
* Profile : To display the logged in user's profile when isProfileView is false, else displays profile of any user the logged in user wants to view.
* ProfileView : To display profile of a commenter / any user who has commented on a photo.
* When you click on the profile icon after looking at a user's profile, the stack is reset and you come back to the top of the stack (First screen : Profile in this case)
* Search : To display the search screen. Search for a user on this screen, click on a result tile and navigate to the same (isProfileView = true).
* When you click on the search icon after looking at a user's profile, the stack gets reset and you come back to the top of the stack (First screen : Search in this case)
* SocialMediaTaggs : To display user data for any social media account set up by the user.
* IndividualMoment : To display individual images uploaded by the user (Navigate to comments from this screen, click on a commenter's profile pic / username, look at a user's profile. Click on the profile icon again to come back to your own profile).
* MomentCommentsScreen : Displays comments posted by users on an image uploaded by the user.
*/
type ProfileStackRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
interface ProfileStackProps {
route: ProfileStackRouteProps;
}
const Profile: React.FC<ProfileStackProps> = ({route}) => {
const {isProfileView} = route.params;
return (
<ProfileStack.Navigator
screenOptions={{
headerShown: false,
cardStyle: {backgroundColor: 'transparent'},
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"
initialRouteName={!isProfileView ? 'Profile' : 'Search'}>
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
options={{headerShown: false}}
initialParams={{isProfileView: isProfileView}}
/>
{isProfileView ? (
<ProfileStack.Screen name="Search" component={SearchScreen} />
) : (
<React.Fragment />
)}
<ProfileStack.Screen
name="SocialMediaTaggs"
component={SocialMediaTaggs}
options={{
headerShown: true,
headerTransparent: true,
headerBackTitleVisible: false,
headerTintColor: 'white',
}}
/>
{!isProfileView ? (
<ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
) : (
<React.Fragment />
)}
<ProfileStack.Screen
name="IndividualMoment"
component={IndividualMoment}
options={{headerShown: false}}
initialParams={{isProfileView: isProfileView}}
/>
<ProfileStack.Screen
name="ProfileView"
component={ProfileScreen}
options={{headerShown: false}}
initialParams={{isProfileView: isProfileView}}
/>
<ProfileStack.Screen
name="MomentCommentsScreen"
component={MomentCommentsScreen}
options={{headerShown: false}}
initialParams={{isProfileView: isProfileView}}
/>
<ProfileStack.Screen
name="FollowersListScreen"
component={FollowersListScreen}
initialParams={{isProfileView: isProfileView}}
/>
</ProfileStack.Navigator>
);
};
export default Profile;
|
