React-navigation with a button in header

Question

I'am trying to redirect to a profile page from a button in the header with react-navigation.

Here's what the createStackNavigator :

const NavigationApp = createStackNavigator({
    Profile: { screen: ProfileScreenContainer },
    Application: { 
        screen: Application,  
        navigationOptions: {
            title: "Title",
            headerStyle: {
            backgroundColor: "#000",
        }, 
        headerTintColor: '#fff',
        headerRight: (
          <HeaderScreenContainer/>
        ), 
      },
    },
},
{
    initialRouteName: "Application"
});
const App = createAppContainer(NavigationApp);
export default App;

Here's my screen container for the header :

export default class HeaderScreenContainer extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
    }

    handleProfile() {
        this.props.navigation.navigate('Profile');
    }
}

This is the button that I am rendering in header and that is supposed to redirect to the profile page.

export default class HeaderScreen extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Button onPress={() => this.props.profile()}>
                <Text>Profile</Text>    
            </Button>
        )
    }
}

I am constantly getting the error : undefined is not an object (evaluating 'this.props.navigation.navigate'). Actually it's supposed to redirect to the profile page.

Chris Geirman · Accepted Answer · 2019-01-03 20:52:44Z

1

I believe you just need to wrap your HeaderScreenContainer in the withNavigation HOC like this...

class HeaderScreenContainer extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
    }

    handleProfile() {
        this.props.navigation.navigate('Profile');
    }
}

export default withNavigation(HeaderScreenContainer)

answered Jan 3, 2019 at 20:52

Chris Geirman

9,7045 gold badges40 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

React-navigation with a button in header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related