React navigation throwing error when moving between screens - react-native-navigation

Question

I have defined two screens in my App.js.
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import HomeScreen from './HomeScreen';
import FAQScreen from './FAQScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="FAQ" component={FAQScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
In my HomeScreen.js I want to simply press a button and navigate to FAQScreen.
However, I keep getting an error:
The action 'NAVIGATE' with payload {"name":FAQScreen}" was not handled by any navigator.
Do you have a screen named 'FAQScreen'?
I tried to do multiple Google search and found no solution to solve this.
Here is my HomeScreen.js for completeness.
mport 'react-native-gesture-handler';
import React, { Component } from 'react';
import { StyleSheet, Text, SafeAreaView, View, Button} from 'react-native';
class MyButtonText extends Component {
render() {
var phoneHeight = 500;
const myFontSize = phoneHeight/25;
return (
<Text style={{ fontFamily: "Courier New", fontSize: myFontSize }} onPress = {() => console.log("text clicked")}>
{this.props.children}
</Text>
);
}
}
class MyInfoText extends Component {
render() {
var phoneHeight = 500;
const myFontSize = phoneHeight/30;
return (
<Text numberOfLines = {2} style={{ fontFamily: "Courier New", fontSize: myFontSize, alignItems: "center", textAlign: "center"}}>
{this.props.children}
</Text>
);
}
}
function HomeScreen({ navigation }) {
const toolKaiserID = "alkjakljf";
navigateToScreen=()=>{
console.log('Going to FAQ screen now...');
navigation.navigate('FAQScreen')
}
return (
// this is a comment
<SafeAreaView style={styles.container}>
{/* top bar */}
<View style = {topBarStyle.container}>
<Button onPress={this.navigateToScreen} title="Information" />
<MyButtonText>ID: {toolKaiserID}</MyButtonText>
<Button title="Feedback"/>
</View>
{/* info bar */}
<View style = {infoBarStyle.container}>
<MyInfoText>paper on floor -- tool(s) on top; take photos from at least 3ft/1m away</MyInfoText>
</View>
{/* camera view */}
<View style = {cameraStyle.container}></View>
{/* bottom bar */}
<View style = {bottomBarStyle.container}>
<Button title="1 Photos"/>
<Button title="2 Check"/>
<Button title="3 Editor"/>
<Button title="4 Paper"/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#434343',
},
});
const viewStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue',
},
});
const topBarStyle = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: 'space-around',
backgroundColor: 'blue',
},
});
const infoBarStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
});
const cameraStyle = StyleSheet.create({
container: {
flex: 5,
backgroundColor: 'red',
},
});
const bottomBarStyle = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: 'space-around',
backgroundColor: 'yellow',
},
});
export default HomeScreen;

Answer 1

There is no FAQScreen name in your stack navigator
<Stack.Screen name="FAQ" component={FAQScreen} />
When you use navigate, it's need the name, that is "FAQ"
If you want to navigate using name "FAQScreen", you can set like this:
<Stack.Screen name="FAQScreen" component={FAQScreen} />