Warning: Failed prop type the prop “onPress” is marked as required in “Button”, but its value is “undefined”

Question

I defined the prop _navigateToRegister, but when I press on the button nothing happens. And also I have this mistake warning: Warning: Failed prop type the prop "onPress" is marked as required in "Button", but its value is "undefined" Where is the mistake?

app.js

import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation';
import Login from './src/screens/Login';
import Secured from './src/screens/Secured';
import Register from './src/screens/Register';

const LifeStorm = createStackNavigator({
Login: { screen: Login },
Register: { screen: Register },
Secured: { screen: Secured },
});

export default class ReactNativeStormpath extends Component {

state = {
isLoggedIn: false
}

render() {

if (this.state.isLoggedIn)
  return <Secured
      onLogoutPress={() => this.setState({isLoggedIn: false})}
    />;
else
  return <Login
      onLoginPress={() => this.setState({isLoggedIn: true})}
    />;
}

}

AppRegistry.registerComponent("App", () => App);

login.js

import React, { Component } from "react";
import { ScrollView, Text, TextInput, View, Button } from "react-native";

export default class Login extends Component {

navigateToRegister = () => {
this.props.navigation.navigate("Register");
};

render() {
return (
  <ScrollView style={{ padding: 20 }}>
    <Text style={{ fontSize: 27 }}>Login</Text>
    <TextInput placeholder="Username" />
    <TextInput placeholder="Password" />
    <View style={{ margin: 7 }} />
    <Button onPress={this.props.onLoginPress} title="Submit" />
    <Button onPress={this.props._navigateToRegister} title = "Register" />
  </ScrollView>
);
}
}

module.exports = Login;

register.js

import React, { Component } from 'react';
import {
ScrollView,
Text,
TextInput,
View,
Button
} from 'react-native';

export default class Register extends Component {
render() {
    return (
        <ScrollView style={{padding: 20}}>
            <Text
                style={{fontSize: 27}}>
                Register
            </Text>
            <TextInput placeholder='E-Mail' />
            <TextInput placeholder='Username' />
            <TextInput placeholder='Password' />
            <TextInput placeholder='Confirm Password' />
            <View style={{margin:7}} />
            <Button
                    onPress={() => navigate("Login")}
                    title="Submit"
                />
            </ScrollView>
        )
   }
   }

P.S I am new in React Native.

Login: You need just: <Button onPress={this.navigateToRegister} title = "Register" /> . because you are acess the function from this class and not from the parent. — joelbarbosa

user3210641 user3210641 · Accepted Answer · 2018-06-13T20:25:46

Seems to me that you're not actually sending the _navigateToRegister prop to the component.

Which means that event if you log this.props._navigateToRegister to the console the result should be undefined. And because you're sending undefined value to onPress you get that prop type error.

If you want to reference the navigateToRegister method of your Login component you can do it like this:

<Button onPress={this.navigateToRegister} title = "Register" />

Warning: Failed prop type the prop “onPress” is marked as required in “Button”, but its value is “undefined”

1 Answers