Fixed Profile Page Message Button

Cleaned up Navigation

package.json

@@ -2,6 +2,7 @@
 	"name": "instaclone",
 	"version": "0.0.1",
 	"private": true,
+	"author": "NiketanG",
 	"scripts": {
 		"android": "react-native run-android",
 		"android:release": "cd android && ./gradlew assembleRelease && cd ../ && mv android/app/build/outputs/apk/release/app-release.apk build/app-release.apk && adb install build/app-release.apk ",

src/app/Routes/ExploreStack.tsx

@@ -1,15 +1,24 @@
 import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainer, RouteProp } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import { ExploreStackNavigationParams } from "../types/navigation";
+import {
+	ExploreStackNavigationParams,
+	TabNavigationParams,
+} from "../types/navigation";
 import Explore from "../Screens/Explore";
 import PostDetail from "../Screens/Post";
 import ProfilePageStack from "./ProfileStack";
 import Comments from "../Screens/Comments";
+import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
 
 const Stack = createStackNavigator<ExploreStackNavigationParams>();
 
-const ExplorePageStack = () => {
+type Props = {
+	route: RouteProp<TabNavigationParams, "Explore">;
+	navigation: BottomTabNavigationProp<TabNavigationParams, "Explore">;
+};
+
+const ExplorePageStack: React.FC<Props> = ({ route }) => {
 	return (
 		<NavigationContainer independent>
 			<Stack.Navigator headerMode="none" initialRouteName="Explore">
@@ -19,7 +28,9 @@ const ExplorePageStack = () => {
 				<Stack.Screen
 					name="Profile"
 					component={ProfilePageStack}
-					initialParams={{ isCurrentUser: false }}
+					initialParams={{
+						isCurrentUser: false,
+					}}
 				/>
 			</Stack.Navigator>
 		</NavigationContainer>

src/app/Routes/HomeStack.tsx

@@ -17,16 +17,10 @@ type Props = {
 	navigation: BottomTabNavigationProp<TabNavigationParams, "Home">;
 };
 
-const HomePageStack: React.FC<Props> = ({ route }) => (
+const HomePageStack: React.FC<Props> = () => (
 	<NavigationContainer independent>
 		<Stack.Navigator headerMode="none" initialRouteName="Home">
-			<Stack.Screen
-				name="Home"
-				component={Home}
-				initialParams={{
-					rootNavigation: route.params.rootNavigation,
-				}}
-			/>
+			<Stack.Screen name="Home" component={Home} />
 			<Stack.Screen name="Comments" component={Comments} />
 			<Stack.Screen name="Profile" component={ProfilePageStack} />
 		</Stack.Navigator>

src/app/Routes/Navigation.tsx

@@ -29,7 +29,6 @@ type Props = {
 	route: RouteProp<SwipeTabNavigationParams, "Tabs">;
 	navigation: MaterialTopTabNavigationProp<SwipeTabNavigationParams, "Tabs">;
 };
-
 export const TabNavigation: React.FC<Props> = ({ navigation }) => {
 	const { colors, dark } = useTheme();
 	return (
@@ -59,9 +58,6 @@ export const TabNavigation: React.FC<Props> = ({ navigation }) => {
 				<Tab.Screen
 					name="Home"
 					component={HomePageStack}
-					initialParams={{
-						rootNavigation: navigation,
-					}}
 					options={{
 						tabBarIcon: ({ color, focused }) => (
 							<TabBarIcon

src/app/Routes/ProfileStack.tsx

@@ -11,6 +11,7 @@ import EditProfile from "../Screens/Profile/Edit";
 import Followers from "../Screens/Profile/Followers";
 import Following from "../Screens/Profile/Following";
 import PostStack from "./PostStack";
+import Messages from "../Screens/Messages/Messages";
 
 type Props = {
 	route: RouteProp<ProfileStackParams, "ProfilePage">;
@@ -19,7 +20,7 @@ type Props = {
 
 const Stack = createStackNavigator<ProfileStackParams>();
 
-const ProfilePageStack = (props: Props) => {
+const ProfilePageStack: React.FC<Props> = ({ route }) => {
 	return (
 		<NavigationContainer independent>
 			<Stack.Navigator headerMode="none" initialRouteName="ProfilePage">
@@ -28,28 +29,29 @@ const ProfilePageStack = (props: Props) => {
 					component={Profile}
 					initialParams={{
 						isCurrentUser: true,
-						...props.route.params,
+						...route.params,
 					}}
 				/>
 				<Stack.Screen
 					name="Followers"
 					component={Followers}
 					initialParams={{
 						isCurrentUser: true,
-						...props.route.params,
+						...route.params,
 					}}
 				/>
 				<Stack.Screen
 					name="Following"
 					component={Following}
 					initialParams={{
 						isCurrentUser: true,
-						...props.route.params,
+						...route.params,
 					}}
 				/>
 				<Stack.Screen name="Posts" component={PostStack} />
 				<Stack.Screen name="EditProfile" component={EditProfile} />
 				<Stack.Screen name="Settings" component={Settings} />
+				<Stack.Screen name="Messages" component={Messages} />
 			</Stack.Navigator>
 		</NavigationContainer>
 	);

src/app/Screens/Home/index.tsx

@@ -33,8 +33,7 @@ const Home: React.FC<Props> = observer(({ route }) => {
 
 	const { height } = useWindowDimensions();
 
-	const openMessages = () =>
-		route.params.rootNavigation?.navigate("Messages");
+	const openMessages = () => {};
 
 	const [openedModalData, setOpenedModalData] = useState<{
 		modalType: "MENU" | "SHARE";

src/app/Screens/Profile/index.tsx

@@ -25,15 +25,12 @@ import {
 } from "react-native-paper";
 import Icon from "react-native-vector-icons/Ionicons";
 import { UserAvatar } from "../../Components/UserAvatar";
-import {
-	ExploreStackNavigationParams,
-	ProfileStackParams,
-} from "../../types/navigation";
+import { ProfileStackParams } from "../../types/navigation";
 import { AppContext } from "../../utils/appContext";
 import useUser from "../../utils/useUser";
 
 type Props = {
-	route: RouteProp<ExploreStackNavigationParams, "Profile">;
+	route: RouteProp<ProfileStackParams, "ProfilePage">;
 	navigation: StackNavigationProp<ProfileStackParams, "ProfilePage">;
 };
 
@@ -49,6 +46,13 @@ const Profile: React.FC<Props> = observer(({ navigation, route }) => {
 
 	const { username: savedUsername } = useContext(AppContext);
 
+	const openMessage = () => {
+		if (route.params.username)
+			navigation.navigate("Messages", {
+				username: route.params.username,
+			});
+	};
+
 	const {
 		user,
 		posts,
@@ -288,9 +292,7 @@ const Profile: React.FC<Props> = observer(({ navigation, route }) => {
 											borderColor: colors.text,
 											marginTop: 16,
 										}}
-										onPress={() =>
-											navigation.navigate("EditProfile")
-										}
+										onPress={openMessage}
 									>
 										Message
 									</Button>
@@ -372,7 +374,6 @@ const Profile: React.FC<Props> = observer(({ navigation, route }) => {
 													},
 													postId: post.postId,
 													postList: posts,
-													rootNavigation: navigation,
 												});
 										}}
 									>

src/app/types/navigation.ts

@@ -44,20 +44,20 @@ export type SwipeTabNavigationParams = {
 	Messages: undefined;
 };
 export type HomeStackNavigationParams = {
-	Home: {
-		rootNavigation: MaterialTopTabNavigationProp<
-			SwipeTabNavigationParams,
-			"Tabs"
-		>;
-	};
+	Home: undefined;
 	Comments: CommentsPageParams;
 	Profile: ProfilePageProps & {
 		goBack: () => void;
 	};
 };
 
 export type ProfileStackParams = {
-	ProfilePage: ProfilePageProps;
+	Messages: {
+		username: string;
+	};
+	ProfilePage: ProfilePageProps & {
+		goBack?: () => void;
+	};
 	Followers: ProfilePageProps & {
 		followers: Follower[];
 	};
@@ -96,21 +96,16 @@ export type PostListParams = {
 	};
 	postId: number;
 	postList: Array<definitions["posts"]>;
-	rootNavigation: StackNavigationProp<ProfileStackParams, "ProfilePage">;
 };
+
 export type PostStackNavigationParams = {
 	PostList: PostListParams;
 	Comments: CommentsPageParams;
 	Profile: StackNavigationProp<ProfileStackParams, "ProfilePage">;
 };
 
 export type TabNavigationParams = {
-	Home: {
-		rootNavigation: MaterialTopTabNavigationProp<
-			SwipeTabNavigationParams,
-			"Tabs"
-		>;
-	};
+	Home: undefined;
 	Explore: undefined;
 	// Activity: undefined;
 	New: undefined;