react-native-navigation Tab Bar Icon from Android Drawables and iOS xcassets

Question

I am using react-native-navigation as a preferred navigation approach in our react-native application. We are planning on using the hybrid approach for icons where we still add icons in xcassets and drawables.

I am seeing a specific issue with icons for tab-bar on android when loading them from drawables. My code is below which works perfectly fine for iOS:

Tabs Definition:

const Tabs = [
{
    label: 'Home',
    screen: 'HomeScreen',
    //icon: require('../../assets/images/test.png'),
    icon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    selectedIcon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    title: 'Home'
},
{
    label: 'Message',
    screen: 'MessageScreen',
    icon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    selectedIcon: { uri: 'icon_home_selected', scale: Dimensions.get('window').scale },
    title: 'Message'
}]

Navigation Code:

_navigateToHomeScreen = () => {
Navigation.startTabBasedApp({
  tabs: Tabs,
  tabsStyle: tabsStyle,
  appStyle: tabsStyle
 });
}

Tab Styles:

tabStyle = {
  tabBarBackgroundColor: Colors.DefaultWhiteColor,
  tabBarButtonColor: Colors.NavigationBarItemColor,
  tabBarLabelColor: Colors.NavigationBarItemColor,
  tabBarSelectedButtonColor: Colors.PrimaryButtonBackground,
  tabBarSelectedLabelColor: Colors.PrimaryButtonBackground,
  forceTitlesDisplay: true
}

What we have tried:

I tried using the same image in a list view and it shows up correctly so I don't think that react-native is not able to find the image from drawable.
I tried specifying the height/width (without scale) for the image and it still does not work.
If I use require('') to load an image which is in JS then it works correctly but we want to use drawables.
I tried removing scale and it still doesn't work.
For iOS, loading image from xcassets and using it in tab bar works without any issues.

Version Information:

react-native: 0.52.0 react-native-navigation: 1.1.314 Android-Version: Emulator: Android 5.1, Android 6.0

We are running out of options. The final solution would be to use local images and not images from native.

Any help is appreciated.

Note:This question is not for react-navigation. It is for react-native-navigation library by wix available at https://wix.github.io/react-native-navigation/#/.

react-native-navigation Tab Bar Icon from Android Drawables and iOS xcassets

0 Answers0