How to use react navigation in other classes?

Question

I have a header and a cart button. This button is for navigate to cart Screen. When I press button I have see error.

Error: undefined is not an object (evaluating '_this3.props.navigation.navigate')

Header is in Header Class in Header file: I use header in other screen like Wallet Screen.

<Header style={styles.headerStyle}>
      <Body>
        <Text>Logo</Text>
      </Body>
      <Right>
      <TouchableOpacity activeOpacity={0.5} onPress={() => {
                      this.props.navigation.dispatch(StackActions.reset({
                        index: 0,
                        actions: [
                          NavigationActions.navigate({ routeName: 'Cart' 
      })
                        ],
                      }))
                    }}>
        <Icon type="MaterialCommunityIcons" name="washing-machine"/>
        {this.state.cartCountNumber != 0 ?(
            <View style={styles.cartCountBox}>
              <Text>{this.state.cartCountNumber}</Text>
            </View>
         ):null}
      </TouchableOpacity>
      </Right>
</Header>

Wallet Screen: When I used on-press in content of wallet worked!

export default class WalletScreen extends React.Component{


render() {
  return (
    <Container>
    <HeaderShow />  // My header is here !!!!!!!!!!!!!!!!!!
    <Content>
    <Text>Wallet Screen</Text>



    // When I use button and on-press here, working fine!



    </Content>
   </Container>
   );
  }

 }

score 3 · Accepted Answer · answered Jan 29 '19 at 13:48

3

If you access this.props.navigation in your Wallet screen, when you add navigation prop to Header in Wallet screen, it will work;

export default class WalletScreen extends React.Component {
    render() {
        return (
            <Container>
                <HeaderShow navigation={this.props.navigation}/> // My header is here !!!!!!!!!!!!!!!!!!
                <Content>
                    <Text>Wallet Screen</Text>


                    // When I use button and on-press here, working fine!


                </Content>
            </Container>
        );
    }
}

answered Jan 29 '19 at 13:48

sdkcy

3,528
1
16
23

What about this : const HomeTab = () => (); – Alireza Jan 29 '19 at 14:08
I couldn't understand, please can you explain it more detail :) – sdkcy Jan 29 '19 at 14:13
Please check this link: https://github.com/react-native-community/react-native-tab-view – Alireza Jan 29 '19 at 14:15
And check Quick Start and const FirstRoute = () => ( ); . How can I add access to this ? – Alireza Jan 29 '19 at 14:17
Actually you can achieve that from your package(react-nativgation).It has createMaterialTopTabNavigator which works as you want. You don't need additional package. If you need some help, tutorial here https://medium.com/@dooboolab/types-of-navigation-in-react-navigation-v2-bce6d24d94ec – sdkcy Jan 29 '19 at 14:28
I know, but I think React Navigation does not support finger swipe --> When I run examples. – Alireza Jan 29 '19 at 14:38
While we set up this package, we must set up react-navigation-gesture-handler too. So we can achieve to the gestures. In TabNavigatorConfig of createMaterialTopTabNavigator ,swipeEnabled properties is exist. So you can use swipe by swipeEnabled:true (https://reactnavigation.org/docs/en/material-top-tab-navigator.html) – sdkcy Jan 29 '19 at 14:43
Have you any idea for this library? – Alireza Feb 08 '19 at 14:56
react-native-tab-view? i have not used it yet. But i used react-navigation. – sdkcy Feb 08 '19 at 16:23

How to use react navigation in other classes?

1 Answers1