Having trouble navigating screen to screen. React Native

Question

Not able to navigate within screens. I'm building an app on visual studio code with Android studio. Please tell me if I'm missing something. Getting error: Unable to resolve "./views/Header/Header" from "node_modules\react-navigation-stack\lib\module\index.js" What am i doing wrong? I need help please. Thanks

App.js

```import React from 'react';
import { StyleSheet, Text, View, StatusBar, Platform, YellowBox} from 'react-native';

import Register from './app/components/Register';
import Login from './app/components/Login';
import MenteApr from './app/components/MenteApr';

import { createStackNavigator } from 'react-navigation-stack';

const Navigator = createStackNavigator(
 {
        initialRouteName: 'Register',
      },
  {
    Register: {
      screen: Register
    },
     Login: {
      screen: Login,
    },
    MenteApr: {
      screen: MenteApr,
      },    
    }    
);

export default class App extends React.Component {

  render(){
  return <Navigator />;
}
}```
This is the register file 
**Register.js**
```import React from 'react';
import { 
    StyleSheet, 
    Text, 
    View,
    TextInput,
    TouchableOpacity,
    Image,
    Button
} from 'react-native';

export default class Register extends React.Component {
  static navigationOptions = {
    title: 'Register',
  };
  render(){
  return(
    <View style={styles.register}>

  <Text> Welcome to MentorMe</Text>

        <Text> Sign Up </Text>

        <TextInput} placeholder = "Student ID"
        underlineColorAndroid= {'transparent'} />

        <Button
         title = "Register"
         onPress={()=>
            this.props.navigation.push('MenteApr')  } 
          />

        <View >

        <Text> Already have an account? </Text>
        <Button 
          title  = "Login"
          onPress={()=>
            this.props.navigation.navigate('Login') } 
        />
      </View>


    </View>

  );
}
}

const styles = StyleSheet.create({
  register: {
    alignSelf: 'stretch',
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#36485f',
    paddingLeft: 60,
    paddingRight: 60,
  }```
This is the Login file 
**Login.js**

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

export default class Login extends React.Component {
static navigationOptions ={
    title: "Login",
  };
  render(){

  return(
    <View style = {styles.login}>

  <Text> Welcome Back!</Text>

        <TextInput placeholder = "Student ID"
        underlineColorAndroid={'transparent'} />


<Button 
          title="Login"
          onPress ={() =>
            this.props.navigation.push('MenteApr')
            } />

        <View>
        <Text> Don't have an account? </Text>
        <Button
          title="Sign Up"
          onPress ={() =>
            this.props.navigation.navigate("Register")} 
        />
      </View>

    </View>

  );
}
}

const styles = StyleSheet.create({
    login: {
      alignSelf: 'stretch',
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#36485f',
      paddingLeft: 60,
      paddingRight: 60,
    }

what react navigation version you are using, v5 or v4. Please complete the installation process. — Imjaad
I'm not sure tbh Im new and I used this link. Does my code not look fine? medium.com/@marizu_makozi/… — sarah nafees

Asad Asad · Accepted Answer · 2020-05-11T06:30:57

use this code, I try to fix all issues, and now it's working fine.

nmp install --save react-navigation-stack

nmp install --save react-navigation

App.js

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Platform, YellowBox } from 'react-native';

import Register from './app/components/Register';
import Login from './app/components/Login';
//import MenteApr from './app/components/MenteApr';

//Import React Navigation
import { createSwitchNavigator, createAppContainer } from 'react-navigation';


//import all the screens we are going to switch 
const App = createSwitchNavigator({
    //createSwitchNavigator will not store your old screen in stack like createStackNavigator
    //So all the screen that comes in createSwitchNavigator will appear once in a whole session
    Register: { screen: Register },
    Login: { screen: Login },
});
export default createAppContainer(App);

Login.js

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

export default class Login extends React.Component {
    static navigationOptions = {
        title: "Login",
    };
    render() {

        return (
            <View style={styles.login}>

                <Text> Welcome Back!</Text>

                <TextInput placeholder="Student ID"
                    underlineColorAndroid={'transparent'} />


                <Button
                    title="Login"
                    onPress={() =>
                        this.props.navigation.push('MenteApr')
                    } />

                <View>
                    <Text> Don't have an account? </Text>
                    <Button
                        title="Sign Up"
                        onPress={() =>
                            this.props.navigation.navigate("Register")}
                    />
                </View>

            </View>

        );
    }
}

const styles = StyleSheet.create({
    login: {
        alignSelf: 'stretch',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#36485f',
        paddingLeft: 60,
        paddingRight: 60,
    }
});

Register.js

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

export default class Register extends React.Component {
    static navigationOptions = {
        title: 'Register',
    };
    render() {
        return (
            <View style={styles.register}>

                <Text> Welcome to MentorMe</Text>

                <Text> Sign Up </Text>

                <TextInput placeholder = "Student ID"
        underlineColorAndroid= {'transparent'} />

        <Button
                    title="Register"
                    onPress={() =>
                        this.props.navigation.push('MenteApr')}
                />

                <View >

                    <Text> Already have an account? </Text>
                    <Button
                        title="Login"
                        onPress={() =>
                            this.props.navigation.navigate('Login')}
                    />
                </View>


            </View>

        );
    }
}

const styles = StyleSheet.create({
    register: {
        alignSelf: 'stretch',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#36485f',
        paddingLeft: 60,
        paddingRight: 60,
    }
});

Having trouble navigating screen to screen. React Native

2 Answers