How to use react navigation in a const?

Question

I have use const to show components. Now when I use react navigation for a button in const, I see this error: undefined is not an object (evaluating '_this.props.navigation.navigate')

I have try to add navigation={this.props.navigation} to button for allow nabigation, But not worked.

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

Library link: http://github.com/react-native-community/react-native-tab-view

Answer 1

That is called a functional component, often referred to as a stateless-functional component.

One of the major differences is that SFCs do not automatically receive props, but rather must be passed as arguments. So instead of saying this.props you should use this pattern:

const WomenTab = (props) => ( // <-- add props as an argument
  <View>
    <Button onPress={() => {
      props.navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

Since the navigation prop is passed automatically to children of navigators, you don't need to do anything else. If you wanted to pass other props, you would do so as usual:

<WomenTab myProp={value} />

Another common pattern is to destructure the props passed to SFCs like so:

const WomenTab = ( {navigation} ) => ( // <-- you can pick the props you want via destructuring
  <View>
    <Button onPress={() => {
      navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

Hope that helps, best of luck!

Answer 2

You need to pass your props to the const, something like this

const WomenTab = (props) => (
    <View>
      <Button onPress={() => {
                        props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

Then when you use your const you pass the props that you want.

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

Answer 3

Basically your props are not being passed from Parent component to child component. Make sure you have defined your WomenTab component in createStackNavigator function. Also pass props in your function component.

const WomenTab = (props) => (
<View>
  <Button onPress={() => {
                    this.props.navigation.dispatch(StackActions.reset({
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'Wallet' })
                      ],
                    }))
                  }}>
      <Text>Click</Text>
  </Button>
<View>

);