Add button to header of React Navigation header

Question

I have this compononet of mine ... where i want to draw a logout button and also hide the back arrow . but i am not able to do so . Can anyone tell me where i am doing it wrong? I have followed the original documentation of react navigation as well but no solution.

class Welcome extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user: this.props.navigation.state.params.user,
     }
  }

  static navigationOptions = ({ navigation}) =>  {
    const { params = {} } = navigation ; 
    return {
      headerTitle : "Welcome",
      headerLeft: null,
      headerRight : (
        <TouchableOpacity
         style={{ backgroundColor: '#29434e' , padding: 10}}
         onPress={() => params.onlogout}
       >
         <Text style={{ marginVertical:5, color: 'rgba(255,255,255,0.7)', fontSize: 20,}}> Logout </Text>
       </TouchableOpacity>   
      ) 
    };
  };

  _Logout = () => {
   this.props.Signout();
  };

  componentDidMount() {
    this.props.navigation.setParams({ onlogout : this._Logout , isSaving: false})
  }

    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    Signout: () => dispatch(Signout())
  }
}

export default connect(null,mapDispatchToProps)(Welcome)

@NooruddinLakhani the error is removed but the button is still not showing — Ali Yar Khan
– Ali Yar Khan, Commented Aug 28, 2019 at 14:52
I guess you've not return anything in render() method so nothing show on screen. — Nooruddin Lakhani
– Nooruddin Lakhani, Commented Aug 28, 2019 at 15:51

Pedro Henrique · Accepted Answer · 2019-08-29 00:22:09Z

1

That is because of the marginVertical:10 on your Text style. Remove it and you should see your button.

Here is a working example: https://snack.expo.io/rJOSqqEHS

answered Aug 29, 2019 at 0:22

Pedro Henrique

3941 silver badge6 bronze badges

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

4 Comments

Ali Yar Khan Over a year ago

not working still not visible also the back button is visible now ... i have updated the code and question can you please recheck ?

Pedro Henrique Over a year ago

Could you please try to reproduce on a snack? Hard to guess what's going on. I just showed you a working example. Thank you!

Ali Yar Khan Over a year ago

it is working on expo but not on react-native cli ! Don't know why ? i have checked it

Ali Yar Khan Over a year ago

static navigationOptions is not working. When i used the default navigation option it work correctly !

Ali Yar Khan · Accepted Answer · 2019-08-30 11:13:49Z

So the problem is component is not getting the header options using static navigationOptions thing but when i try the defaultNavigationOptions it is working perfect and the code is as belows :

const otherApp = createStackNavigator({
  Welcome : { 
    screen : WelcomeScreen
  }
},
{
  defaultNavigationOptions : ({navigation}) => ({
    title : 'Welcome',
    headerStyle: {
      backgroundColor: '#29434e',
      shadowColor: 'transparent',
      elevation: 0
    },
    headerRight: (
      <TouchableOpacity
        style={{ backgroundColor: '#DDDDDD', padding: 5 }}
        onPress={() => navigation.getParam('logout')}>
        <Text
          style={{
            fontSize: 10,
          }}>
          Logout
        </Text>
      </TouchableOpacity>
    ),
  })
});

Hope it will help someone in future. My environment is :

"react": "16.8.6",
"react-native": "0.60.3",
"react-navigation": "^3.11.0",

Collectives™ on Stack Overflow

Add button to header of React Navigation header

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related