CODEWITHSUNDEEP
react-nativenavigator
Diego Andriano
Diego Andriano

Reputation: 38

Passing down navigation props from parent to child

I know this has been answered a thousand times, i just can't get it to work. I'm new to Javascript. Thanks in advance for your help!.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/Components/Login/Login.js'
import {StackNavigator, TabNavigator} from 'react-navigation'
import Signup from './src/Components/Signup/Signup.js'
import Router from './src/Components/BodyPages/Router.js'
import Form from './src/Components/Form/Form.js'

const RootStack = StackNavigator(
 {
   Home: {
     screen: Login,
   },
   Signup: {
     screen: Signup,
   },
   Router: {
     screen: Router,
   },
 },
 {
   initialRouteName: 'Home',
   headerMode:'none',
 }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

import React from 'react';
import { StyleSheet,TouchableOpacity, Text, View} from 'react-native';
import Logo from '../Logo/Logo.js'
import Form from '../Form/Form.js'
import styles from './Login.styles.js'
//onPress={alert:('ok');}
export default class Login extends React.Component {
render()
{
  return(
    <View style= {styles.container}>
    <Logo />
    <Form type= 'Ingresar' type2 = '¡Ingresar con Facebook!' />
    <View style= {styles.signUpView}>
    <Text style= {styles.signUpText}>Todavia no se encuentra registrado?</Text>
    <TouchableOpacity onPress = {() => this.props.navigation.navigate('Signup')}><Text style= {styles.signUpTextBolded}>Registrese!</Text></TouchableOpacity>
    </View>
    <View style= {styles.olvidoView}>
    <TouchableOpacity><Text style= {styles.signUpText}>Olvido su contraseña?</Text></TouchableOpacity>
    </View>
    </View>
    )
}
}

import React from 'react';
import { StyleSheet, TouchableOpacity, TextInput, Text, View } from 'react-native';
import styles from './From.styles.js'
import {StackNavigator} from 'react-navigation';


export default class Form extends React.Component
{
  render()
  {
    return (

      <View style={styles.container}>
            <TextInput style ={styles.input}
            placeholder = 'E-Mail'
            placeholderTextColor="rgba(0,0,0,0.3)"
            keyboardType="email-address"
            underlineColorAndroid='rgba(0,0,0,0)'
            onSubmitEditing={()=> this.contraseña.focus()} />

            <TextInput style ={styles.input}
            placeholder = 'Contraseña'
            placeholderTextColor="rgba(0,0,0,0.3)"
            underlineColorAndroid='rgba(0,0,0,0)'
            ref={(input) => this.contraseña = input}
            secureTextEntry = {true} />

            <TouchableOpacity onPress = {() => this.props.navigation.navigate('Router')} style={styles.Button}>
             <Text style={styles.buttonText}>{this.props.type}</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.Button2}>
            <Text style={styles.buttonText}>{this.props.type2}</Text>
          </TouchableOpacity>


          </View>
      );
  }
}

My problem: when i try to get from Form.js to Router.js, i get UNDEFINED IS NOT AN OBJECT (this2.props.navigation.navigate). I believe my mistake is that i need to pass the navigate prop to my files. I mean, where should i place what?

Thank a lot!.

Upvotes: 0

Views: 1284

Answers (1)

Michael Cheng
Michael Cheng

Reputation: 10451

Your Form isn't part of your navigator, so it won't have the navigation prop injected into it. That's why you are getting undefined.

Before going into the fix, first you should remove this line from Form.js:

import {StackNavigator} from 'react-navigation';

It does nothing. My guess is that you think that importing it will somehow give you access to the navigation prop, but that's not correct. react-navigation works as a HOC (Higher-Order Component) and injects the navigation prop into the screens you define in it.

Now for the fix, you have two simple ways to handle this:

  1. Pass down your navigation prop into the Form component in Login.js:

    <Form
  type='Ingresar'
  type2='¡Ingresar con Facebook!'
  navigation={this.props.navigation}
/>

  2. Define your onPress action in Login.js and pass that down into Form.js:

    // Login.js
<Form
  type='Ingresar'
  type2='¡Ingresar con Facebook!'
  navigationAction={() => this.props.navigation.navigate('Router')}
/>

// Form.js
<TouchableOpacity
  onPress={this.props.navigationAction}
  style={styles.Button}
>
  <Text style={styles.buttonText}>{this.props.type}</Text>
</TouchableOpacity>

Going into other solutions or why is one better than the other would be a completely different discussion and will become clearer as you learn more about JavaScript and React. For now, this should suffice to get you moving along.

Upvotes: 3

Related Questions