drawerImage does not display Image

[abhaychitnis]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.15
• react-native v0.46.4

Expected behaviour

My Router.js file is as follows

  import React from 'react';
  import { Image } from 'react-native';
  import { Scene, Router, Modal } from 'react-native-router-flux';
  import OnMoveVehicleList from './components/OnMoveVehicleList';
  import EntryForm from './components/EntryForm';
  import TopDashboard from './components/TopDashboard';
  import TabView from './components/TabView';

  const RouterComponent = () => {
    return (
      <Router>
        <Scene
          key="modal"
          component={Modal}
          hideNavBar
        >
          <Scene key="auth">
            <Scene
              key="login"
              component={EntryForm}
              hideNavBar
            />
          </Scene>
          <Scene
            key='drawer'
            hideBackImage
            drawer
            contentComponent={TabView}
            drawerImage={
                require('./components/hamburger.png')
                }
          >
          <Scene key="main" hideNavBar>
            <Scene key="top">
              <Scene
                key="topdashboard"
                component={TopDashboard}
                title="Dashboard"
                navigationBarStyle={styles.navBar}
                titleStyle={styles.titleStyle}
                initial
              />
            </Scene>
            <Scene
              key="tabOnMoveVehicles"
              tabs
              tabBarPosition="bottom"
              tabBarOptions={styles.tabBarOptions}
              tabBarStyle={styles.tabBarStyle}
              tabStyle={styles.tabStyle}
            >
              <Scene
                key="Normal"
                back
                component={OnMoveVehicleList}
                title="On Move Vehicles Normal"
                navigationBarStyle={styles.navBar}
                style={styles.titleStyle}
                hideTabBar={false}
                headerTintColor='white'
              />
              <Scene
                key="Warnings"
                component={OnMoveVehicleList}
                title="On Move Vechiles with Warnings"
                back
                navigationBarStyle={styles.navBar}
                titleStyle={styles.titleStyle}
                hideTabBar={false}
                headerTintColor='white'
              />
            </Scene>
          </Scene>
          </Scene>
      </Scene>
      </Router>
    );
  };


  const styles = {
    navBar: {
      backgroundColor: '#c52a34', // changing navbar color
      marginBottom: 0,
      borderBottomWidth: 0,
      paddingBottom: 0
    },
    tabBarStyle: {
      backgroundColor: '#c52a34'
    },
    tabStyle: {
      backgroundColor: 'rgb(130,0,0)'
    },
    tabBarOptions: {
      style: { backgroundColor: 'rgb(130,0,0)' },
      inactiveTintColor: 'rgb(130,0,0)'
    },
    titleStyle: {
      color: 'white', // changing navbar title color
      fontWeight: 'bold',
      alignSelf: 'center'
    }
  };

  const getDrawerIcon = (tintColor) => {
    return (
      <Image
        source={require('./components/hamburger.png')}
        size={30}
        color={tintColor}
      />
    );
  };

  export default RouterComponent;

If I do not use the drawerImage option I can see the the default image on the left side of the title bar and it works as expected.

However after adding the drawerImage, I am not able to see any image on the left side. However the area where the image is supposed to appear is responsive to touch and does open the drawer as desired. Its just the lack of image....

What am I doing wrong ? Or is this a pending bug ?

[aksonov]

Could you reproduce this issue with Example project from this repo?

[abhaychitnis]

I am stuck in getting the example project to clone and run ! Are there any instructions on how to clone the project and run ? I am probable missing something basic. But I really don't have time to debug a new project.

[aksonov]

Fixed for latest master

[abhaychitnis]

Upgraded to Beta 17. But the issues remains. I still do not see the custom image. If I remove the drawerImage option, I can see the the default image. Also as I have written earlier, the space in the navigation bar where the image is supposed to appear is responsive to touch and opens the drawer component as desired, even though the there is no image.

As can be seen in the merged image above, the upper part is the render using custom drawerImage and the lower part is by not using the drawerImage option

I have tried using different images and different formats (png , jpg), but there is no effect.

[aksonov]

Could you check iOS ?

[abhaychitnis]

OK. The issues seems to be with the image size. I reduced the size of the custom image (.png) and this time it seemed to work. Here is the render

Is there a way I can set width and height of the drawerImage ? I think that will work.

[aksonov]

It is not supported now, PR is welcome. Closing this ticket.