Back button not working in react native navigation

4
votes

I am using react native navigation and I need to update back button design which I have achieved by following code

static navigationOptions = {
    title: '',
    headerStyle: {
      backgroundColor: '#544849',
    },
    tintColor: 'transparent',
    headerLeft: <TouchableOpacity onPress={() => this.props.navigation.goBack()}><Image source={require('../../img/close.png')} style={{marginTop: 10, marginLeft:10}} /></TouchableOpacity>
  };

But this way I get error undefined is not an object(evaluating r.props.navigation)

back button does nothing without onPress.

1
reactjsreact-nativereact-navigation
Are you using react-native-navigation or react-navigation? Your code looks like the latter. - Michael Cheng
@MichaelCheng "react-navigation": "^1.0.0-beta.11" - Adnan Ali
@AdnanAli Can you provide the complete code for the view. - Dan Philip
I use react-navigation. it didn't show button on top in Release build. but Simulator and real iPhone works. - shinriyo
I use createStackNavigator - shinriyo

1 Answers

5
votes

Acourding to docs for NavigationOptions you can change your code like below.

static navigationOptions = ({ navigation, screenProps }) => ({
        title: '',
        headerStyle: {
          backgroundColor: '#544849',
        },
        tintColor: 'transparent',
        headerLeft: <TouchableOpacity onPress={() => navigation.goBack()}><Image source={require('../../img/close.png')} style={{marginTop: 10, marginLeft:10}} /></TouchableOpacity>
});