CODEWITHSUNDEEP
react-nativehttp-redirectbuttonreact-navigation
Citrix
Citrix

Reputation: 284

React-navigation with a button in header

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.

Upvotes: 0

Views: 920

Answers (1)

Chris Geirman
Chris Geirman

Reputation: 9684

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)

Upvotes: 1

Related Questions