react-native-router-flux: Bottom tabbar icons not showing up


  • “react-native-router-flux”: “^4.0.0-beta.28”,
  • “react-native”: “^0.54.0”,
  • “react”: “^16.3.0-alpha.1”,

Expected behavior

Icons should show up

Actual behavior

Icons not showing up

I updated to the latest version of react-native and the icons are not showing up here is my current code


<Tabs key="tabbar" swipeEnabled={false} showLabel={true} lazy={true} showIcon={true} tabBarPosition="bottom" activeBackgroundColor="#25abf9" inactiveBackgroundColor="#30393F" inactiveTintColor="#ffffff" activeTintColor="#ffffff" tabBarStyle={{height:55}}>
                                    <Stack key="main" title="Photos" tabBarLabel="Photos" inactiveBackgroundColor="#30393F" activeBackgroundColor="#25abf9" icon={PhotosTabIcon} titleStyle={{ color: 'white', alignSelf: 'center'}}>
                                        <Scene key='photos' type={Actions.RESET}  component={Photos} title={'Home'}  initial={false} navBar={CustomNavBar} />
                                        <Scene key='singlePhoto' component={SinglePhoto} title={'Photo'} photoDate={null} initial={false} navBar={CustomNavBarPhotos} hideTabBar/>
                                        <Scene key='photoUpload' component={PhotoUpload} title='Upload Photo' photoDate={null} initial={false} navBar={CustomNavBarUpload} hideTabBar />
                                        <Scene key='sync' component={Sync} title='Syncing Data' initial={false}  hideTabBar hideNavBar  />
                                        <Scene key='offlineMode' component={OfflineMode} title='Offline' initial={false} navBar={CustomNavBar}  hideTabBar />
                                        <Scene key='compressionMode' component={CompressionMode} title='Compressing Video' initial={false}  hideTabBar hideNavBar />
                                    <Stack key="apps" title="Templates" tabBarLabel="Apps" inactiveBackgroundColor="#30393F" activeBackgroundColor="#25abf9" icon={AppsTabIcon} titleStyle={{ color: 'white', alignSelf: 'center' }}>
                                        <Scene key='Apps' type={Actions.RESET} component={AppsTempWebView} title='Templates' initial={false} navBar={CustomNavBarApps} />


import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-native-elements';

const propTypes = {
    selected: PropTypes.bool,
    name: PropTypes.string,

const PhotosTabIcon = () => {
    return <Icon name='camera' size={28} type={"font-awesome"} color={'white'}  />

PhotosTabIcon.propTypes = propTypes;
export default PhotosTabIcon;
screen shot 2018-03-08 at 1 49 44 pm

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 44 (7 by maintainers)

Most upvoted comments

@avishayil , My scene looks like:

<Scene icon={TabIcon} iconName='timer' key="tab1" component={Dashboard} />

And My TabIcon component looks like:

function TabIcon(props) {
  return (
  <View style={styles.wrapper}>
    <View style={styles.container}>

const styles = {
  container: {
    width: 48,
    height: 42,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',

export default TabIcon

I use Expo and I just upgraded to Expo 26 and faced this issue, just set height, width manually as @ovaris said


class TabIcon extends Component {
render() {
    const color = this.props.focused ? Colors.mainColor : Colors.lightGray;
    return (
                flex: 1,
                flexDirection: 'column',
                alignItems: 'center',
                alignSelf: 'center',
                justifyContent: 'center',
                style={{ color, width: 25, height: 25 }}
                name={this.props.iconName || 'circle'}


I did not find anything about iconName prop in the docs but its their

@uncvrd try replacing

<Scene icon={TabIcon} iconName='timer' key="tab1" component={Dashboard} />


<Scene icon={() => <TabIcon iconName="timer"/>} key="tab1" component={Dashboard} />

it worked for me.

Just set width and height for Icon as a temporary fix

Check #2893 and feel free to fix it. Now I’m working on RNRF v5 to work with upcoming 2.0 react navigation (yeah, it introduces many NEW breaking changes again). With v5 RNRF will depend only from navigational views, not from react-navigation routers/navigators/listeners/etc, so such situation should not happen again…

The icon needs to be wrapped with a View that has a set width and height. That works