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

According to the docs, the showIcon property is setted to false 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" }}/>);}
    }
}