navigation between component in react native

Question

I need to navigate between two view in React Native. But the problem is my component where the button to navigate is on an other component. I use the react-navigation.

Let me show you :

I have my component MainPage here

class MainPage extends Component {
  render() {
    return <View style={styles.container}>
              <ComponentWithButton /> 
          </View>
  }
}

So in my component ComponentWithButton :

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style={styles.container}>
                  <Button onPress={this.goToComponent.bind(this)}/> 
              </View>
      }
    }

My next component is called NextComponent.

I have the error undefined is not an object (evaluating "this.props.navigation.push")

My stack navigator is this :

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainPage
    },
    Next: {
      screen: NextComponent
    }
  },
  {
    initialRouteName: "Main"
  },
  {
    navigationOptions: {
      header: { visible: false }
    }
  }
);

I try to run my code with just one component it's working perfectly. I think there is problem because ComponentWithButton is not called in my RootStack or something like that. I don't know I am a newbie

Walter Shub · Accepted Answer · 2018-08-15 19:39:56Z

4

you didn't pass the navigation props to the <ComponentWithButton />

do something like this

<ComponentWithButton navigation={this.props.navigation}/>

also the method should be

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

if I recall

edited Aug 15, 2018 at 19:39

answered Aug 15, 2018 at 19:38

Walter Shub

6728 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter Shub Over a year ago

@Yapoto if its the right answer please check it so I get the cred

smcroissant Over a year ago

You are too fast, just wait 2min ;)

mcssym · Accepted Answer · 2018-08-15 19:49:49Z

3

react-navigation has a function withNavigation that populate navigation props in any of your Component. Just use it like that:

import { withNavigation } from 'react-navigation';

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style={styles.container}>
                  <Button onPress={this.goToComponent.bind(this)}/> 
              </View>
      }
}

export default withNavigation(ComponentWithButton);

answered Aug 15, 2018 at 19:49

mcssym

9445 silver badges8 bronze badges

1 Comment

mcssym Over a year ago

I don’t know but I think so!

Collectives™ on Stack Overflow

navigation between component in react native

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related