Can't display icons in tab navigation wix react-native-navigation

Question

I can't get the tabs icon to render in iOS simulator.

Navigation.startTabBasedApp({
    tabs: [
        {
            label: 'Home',
            screen: 'Home', // this is a registered name for a screen
            icon: require('img_assets/icon_message.png'),
            iconInsets: { top: 0, left: 0, bottom: 0, right: 0 },
            visible: true,
            //selectedIcon: require('../img/one_selected.png'), // iOS only
            title: 'Homepage'
        },
        {
            label: 'Second',
            screen: 'Second',
            icon: js.Lib.require('img_assets/icon_cloud/cloud.png'),
            iconInsets: { top: 0, left: 0, bottom: 0, right: 0 },
            visible: true,
            //selectedIcon: require('../img/two_selected.png'), // iOS only
            title: 'Screen Two'
        }
    ],
    tabsStyle: {
        tabBarButtonColor: '#FF0000',
        tabBarSelectedButtonColor: '#00adf5'
    },
    appStyle: {
        tabBarButtonColor: '#000000', // BottomTabs unselected button color
        tabBarSelectedButtonColor: '#00adf5', // BottomTabs selected button color
    }
});

in package.json

"dependencies" : { ...
    "img_assets": "file:assets/"

Screenshot:

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5 CPU         750  @ 2.67GHz
      Memory: 32.35 MB / 12.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.0 => 0.57.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Do you have any insight of what could happen? I'm not having an error anymore (used to have some) so I guess the images are correctly linked/loading now. But can't see any at screen.

Answer 1

The problem was with images themselves AND the fact that react-native-navigation applies "by default" a color tint.

Answer 2

There's no rescale by default applied to the images, so they need to be created with valid resolutions (and handle @x1 @x2 and @x3). And disabling the tint would help you a lot I think :)
The way to do that is different if you're using v1 or v2 version of the navigation lib.