React-native-router-flux renderRightButton() method

Question

I'm trying to render a navbar custom right button.

React-native-router-flux version: ^3.43.0

The code looks something like this:

<Scene
  initial
  key="RegistrationType"
  navigationBarStyle={Style.navBarStyleBlue}
  renderRightButton={() => (
    <View style={{
      backgroundColor: 'yellow',
      height: 50,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <TouchableOpacity onPress={Actions.Login}>
        <Text>Login</Text>
      </TouchableOpacity>
    </View>
  )}
  component={RegistrationType}
  title=""
  hideNavBar={false}
/>

Navbar's style:

navBarStyleBlue: {
  backgroundColor: 'blue',
  borderBottomWidth: 0,
  height: 50
},

So basically I'm trying to get the right button to be aligned vertically with the navbar and get something like this:

But instead I get this:

Any ideas?

David Gevorgyan David Gevorgyan · Accepted Answer · 2017-11-30T16:06:40

Figured it. Have to use rightButtonStyle property.

rightButtonStyle={{
  top: 0,
  height: 50,
  padding: 0,
  justifyContent: 'center',
  alignItems: 'center'
}}

React-native-router-flux renderRightButton() method

1 Answers