feat: Add navigation to the Profile screens

vgeorgiev0 · Sep 17, 2022 · 5803b35 · 5803b35
1 parent 42d2335
commit 5803b35
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/FeedPost.tsx b/src/components/FeedPost.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View, Image } from "react-native";
+import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
 import like from "../../assets/images/like.png";
 import {
   Entypo,
@@ -7,16 +7,22 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import IconButton from "./IconButton";
+import { useNavigation } from "@react-navigation/native";
 
 interface FeedPostProps {
   post: Post;
 }
 
 const FeedPost: React.FC<FeedPostProps> = ({ post }) => {
+  const navigation = useNavigation();
+  const navigateToProfile = () => {
+    // @ts-ignore
+    navigation.navigate("Profile");
+  };
   return (
     <View style={styles.post}>
       {/* Header */}
-      <View style={styles.header}>
+      <TouchableOpacity onPress={navigateToProfile} style={styles.header}>
         <Image source={{ uri: post.User.image }} style={styles.profileImage} />
         <View>
           <Text style={styles.name}>{post.User.name}</Text>
@@ -28,7 +34,7 @@ const FeedPost: React.FC<FeedPostProps> = ({ post }) => {
           color="gray"
           style={styles.icon}
         />
-      </View>
+      </TouchableOpacity>
       {/* Body */}
       {post.description && (
         <Text style={styles.description}>{post.description}</Text>

diff --git a/src/navigation/index.tsx b/src/navigation/index.tsx
@@ -2,6 +2,8 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import FeedScreen from "../screens/FeedScreen";
 import CreatePostScreen from "../screens/CreatePostScreen";
+import ProfileScreen from "../screens/ProfileScreen";
+import UpdateProfileScreen from "../screens/UpdateProfileScreen";
 
 const Stack = createNativeStackNavigator();
 
@@ -15,6 +17,8 @@ const Navigator = () => {
           options={{ headerShown: false }}
         />
         <Stack.Screen name="Create Post" component={CreatePostScreen} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+        <Stack.Screen name="Edit Profile" component={UpdateProfileScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx
@@ -41,6 +41,10 @@ const ProfileScreenHeader = ({
   if (!user) {
     return <ActivityIndicator />;
   }
+  const editProfile = () => {
+    // @ts-ignore
+    navigation.navigate("Edit Profile");
+  };
 
   return (
     <View style={styles.container}>
@@ -60,7 +64,7 @@ const ProfileScreenHeader = ({
                 Add to Story
               </Text>
             </Pressable>
-            <Pressable style={styles.button}>
+            <Pressable style={styles.button} onPress={editProfile}>
               <MaterialCommunityIcons name="pencil" size={16} color="black" />
               <Text style={styles.buttonText}>Edit Profile</Text>
             </Pressable>