React Native Navigation - My Button Does Nothing

So, I am doing a huge mobile app project for my programming class. We have a “client” who we’re still waiting on to set up the server on their end, so we have a login button but it isn’t connected to the database or anything yet. At the moment, I’m just trying to get the login button to navigate to the main screen so that we can click through everything to make sure it all works.

The examples and forums I found online were all assuming that my button and navigation were going to be in the main App.js file. Or all the login button did was pop up an alert dialogue box. I can make an alert dialogue box pop up when the button is pressed, so I know the button works. My button is actually inside a different file, called LoginScreen.js, that is added to the navigation stack from App.js. I just wonder if I’m missing a library, or if I’m not calling something correctly. A lot of the other forums I found were really outdated.

The question essentially is: Is there anything that sticks out that I’m doing wrong to get navigation to work?

My App.js file:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'
import LoginScreen from './components/LoginScreen'
import MainScreen from './components/MainScreen'

const AppStackNavigator = createStackNavigator({
  Login:{ screen: LoginScreen },
  Main:{ screen: MainScreen }

const App = createAppContainer(AppStackNavigator);

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

Then I have my LoginScreen.js:

import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet, Button} from 'react-native';
import MainScreen from './MainScreen'

export default class Login extends Component {
	render() {
		return (
			<View style = {styles.container}>
				<Text style = {styles.header}>
					Welcome to Symbol Single
				<TextInput style = {styles.input}
					underlineColorAndroid = "transparent"
					placeholder = ""
					placeholderTextColor = "#e997a1"
					autoCapitalize = "none"
					onChangeText = {this.handleEmail}/>
				<TextInput style = {styles.input}
					underlineColorAndroid = "transparent"
					placeholder = " ********"
					placeholderTextColor = "#e997a1"
					autoCapitalize = "none"
					onChangeText = {this.handlePassword}/>
				<Button title="Login"
                                        onPress={() => this.props.navigation('MainScreen')}/>
				<View style = {{flex: 3, backgroundColor: '#172532'}}></View>

This is my first time posting on a forum for help, let me know if any clarification is needed.

I suggest you read through the React navigation docs.

I know nothing about React but from my reading I see one possibility: you are navigating to ‘MainScreen’ and that might need to be ‘Main’.

If you got to the Login screen via Main, the main screen may already be on the navigation stack, so navigation using goback might work (which should be OK for you as this is merely test code).