Error with navigation buttons

Question

I am trying to make that by clicking a 'confirm' button, it goes to another screen (login) but I come across the following error:

Undefined is not an Object (evaluating '_this2.props.navigation.navigate') onPress C: Users Devup meuApp src screens Register.js:33:57 touchableHandlePress C: Users Devup meuApp node_modules React-Native Libraries Components Touchable Touchabativefeedback.android.js:187:45 _performSideEffectsForTransition C: Users Devup meuApp node_modules React-Native Libraries Components Touchable Touchable.js:803:34 _receiveSignal C: Users Devup meuApp node_modules React-Native Libraries Components Touchable Touchable.js:717:44 touchableHandleResponderRelease C: Users Devup meuApp node_modules React-Native Libraries Components Touchable Touchable.js:435:24 invokeGuardedCallbackImpl C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:93:15 invokeGuardedCallback C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:318:36 invokeGuardedCallbackAndCatchFirstError C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:342:30 executeDispatch C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:715:42 executeDispatchesInOrder C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:737:20 executeDispatchesAndRelease C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:894:29 executeDispatchesAndReleaseTopLevel C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:902:37 forEachAccumulated C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:874:16 runEventsInBatch C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:1050:21 runExtractedEventsInBatch C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:1072:19 C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:2711:6 batchedUpdates$1 C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:17075:14 batchedUpdates C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:2614:31 _receiveRootNodeIDEvent C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:2709:17 receiveTouches C: Users Devup meuApp node_modules React-Native Libraries Renderer Oss Reactnativerenderer-dev.js:2785:28 __callFunction C: Users Devup meuApp node_modules React-Native Libraries Batchedbridge Messagequeue.js:349:47 C: Users Devup meuApp node_modules React-Native Libraries Batchedbridge Messagequeue.js:106:26 __Guard C: Users Devup meuApp node_modules React-Native Libraries Batchedbridge Messagequeue.js:297:10 callFunctionReturnFlushedQueue C: Users Devup meuApp node_modules React-Native Libraries Batchedbridge Messagequeue.js:105:17

I don’t know what to do, I’ve searched and searched but it hasn’t solved my case

Registration Screen code below:

And I already created the Login screen

 import React, { Component } from 'react'

import {
    View, Text, StyleSheet, TouchableOpacity, TextInput

} from 'react-native'

class Register extends Component {
    state = {
        name: '',
        email: '',
        password: ''
    }


    render() {
        return (
            <View style={StyleSheet.container}>
                <TextInput placeholder="Name" style={styles.input}
                    autoFocus={true} keyboardType='name'
                    value={this.state.name}
                    onChangeText={name => this.setState({ name })} />
                <TextInput placeholder="Email" style={styles.input}
                    autoFocus={true} keyboardType='email-address'
                    value={this.state.email}
                    onChangeText={email => this.setState({ email })} />

                <TextInput placeholder='Password' style={styles.input}
                    secureTextEntry={true} value={this.state.password}
                    onChangeText={password => this.setState({ password })} />

                <TouchableOpacity onPress={() => this.props.onPress.navigation.navigate('Login')} style={styles.buttom}>
                    <Text style={styles.buttomText}>Confirm</Text>
                </TouchableOpacity>

            </View>
        )
    }
}

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

    },
    buttom: {

        marginTop: 15,
        marginLeft: '25%',
        backgroundColor: '#4286f4',
        borderRadius: 5,
        padding: 10,
        width: '50%'

    },
    buttomText: { 
    fontSize: 15,
    color: '#FFF',
    textAlign: 'center'

    },
    text: {
        marginTop: 5,
        fontSize: 15,
        textAlign: 'center'
    },
    input: {
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
        marginLeft: '10%',
        width: '80%',
        backgroundColor: '#EEE',
        height: 40,
        borderWidth: 2,
        borderColor: '#333',
    }
})

export default Register

Answer 1

I made some changes to your code and put an explanation below

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

class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      email: '',
      password: ''
    }
  }

  render() {
    return (
      <View style={StyleSheet.container}>
        <TextInput placeholder="Name" style={styles.input}
          autoFocus={true} keyboardType='name'
          value={this.state.name}
          onChangeText={name => this.setState({ name })} />
        <TextInput placeholder="Email" style={styles.input}
          autoFocus={true} keyboardType='email-address'
          value={this.state.email}
          onChangeText={email => this.setState({ email })} />
        <TextInput placeholder='Password' style={styles.input}
          secureTextEntry={true} value={this.state.password}
          onChangeText={password => this.setState({ password })} />

        <TouchableOpacity 
          style={styles.buttom}
          onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.buttomText}>Confirm</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

In this case, I’m assuming you have a Stacknavigator with your 'Login' screen and your 'Register' screen For example:

const Exemplo = createStackNavigator(
  {
    Login: Login,
    Register: Register
  },
  {
  initialRouteName: "Login"
  }
);

In order for this.props.navigation.navigate('Login') to work, you need to have the login screen inside a stackNavigator. This stackNavigator can stay in your App.js or in some separate file to take care of your navigation in the app.

Answer 2

Good! Syntax error in:

 this.props.onPress.navigation.navigate('Login')

Change to :

 this.props.navigation.navigate('Login')

Any doubt :

https://reactnavigation.org/docs/en/navigating.html