Error with navigation buttons

Question

Error with navigation buttons

Navigation

#1 by (0 votes)
#2 by (0 votes)

-2

I'm trying to make when clicking a 'confirm' button, it goes to another login screen but I come across the following error:

undefined is not an object (evaluating '_this2.props.navigation.navigate') onPress C: \ Users \ DevUp \ myApp \ src \ screens \ Register.js: 33: 57 touchableHandlePress C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Components \ Touchable \ TouchableNativeFeedback.android.js: 187: 45 _performSideEffectsForTransition C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Components \ Touchable \ Touchable.js: 803: 34 _receiveSignal C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Components \ Touchable \ Touchable.js: 717:44 touchableHandleResponderRelease C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Components \ Touchable \ Touchable.js: 435: 24 invokeGuardedCallbackImpl C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 93: 15 invokeGuardedCallback C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 318:36 invokeGuardedCallbackAndCatchFirstError C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 342: 30 executeDispatch C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 715: 42 executeDispatchesInOrder C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 737: 20 executeDispatchesAndRelease C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 894: 29 executeDispatchesAndReleaseTopLevel C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 902: 37 forEachAccumulated C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 874: 16 runEventsInBatch C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 1050: 21 runExtractedEventsInBatch C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 1072: 19 C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 2711: 6 batchedUpdates $ 1 C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 17075: 14 batchedUpdates C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 2614: 31 _receiveRootNodeIDEvent C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 2709: 17 receiveTouches C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 2785: 28 __callFunction C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js: 349: 47 C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js: 106: 26 __guard C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js: 297: 10 callFunctionReturnFlushedQueue C: \ Users \ DevUp \ myApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js: 105: 17

I do not know what to do, I've already searched and searched but it did not solve my case

Registration Screen code below:

And I've 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

javascript react-native

asked by anonymous 13.12.2018 / 22:40

2 answers

Continue to search MySQL after a particular ID R code for likelihood test

score 0 · Answer 1

0

Good! Syntax error in:

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

Switch to:

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

Any questions:

link

14.12.2018 / 11:21

score 0 · Answer 2

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' For example:

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

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