React Native Navigation const { navigate } = this.props.navigation;

Question

I am learning react-native navigation https://reactnavigation.org/docs/intro/ . I see in examples there

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

I could not understand what exactly this line of code is for const { navigate } = this.props.navigation;

Answer 1

syntax has nothing to do with React Native it is called Destructuring assignment in es6 / es2015

const { navigate } = this.props.navigation;

is equivilent to with exception to var and const .

var navigate = this.props.navigation.navigate

the example without Destructuring should look like this

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

Answer 2

Include on your ServiceAction the this.props.navigation something like this:

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

because the props.navigation are by default on your parent component

and on HomeScreen component you will access to navition like:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

For me also was confusing before. Cheers!