react native navigationOptions navigate to other route from header button

1
votes

I am trying to navigate to a different route when a button in the header is clicked. Using react-navigation in my react-native project.

static navigationOptions   = ({ navigation, screenProps }) => ({
    title: 'Header Text',
    headerRight: 
        <Button 
            title="Settings"
            backgroundColor="rgba(0,0,0,0)"
            color="rgba(0,122,255,1)"
            onPress={() => navigation.navigate('settings')}
        />,
});

ERROR - Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {style}

My package.json entry for react-navigation

"react-navigation": "^1.5.10"

None of the solutions described here seems to work. Probably due to different version??

https://github.com/react-navigation/react-navigation/issues/286

1
reactjsreact-nativereact-navigation
Seems to work fine in even in your described package, do you get this error after button click? If so please post the code for the settings screen. - Pritish Vaidya
it was actually an issue with my settings screen. nothing wrong with this code. Thanks for the tip. - Sanath

1 Answers

1
votes

use this code

static navigationOptions = ({ navigation })=>{
        const { navigate } = navigation
        return{
            title: 'Header Text',
            headerRight:(<Button 
            title="Settings" backgroundColor="rgba(0,0,0,0)" color="rgba(0,122,255,1)"
            onPress={() =>navigate('settings')}
        />)
        } 
    }