I’m new to React Native, and I just trying to start my React Native app with Expo, and instantly says: “Unmatched Route – Page could not be found” when I just access on Metro Bundler through the Expo Go app.
On-Screen Error:
enter image description here
on App.tsx:
import React from 'react';
import Navigation from './app/Navigation/Navigation';
export default function App() {
return (
<Navigation />
);
}
on app/Navigation/Navigation.tsx:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from '../pages/Home';
import StartScreen from '../pages/StartScreen';
const Stack = createNativeStackNavigator();
export default function Navigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="StartScreen">
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
on app/pages/Home.tsx:
import { View, Text, SafeAreaView, useColorScheme } from 'react-native';
import styles from '../utilities/styles';
import React from 'react';
const packageJson = require('../../package.json');
const appVersion = packageJson.version;
const Home = () => {
const colorScheme = useColorScheme();
const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
const themeTextStyle = colorScheme === 'light' ? styles.lightTextTheme : styles.darkTextTheme;
return (
<SafeAreaView style={[styles.container, themeContainerStyle]}>
<View style={[styles.contentCenter]}>
<Text style={[themeTextStyle, styles.h3]}>Home Page</Text>
</View>
<View style={[styles.contentEnd]}>
<Text style={[themeTextStyle]}>Ver: {appVersion}</Text>
</View>
</SafeAreaView>
)
}
export default Home;
on app/pages/StartScreen.tsx:
import { View, Text, SafeAreaView, useColorScheme } from 'react-native';
import styles from '../utilities/styles';
import React from 'react';
const packageJson = require('../../package.json');
const appVersion = packageJson.version;
const StartScreen = () => {
const colorScheme = useColorScheme();
const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
const themeTextStyle = colorScheme === 'light' ? styles.lightTextTheme : styles.darkTextTheme;
setTimeout(redirectToHome, 5000);
return (
<SafeAreaView style={[styles.container, themeContainerStyle]}>
<View style={[styles.contentCenter]}>
<Text style={[themeTextStyle, styles.h3]}>Project Spectrum</Text>
</View>
<View style={[styles.contentEnd]}>
<Text style={[themeTextStyle]}>Ver: {appVersion}</Text>
</View>
</SafeAreaView>
)
}
export default StartScreen;
I just tried add my Entry Point route into the app.json but even that it doesn’t work.