I am still getting the hang of things and struggling with the terminology, so please bear with me as I try to explain my issue.
Currently, I am working on a project in react native where I have two files - Header.js and footer.js. I have successfully imported them into my Home Screen but now I am facing an issue with the buttons inside footer.js not functioning properly. The error message states 'undefined is not an object (evaluating 'navigation.navigate')'. How can I restore the functionality?
Any assistance would be greatly appreciated. Below is a snippet of my project for reference;
import React from 'react';
import TabNavigator from "./assets/component/TabNavigator";
import {StackNavigation} from "./assets/component/StackNavigation";
export default function App() {
return (
<StackNavigation/>
);
}StackNavigation.js;
import React from 'react';
import { HomeScreen} from "../Screens/HomeScreen";
import LayoutProps from "../Screens/Layout Props";
import SampleViewProps from "../Screens/SampleViewProps";
import {NavigationContainer} from "@react-navigation/native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
export function StackNavigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Layout Props" component={LayoutProps} />
<Stack.Screen name="View Props" component={SampleViewProps} />
</Stack.Navigator>
</NavigationContainer>
);
}HomeScreen.js;
import React from 'react';
import {Button, View, SafeAreaView, StyleSheet} from 'react-native';
import HeaderSB from "../component/SBHeader";
import FooterSB from "../component/SBFooter";
export function HomeScreen({navigation}) {
const receiveValue = (value) => {
console.log("value received from B", value)
}
return (
<>
<SafeAreaView style={styles.container}>
<View style={styles.headerContainer}>
<HeaderSB receiveValue={receiveValue}>
</HeaderSB>
</View>
<View style={styles.mainContent}>
<View style={styles.buttonBox}>
<Button onPress={() => navigation.navigate('Layout Props')} title="Layout Props"/>
<Button onPress={() => navigation.navigate('View Props')} title="View Style Props"/>
</View>
</View>
<View styles={styles.footerContainer}>
<FooterSB receiveValue={receiveValue}>
</FooterSB>
</View>
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
headerContainer: {
},
mainContent: {
},
buttonBox: {}
,
footerContainer: {
},
});Footer.js;
import * as React from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {AntDesign, Feather} from "@expo/vector-icons";
import {StackNavigation} from "./StackNavigation";
const FooterSB = ({navigation}) => {
return (
<>
{/* Bottom App Navigation */}
<View style={footerStyle.navCon}>
<View style={footerStyle.navBar}>
{/* Home Button */}
<TouchableOpacity style={footerStyle.home} onPress={() =>
navigation.navigate('Home')}
>
{/* Icon */}
<AntDesign name="home" size={50} color="white"/>
</TouchableOpacity>
{/* Navigation Divider */}
<View style={footerStyle.navDivider}/>
{/* Setting Button */}
<TouchableOpacity style={footerStyle.settings} onPress={() =>
navigation.navigate('Layout Props')}
>
{/* Icon */}
<Feather name="settings" size={50} color="white"/>
</TouchableOpacity>
</View>
</View>
</>
);
}
const footerStyle = StyleSheet.create({
navCon: {
flex: 1,
marginTop: 20,
alignItems: "center",
justifyContent: "flex-end"
},
navBar: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
backgroundColor: "#808080",
width: 500,
height: 50,
},
home: {
},
navDivider: {
backgroundColor: "#FFF",
width: 4,
height: 50,
},
settings: {
},
});
export default FooterSB;