First, let's resolve the "Failed building JavaScript bundle" error you're seeing after installing react-navigation. The issue is that the react-navigation package you installed is outdated and incompatible with the Expo-managed project created via create-react-native-app. Here's how to fix it:

Step 1: Clean Up Incompatible Packages #

Uninstall the old react-navigation package:

npm uninstall react-navigation

Step 2: Install Modern Navigation Dependencies #

For Expo-managed projects, use the latest React Navigation v6 setup (this is fully compatible with your project structure):

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

Step 3: Restart the Metro Bundler #

Stop your current npm start process, then run it again to ensure the new dependencies are picked up:

npm start

You can also press r in the terminal to reload the bundle if you run into any last-minute issues.

Now, Implement Navigation from LoginForm to Status #

Let's modify your code to add the navigation flow between your two screens:

1. Update App.js to Set Up Stack Navigator #

Replace your existing App.js with this code to define the navigation stack and connect your screens:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginForm from './LoginForm';
import CheckStatus from './Status';

const Stack = createNativeStackNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Login">
          <Stack.Screen 
            name="Login" 
            component={LoginForm} 
            options={{ title: 'Login' }} 
          />
          <Stack.Screen 
            name="Status" 
            component={CheckStatus} 
            options={{ title: 'Status' }} 
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

2. Modify LoginForm.js to Add Navigation On Press #

Update the Login button in LoginForm.js to trigger navigation when tapped:

import React, { Component } from 'react';
import { View, StyleSheet, TextInput, TouchableOpacity, Text} from 'react-native';

export default class LoginForm extends React.Component {
  render() {
    return (
      <View style={styles.Container}>
        <View style={styles.box}>
          <TextInput 
            placeholder="Username" 
            returnKeyType="next" 
            onSubmitEditing={() => this.passwordInput.focus()} 
            keyboardType="email-address" 
            style={styles.input} 
          />
          <TextInput 
            placeholder="Password" 
            returnKeyType="go" 
            secureTextEntry 
            ref={(input) => this.passwordInput = input} 
            style={styles.input} 
          />
          {/* Add onPress handler to navigate to Status screen */}
          <TouchableOpacity 
            style={styles.buttonContainers}
            onPress={() => this.props.navigation.navigate('Status')}
          >
            <Text style={styles.buttonText}> Login </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: { padding: 20, height: 700, backgroundColor: '#ecf0f1' },
  input: { height: 40, backgroundColor: '#95a5a6', marginBottom: 10, color: '#FFF', paddingHorizontal: 10, borderRadius: 10 },
  buttonContainers: { backgroundColor: '#03A9F4', paddingVertical: 10, borderRadius: 10 },
  buttonText: { textAlign: 'center', fontWeight: '700', color: 'white', fontSize: 20, fontWeight: 'bold' },
  box:{ marginTop: 250, padding: 20, height: 700, }
});

3. Verify Status.js #

Your Status.js file is already set up correctly—we’re referencing its exported CheckStatus component in the navigator, so no changes are needed here.

After making these updates, restart your Metro bundler and run the app again. The bundle error should be resolved, and pressing the Login button will smoothly navigate you to the Status screen.

内容的提问来源于stack exchange，提问作者Asad Ali Butt