CODEWITHSUNDEEP
react-nativereact-navigationreact-native-iosstack-navigator
Re-Angelo
Re-Angelo

Reputation: 557

onPress React navigation doesn't work for component inside Stacknavigator

Hey guys for the Stacknavigator I made a component and placed this in the headerRight of navigation options because I can only show one Icon there. is just a view with three icons in it. However when i try to do an onPress with the props.navigation.navigate function I get an error saying undefined is not an object this.props.navigation.navigate. How can i work around this?

export const HomeStack = StackNavigator({ Home: { screen: Tabs, navigationOptions: { headerStyle: { backgroundColor: '#a3a5ab', }, headerRight: <Headericons /> } },

class Headericons extends React.Component {

constructor(props) {
    super(props);
}


Shoppingcart= () => {
    this.props.navigation.navigate('Shoppingcart');
};


render() {

    return (
        <View style={{flexDirection: 'row', marginRight: 10}}>
          <TouchableWithoutFeedback
              onPress={()=> this.Shoppingcart() } >


            <Icon
                name={'shopping-cart'}
                size={30}
                color={'#ffffff'}
                style={{marginRight: 0, paddingRight: 10, flexDirection: 'row'}}

            />
          </TouchableWithoutFeedback>

Upvotes: 0

Views: 1096

Answers (1)

Rob Walker
Rob Walker

Reputation: 905

Looks like you need to pass navigation through to the component. 

export const HomeStack = StackNavigator({
    Home: {
        screen: Tabs,
        navigationOptions: ({ navigation }) => ({
            headerStyle: {
                backgroundColor: '#a3a5ab',
            },
            headerRight: <Headericons navigation={navigation} />
        })
    },
})

Upvotes: 1

Related Questions