CODEWITHSUNDEEP
javascriptiosreactjsreact-nativereact-native-router-flux
user6898719
user6898719

Reputation:

React Native Router Flux: How to style NavDrawer's button and navigation bar?

In React Native Router Flux, I have a functional react-native-drawer called NavDrawer. It currently has the default hamburger menu icon on the left side of the navigation bar, and would like to change it to another custom icon. So I tried, leftTitle='Menu', yet it didn't change.

So I was wondering how can I customize the react-native-drawer's default menu icon?

And I also changed the height of the navigation bar via navigationBarStyle, so the buttons currently sit close to the bottom of the navigation bar rather than in the middle. So in the navigationBarStyle, I attempted, flex: 1, flexDirection: 'row', alignItems: 'center', but did not change anything.

So how can I center align horizontally the elements in the navigation bar?

Here is the code:

        <Scene key='drawer' component={NavDrawer} open={false}>
          <Scene key="main" navigationBarStyle={styles.navigationBar} onRight={() => Actions.profile()} rightTitle='Profile'>
                        ...
          </Scene>
        <Scene/>

Thank you

Upvotes: 2

Views: 2293

Answers (1)

Georgios
Georgios

Reputation: 5087

So I was wondering how can I customize the react-native-drawer's default menu icon?

I use react-native-vector-icons that allows you to choose icons from several different collections, including Google's Material Icons. Here's what the code looks like in my case:

First, I use the renderLeftButton Scene prop to render my custom button.

<Scene key='navigationDrawerContentWrapper' navigationBarStyle={SceneStyle.navigationBar} titleStyle={SceneStyle.title}>
   <Scene key='mainScreen' component={MainScreen} title='Main Screen' renderLeftButton={NavigationItems.menuButton} sceneStyle={SceneStyle.scene} initial={true}/>
</Scene>

NavigationItems.js looks like this:

const menuButton = () => {
    return (
        <TouchableOpacity onPress={openDrawer} style={Dimensions.iconSmall.touchableObject}>
            <Icon name='menu'
                size={24}
                color={#ffffff}/>
        </TouchableOpacity>
    )
}

const openDrawer = () => {
    Actions.refresh({ key: 'drawer', open: true })
}

So how can I center align horizontally the elements in the navigation bar?

I think you meant align vertically. Try this solution that suggests using a flexbox with the following style:

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }

Upvotes: 1

Related Questions