add navigation for profile

LeftOvers/components/ProfileDetails.tsx

@@ -2,6 +2,7 @@ import {React, useState} from 'react';
 import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
 import ValidateButton from './ValidateButton';
 import ListWithoutSelect from './ListWithoutSelect';
+import { useNavigation } from '@react-navigation/native';
 
 type ProfileProps = {
   name: string
@@ -9,9 +10,11 @@ type ProfileProps = {
   diets: list<string>
   allergies: list<string>
   onDeleteProfile: () => void
+  navigation
 }
 
 export default function ProfileDetails(props: ProfileProps) {
+
   const [display, setDisplay] = useState("none")
   const changeListVisibility = () => {
     if (display == "none"){
@@ -27,7 +30,9 @@ export default function ProfileDetails(props: ProfileProps) {
         <View style={styles.pseudoBar}>
             <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
-            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+            <Pressable onPress={() => props.navigation.navigate('ProfileModification')}>
+                <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+            </Pressable>
             <Pressable onPress={props.onDeleteProfile}>
                 <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
             </Pressable>

LeftOvers/components/ProfileModification.tsx

@@ -1,4 +1,5 @@
-import {React, useState} from 'react';
+import React from 'react';
+import { useState } from 'react';
 import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
 import ValidateButton from './ValidateButton';
 import ListSelect from './ListSelect';

LeftOvers/navigation/HomeStackScreen.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { View, Image, Text, StyleSheet } from 'react-native';
+import { Image, Text, StyleSheet } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import HomePage from '../screens/HomePage';
 import Profiles from '../screens/Profiles';
-import appLogo from '../assets/images/icon.png';
+import { HeaderTitle } from './Utils';
+import appLogo from '../assets/images/logo.png';
 
 const HomeStack = createNativeStackNavigator()
 
@@ -16,15 +17,6 @@ function AppIcon() {
     )
 }
 
-function TextTitle(props) {
-    return (
-      <Text 
-          style={styles.headerTitle}>
-          {props.title}
-      </Text>
-    )
-}
-
 export default function HomeStackScreen() {
     return (
         <HomeStack.Navigator>
@@ -39,7 +31,7 @@ export default function HomeStackScreen() {
                     ),
 
                     headerTitle: () => (
-                        <TextTitle title='LeftOvers'/>
+                        <HeaderTitle title='LeftOvers'/>
                     ),
                     headerTitleAlign: 'center',
 
@@ -54,7 +46,7 @@ export default function HomeStackScreen() {
                 options={{
                     headerStyle: styles.headerBarContainer,
                     headerTitle: () => (
-                      <TextTitle title='Profiles'/>
+                      <HeaderTitle title='Profiles'/>
                     )
                 }}
             />
@@ -66,16 +58,9 @@ const styles = StyleSheet.create({
     headerBarContainer: {
         backgroundColor: '#F2F0E4',
     },
-    headerTitle: {
-        fontSize: 20,
-        fontWeight: "bold",
-        color: '#3F3C42',
-    },
     headerAppIcon: {
-        width: 35,
+        width: 45,
-        height: 35,
+        height: 45,
-        borderRadius: 20,
-        overflow:'hidden',
         marginHorizontal: 10,
     }
 })

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -1,50 +1,85 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View, Image, Pressable } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Profiles from '../screens/Profiles';
-import TopBar from '../components/TopBar';
+import CreateProfile from '../screens/CreateProfile';
+import ModifyProfile from '../screens/ModifyProfile';
+
+import { HeaderTitle } from './Utils';
+
+import SearchIcon from '../assets/images/search.png';
+import AddIcon from '../assets/images/plus.png'
 
 const ProfilesStack = createNativeStackNavigator()
 
-export default function ProfilesStackScreen() {
+export default function ProfilesStackScreen({ navigation }) {
-  return (
+    const _handleSearch = () => console.log('Searching');
-    <ProfilesStack.Navigator>
+    const _handleHeaderAdd = () => navigation.navigate('ProfileCreation');
-        <ProfilesStack.Screen
+    
-          name='Profiles'
+    return (
-          component={Profiles}
+        <ProfilesStack.Navigator>
-          options={{
+            <ProfilesStack.Screen
-            headerTitle: () => (
+                name='Profiles'
-                <TopBar title='Profiles' isVisible={true}/>
+                component={Profiles}
-            )
+                options={{
-          }}
+                    headerStyle: styles.headerBarContainer,
-        />
+                    headerTitle: () => (
-    </ProfilesStack.Navigator>
+                        <HeaderTitle title='Profiles'/>
-  )
+                    ),
+                    headerRight: () => (
+                        <View style={styles.headerBarRightContainer}>
+                            <Pressable onPress={_handleSearch}>
+                                <Image 
+                                    source={SearchIcon}
+                                    style={styles.headerBarIcon}/>
+                            </Pressable>
+                            <Pressable onPress={_handleHeaderAdd}>
+                                <Image
+                                    source={AddIcon}
+                                    style={styles.headerBarIcon}/>
+                            </Pressable>
+                        </View>
+                    )
+                }}
+            />
+            <ProfilesStack.Screen
+                name='ProfileCreation'
+                component={CreateProfile}
+                options={{
+                  headerStyle: styles.headerBarContainer,
+                    headerTitle: () => (
+                        <HeaderTitle title='Profile Creation'/>
+                    )
+                }}
+            />
+            <ProfilesStack.Screen
+                name='ProfileModification'
+                component={ModifyProfile}
+                options={{
+                    headerStyle: styles.headerBarContainer,
+                    headerTitle: () => (
+                        <HeaderTitle title='Profile Modification'/>
+                    )
+                }}
+            />
+        </ProfilesStack.Navigator>
+    )
 }
 
 const styles = StyleSheet.create({
     headerBarContainer: {
-        flexDirection: 'row',
-        width: "100%",
-        alignItems: 'center',
-        justifyContent: 'center',
         backgroundColor: '#F2F0E4',
-        padding: 5,
     },
-    headerTitle: {
+    headerBarRightContainer: {
-        fontSize: 20,
+        display: 'flex',
-        fontWeight: "bold",
+        flexDirection: 'row',
-        color: '#3F3C42',
+        alignContent: 'space-between',
-        textAlign: "center",
+        marginHorizontal: 10,
-        textAlignVertical: 'center',
-        flex: 0.8,
-    },
-    headerAppIcon: {
-        width: 35,
-        height: 35
     },
-    headerAppIconContainer: {
+    headerBarIcon: {
-        
+        width: 30,
+        height: 30,
+        marginHorizontal: 10
     }
 })

LeftOvers/navigation/Utils.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+export function HeaderTitle(props) {
+    return (
+        <Text 
+            style={styles.headerTitle}>
+            {props.title}
+        </Text>
+    )
+}
+
+const styles = StyleSheet.create({
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: "bold",
+        color: '#3F3C42',
+    }
+})

LeftOvers/screens/ModifyProfile.tsx

@@ -11,7 +11,6 @@ export default function ModifyProfile(props) {
   const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
   return (
     <SafeAreaProvider>
-        <TopBar title="Modify Profile" isVisible="true"/>
         <View style={styles.container}>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                 <View style={{marginTop: 20}}/>

LeftOvers/screens/Profiles.tsx

@@ -1,4 +1,5 @@
-import {React, useState} from 'react';
+import React from 'react';
+import { useState } from 'react';
 import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
@@ -6,7 +7,7 @@ import TopBar from '../components/TopBar';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 
-export default function Profiles(props) {
+export default function Profiles({props, navigation}) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
 
@@ -34,16 +35,15 @@ export default function Profiles(props) {
     <SafeAreaProvider>
         <View style={styles.container}>
             <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
-                <TopBar title="Profiles" isVisible="true"/>
                 <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                     <View style={{marginTop: 10}}/>
-                    <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                    <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                    <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                    <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
                     <View style={styles.modal}>
                         <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>