CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigation
longm6
longm6

Reputation: 11

Why does my react navigation button not work?

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 aside from navigation. 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.

I need my button to work from the LoginScreen.js file, and I need it to be able to navigate to another page (MainScreen.js). Does anyone know why this isn't working?

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',
  },
});

My LoginScreen.js file:

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
                </Text>
                <TextInput style = {styles.input}
                    underlineColorAndroid = "transparent"
                    placeholder = "[email protected]"
                    placeholderTextColor = "#e997a1"
                    autoCapitalize = "none"
                    onChangeText = {this.handleEmail}/>
                <TextInput style = {styles.input}
                    underlineColorAndroid = "transparent"
                    placeholder = "********"
                    placeholderTextColor = "#e997a1"
                    autoCapitalize = "none"
                    onChangeText = {this.handlePassword}/>
                <Button title="Login"
            style={styles.submitButton}
            onPress={() => this.props.navigation('MainScreen')}/> 
                <View style = {{flex: 3, backgroundColor: '#172532'}}></View>
            </View>
        )
    }
}

This is my first time posting to a forum for help, so let me know if anything needs clarified.

Upvotes: 1

Views: 835

Answers (1)

Ajay Gupta
Ajay Gupta

Reputation: 2033

It should be this.props.navigation.navigate("Main").

Atleast this is what I have been doing so far in the apps I've created.

Take a look here: https://reactnavigation.org/docs/en/navigation-prop.html

Hope this helps!

Upvotes: 3

Related Questions