Unable to see tabs icons for expo app

[kkelsch]

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.

[ghost]

hello @kkelsch , size in icon ? size = {???}

[ghost]

This is not a react native router flux error, check again vector-icons. :D

[kkelsch]

Hi @tinpt123 . I know that it's not working because when I put the same icon on the Home screen it displays, but it doesn't display on the tab:

Here is the home screen:

        <View>
        <Text style={styles.welcomeText}>This is a signed in user</Text>
        <Icon name="check-circle" size ={30} />
        </View>

Here is the tab logic I just updated:

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

Here is the screen shot :

[kkelsch]

I've also tried images, with no luck.

[ghost]

demo: <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={() =>( <FontAwesome name={'your-icon-name'} size= {number} color = {'your color'} ) } /> in Scene, you should use lambda if you want to use selected color icon.

[ghost]

if you want to use selected props, you can do: icon = {(selected) => ( <FontAwesome name={'your-icon-name'} size= {number} color={selected? 'red' : 'blue'} ) } />

[kkelsch]

Tried: <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={() =>( <Icon name={'check-circle'} size ={30} color='red' /> )}></Scene>

Didn't work.

[ghost]

jesus, <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={() =>( <FontAwesome name={'check-circle'} size ={30} color={'red'} /> )} />

[kkelsch]

Could you share your 'FontAwesome' import statement? I just want to double check I'm coping letter by letter.

[kkelsch]

Since I don't know where you're getting the 'FontAwesome' from, I tried this. Again, no luck. Here is the screen shot + the code. I changed the styling as well to show the changes:

`// 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-elements';

// 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 TabBarIcon extends Component {
  render() {
    return (
      <Icon.Ionicons
        name={'alert'}
        size={26}
        style={{ marginBottom: -3 }}
        color={'red'}
      />
    );
  }
}

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="tabHolder" showIcon={true} tabs swipeEnabled  >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar showIcon={true}  icon={TabBarIcon} >
                        </Scene>

                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar showIcon={true} navBarButtonColor='white' icon={TabBarIcon} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar showIcon={true} icon={TabBarIcon} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar  icon={() =>(  <Icon name={'check-circle'} size ={30} color={'red'}/>)} />

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

//

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

[ghost]

change: import { Icon } from 'react-native-elements'; = import FontAwesome from react-native-vector-icons/FontAwesome;

[kkelsch]

Sadly, didn't work. Code used 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 FontAwesome 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 TabBarIcon extends Component {
  render() {
    return (
      <Icon.Ionicons
        name={'alert'}
        size={26}
        style={{ marginBottom: -3 }}
        color={'red'}
      />
    );
  }
}

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="tabHolder" showIcon={true} tabs swipeEnabled  >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar showIcon={true}  icon={TabBarIcon} >
                        </Scene>

                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar showIcon={true} navBarButtonColor='white' icon={TabBarIcon} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar showIcon={true} icon={TabBarIcon} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={() =>( <FontAwesome name={'check-circle'} size ={30} color={'red'} /> )} />
                    </Scene>
                </Scene>
            </Router>
        )
    }
}

//

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

[ghost]

Did you import the library "react-native-vector-icons"?

[kkelsch]

I just ran npm install react-native-vector-icons --save and redid expo start with the same code. No dice

[ghost]

react-native link react-native-vector-icons please !!!!

[kkelsch]

My steps:

1. react-native link react-native-vector-icons
2. Get:

[kkelsch]

I'm also using an expo project, so I had to reinstall react-native

[ghost]

follow my instagram, i will help you trungtin.97

[kkelsch]

Tried react-native upgrade to see if it was a versioning issue, again this is expo, and it said it wasn't a react-native application

[ghost]

don't need that, fl my instagram and give me your Teamview, i'll help you

[kkelsch]

@trietphan , I'm sorry, are you saying I need to follow your instagram to get help?

[ghost]

no, I don't mean that, everything, u can give me your Teamview and i'll help you. In VietNam, we use Fb more than instagram =))

[ghost]

It's ok, i just want to help you, if you think bad about me, you can ignore this comment ^_^

[ghost]

step 1: npm install react-native-vector-icons step 2: react-native link react-native-vector-icons step 3: in file you want to show the icon with font example: // Navigation import FontAwesome from 'react-native-vector-icons/FontAwesome' class RouterComponent extends Component { render() { return (

( )} />

    )
}

} You don't have ### BACKGROUND about programming. sorry my English so bad

[kkelsch]

Hi followed your steps and got this issue. As I mentioned before this is an expo app so I think the link won't work since this is not a react-native app. But I tried it anyway:

I still get this error:

[kkelsch]

Research suggests I cannot use anything from those icons set as expo doesn't allow you to link https://stackoverflow.com/questions/44977693/react-native-link-using-expo

[zakbutcher]

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 />
  };
};

[kkelsch]

Zak's solution worked for me!! Thank you!