CODEWITHSUNDEEP
react-nativereact-router
digit
digit

Reputation: 4565

Cannot read property 'navigate' of Undefined in React Navigation

i'm React Native newbie. What i'm trying to do is added react navigation to my login page where user can click a button and navigate to the sign up page but i'm getting an error Cannot read property 'navigate' of Undefined. I've already searched the solution over an internet but no luck. This So does not help me - React Navigation - cannot read property 'navigate' of undefined and same with others .

Here is my code

index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

export default class tapak extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }
}

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

Upvotes: 6

Views: 49800

Answers (5)

deva26
deva26

Reputation: 1

I had the same issue, we must know that stack.navigator provides a default prop called 'navigation' to it's children. So, make sure you provide that default prop as a prop to further children as well. Now the function navigation will not be undefined.

Upvotes: 0

Nguy&#234;n Ho&#224;ng
Nguy&#234;n Ho&#224;ng

Reputation: 1053

Render the StackNavigator in your index.ios.js and move the button to the Login component:

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

class tapak extends Component {
  render() {
    return (
      <Stacks />
    );
  }
}

Login.js :

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }
}

Working example here.

Upvotes: 5

kunal pal
kunal pal

Reputation: 324

The only answer to this question is to just put const { navigate } = this.props.navigation in your render() function and then you can use it in any component that you need

For Example

render() {
const { navigate } = this.props.navigation;
 return (
  <View>
    <Text>This is the home screen of the app</Text>
    <Button
      onPress={() => navigate('Profile', { name: 'Brent' })}
      title="Go to Brent's profile"
    />
  </View>
);
}

Please read this doc for https://reactnavigation.org/docs/en/navigation-prop.html

Upvotes: 0

Kim
Kim

Reputation: 5425

I think you need to include navigationOptions, for example:

class MyComponent extends React.Component {
  static navigationOptions = {
    title: 'Great',
    // other configurations
  }

  render() {
    return (
      // your view
    )
  }
}

Also yu need to make sure you use AppRegistry.registerComponent('glfm', () => Stacks); rather than AppRegistry.registerComponent('glfm', () => tapak);

Upvotes: 0

Nidhi Patel
Nidhi Patel

Reputation: 1292

Write this code to index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

Login.js

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

export default class HomeScreen extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text
          onPress={() => navigate('Signup')}
        > SignUp</Text>
      </View>
    );
  }
}

Hope this help you.

Upvotes: 2

Related Questions