I’m working on a React Native app with Expo and React Navigation. I have a navigation error that makes no sense.
The Problem: When I try to navigate to TermsOfService screen from my SignUpScreen, I get:
ERROR The action 'NAVIGATE' with payload {"name":"TermsOfService"} was not handled by any navigator.
What’s Weird:
-
PrivacyPolicyscreen works perfectly with identical setup -
The component file exists and is correctly exported
-
The import is correct in Calo.js
-
The Stack.Screen is registered
-
Metro bundler shows no errors (bundles 1373 modules successfully)
My Setup:
Calo.js (navigation file):
javascript
import TermsOfServiceScreen from './screens/TermsOfServiceScreen';
import PrivacyPolicyScreen from './screens/PrivacyPolicyScreen';
// In Stack.Navigator:
<Stack.Screen name="TermsOfService" component={TermsOfServiceScreen} options={{ title: 'Terms of Service', headerShown: true }} />
<Stack.Screen name="PrivacyPolicy" component={PrivacyPolicyScreen} options={{ title: 'Privacy Policy', headerShown: true }} />
TermsOfServiceScreen.js:
javascript
import React from 'react';
import { View, Text } from 'react-native';
export default function TermsOfServiceScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Terms of Service</Text>
</View>
);
}
SignUpScreen.js (navigation call):
javascript
<TouchableOpacity onPress={() => navigation.navigate('TermsOfService')}>
<Text style={styles.link}>Terms of Service</Text>
</TouchableOpacity>
What I’ve Tried:
-
Cleared Metro cache with
--reset-cache -
Full rebuild with
npx expo run:android -
Uninstalled and reinstalled the app on device
-
Verified no typos in screen name (‘TermsOfService’ matches exactly)
-
Created minimal test component (shown above)
-
Checked that component uses
export default
Environment:
-
React Native via Expo
-
React Navigation v6
-
Testing on Android physical device
Why would PrivacyPolicy work but TermsOfService fail with identical code structure?
