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: image

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

About this issue

Most upvoted comments

I believe I’ve found the root cause and it doesn’t appear to have any relation to react-native-router-flux specifically.

The Problem Defining static navigationOptions = { ... } on a screen component will override all react-navigation options passed via react-native-router-flux; causing you to lose the defined tab icon

Solution 1 Don’t define static navigationOptions on screen components and instead let react-native-navigation-flux handle that for you via it’s own props

Solution 2 Define static navigationOptions as a function and parse the provided params into the appropriate config fields manually:

static navigationOptions = navigation => {
  const Icon = navigation.navigation.state.params.icon;
  return {
    tabBarIcon: <Icon />
  };
};