How to add an image inside a react navigation tab bar?

Question

I am using react-navigation where I am able to create the tab bars with text headings on them. I want to display images on them instead of texts. Is there a way to do it?

This is the code which I am using but it doesn't works. Any suggestion on how to do it the right way?

static navigationOptions = {
  tabBarIcon: (
  <Image style={{ width: 50, height: 50 }} 
         source={require('./../images/Logo.jpg')} />
)

}

Answer 1

Try using a function instead:

static navigationOptions = {
    tabBarIcon: (focused, tintColor) => (
      <Image style={{ width: 50, height: 50 }} 
             source={require('./../images/Logo.jpg')} />
    )
}

Answer 2

I derived this from above

      <Tab.Screen
        name="Home"
        component={HomeNav}            
        options={{
          tabBarIcon: ({ color }) => (
            <Image
              style={styles.bottomTabIcon}
              source={require('../assets/icons/home.png')                  
              }/>
         ), 
         tabBarLabel: 'Home'             
        }}
      />

Answer 3

According to the docs, the showIcon property is false by default on Android ( https://web.archive.org/web/20171015002750/https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android ).

Did you try setting it true?

static navigationOptions = {
    tabBarOptions: { showIcon: true, }
    tabBarIcon: ({ tintColor }) => {
              return (<Image
                  style={{ width: 50, height: 50 }}
                  source={{ uri: "https://facebook.github.io/react/img/logo_og.png" }}/>);}
    }
}