Search code examples
react-nativereact-native-router-flux

Show both title and image in navigation bar: react-native-router-flux

I want to show image as well as title in navigation bar but with below code I can achieve only one at a time.

Below code display just image and hamburger icon

<Drawer
      hideNavBar
      key="drawerMenu"
      contentComponent={SideMenu}
      drawerWidth={250}
      drawerPosition="left">

      <Scene key="dashboard"
             component={Home}
             navigationBarTitleImage = {require('./images/logo.jpeg')}
             navigationBarTitleImageStyle = {{width:30, height:30}}
             title={"Dashboard"}/>
</Drawer>

Output : enter image description here

Now when I comment out navigationBarTitleImage than only title gets visible, check code and output below

<Drawer
    hideNavBar
    key="drawerMenu"
    contentComponent={SideMenu}
    drawerWidth={250}
    drawerPosition="left">
          <Scene key="dashboard"
                 component={Home}
                 //navigationBarTitleImage = {require('./images/logo.jpeg')}
                 //navigationBarTitleImageStyle = {{width:30, height:30}}
                 title={"Dashboard"}/>

    </Drawer>

Output : enter image description here

I want three things in total : drawer icon, custom icon as well as title. Can anyone tell me what's wrong with my code?

Solution

  • Just use navBar property. It allows you to render anything you want.

    See docs