0

I'm using react-native-router-flux and have a navigation bar set up. Currently, the navigation bar is styled to have shorter height than the default height, so the elements inside the navigation bar container sits low, close to the bottom of the navigation bar container.

I tried navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}} but still no luck.

How can I vertically center the elements inside the navigation bar?

And currently, the right navigation bar button, Settings is set to navigate to Settings component. But on the Settings page, would like to remove the Settings right navigation bar button. How can I do so?

Here is how it looks like (navigation bar with the pink background is the container, and left drawer button, scene title (Home), and Settings button on right sit close the bottom of the navigation bar):

enter image description here

And here is the code:

const RouterWithRedux = connect()(Router)
const store = configureStore()

export default class App extends Component {
  constructor() {
    super()
  }

  render() {

    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='root'>
            <Scene component={Login} hideNavBar initial={true} key='login' sceneStyle={{backgroundColor: 'black'}} title='Login' type='reset'/>
            <Scene key='drawer' component={NavDrawer} open={false}>
              <Scene key="main" navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}} onRight={() => Actions.settings()} rightTitle='Settings'>
                <Scene
                  component={Home}
                  initial={true}
                  key='home'
                  sceneStyle={{backgroundColor: 'black'}}
                  title='Home'
                  type='reset'
                />
                <Scene
                  component={Settings}
                  direction='vertical'
                  key='settings'
                  sceneStyle={{backgroundColor: 'black'}}
                  title='Settings'
                />
              </Scene>
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

Thank you in advance

Rob
  • 14,746
  • 28
  • 47
  • 65

1 Answers1

1

What you are looking for is align-items: 'center'

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

navStyle: { backgroundColor: 'pink', height: 55, flex: 1, flexDirection: 'row', alignItems: 'center' }

Using the inspector (command+d in simulator) will really help you debug future styling issues in your react-native app

Maxwelll
  • 2,174
  • 1
  • 17
  • 22
  • I gave it a try but still the same. –  Oct 17 '16 at 05:20
  • Not sure what you are doing wrong here... `align-items: 'center'` is definitely how you center things vertically in a flex row... see my super basic example here for more clarity https://rnplay.org/apps/7sjakw – Maxwelll Oct 17 '16 at 16:00
  • @MaxwelLasky That's extremely odd. Could it be possible that it does not work with `navigationBarStyle`? Do you mind giving it a try? It tried it several times but nothing changed. –  Oct 18 '16 at 08:23
  • That's extremely odd. Could it be possible that it does not work with `navigationBarStyle`? Do you mind giving it a try? I tried it several times but nothing changed. –  Oct 18 '16 at 08:24