react-native-router-flux: Unable to see tabs icons for expo app

Version

• react-native-router-flux v4.0.6
• react v6.4.1
• expo v 2.17.3

Expected behaviour

I have a aws amplify react native app. I’m using expo. I’m expecting to be able to see our application’s tab icons on the bottom. I’m able to see the tabs, but I’m not able to see the icons. I’m using an android phone and simulator, and have seen the behavior on both.

Code

I made a router.js file like below.

`// Libraries and References
import React, { Component } from 'react';
import { Router, Scene, ActionConst } from 'react-native-router-flux';
import I18n from './utils/i18n/i18n';
import { connect } from 'react-redux';
const Constants = require('./utils/constants/Constants');
import Icon from 'react-native-vector-icons/FontAwesome'


// Components
import homeScreen from './components/screens/HomeScreen';
import alertsScreen from './components/screens/AlertAnnouncementScreen';
import resoucesScreen from './components/screens/ResourceScreen';
import settingsScreen from './components/screens/AccountSettingsScreen';

 

class TabIcon extends Component {
    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center', justifyContent: 'center', width:30, height:30 }}>
                <Icon style={{ color: 'red' }} name='md-checkmark-circle' />
            </View>
        );
    }
};


// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar showIcon={true}>
                    <Scene key="tabHolder" showIcon={true} tabs swipeEnabled activeBackgroundColor={Constants.BGC_GREEN} inactiveBackgroundColor={Constants.BGC_BLUE} inactiveTintColor={Constants.TAB_GREY} activeTintColor='white' type={ActionConst.RESET} >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar  showIcon={true} icon={TabIcon} >

                        </Scene>
                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar navBarButtonColor='white' icon={TabIcon} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar icon={TabIcon} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={TabIcon} />

                    </Scene>
                </Scene>
            </Router>
        )
    }
}


//


// export
export default connect(null, null)(RouterComponent);`

I refer to it like so:

`export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };


  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <Provider store = {store}>
          <View style={styles.container}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            <Router />
          </View>
        </Provider>
      );
    }
  }`

When I run it, here is what I see:

I have confirmed this functionality on both Android and Apple phones.