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

Version

“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

Index

<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>
                                    <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} />
                                    </Stack>
                                </Tabs>

PhotosTabIcon

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;

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}>
      <Icon
        color={props.tintColor}
        name={props.iconName}
        size={26}
        />
    </View>
  </View>
  )
}

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

export default TabIcon

tmaly1980 on Apr 27, 2018

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 (
        <View
            style={{
                flex: 1,
                flexDirection: 'column',
                alignItems: 'center',
                alignSelf: 'center',
                justifyContent: 'center',
                
            }}
        >
            <Icon
                style={{ color, width: 25, height: 25 }}
                name={this.props.iconName || 'circle'}
                size={25}
            />
        </View>
    );
} 
}

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

ibraheeamm on Apr 23, 2018

@uncvrd try replacing

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

with

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

it worked for me.

totegsito on May 5, 2018

Just set width and height for Icon as a temporary fix

ovaris on Mar 8, 2018

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…

aksonov on Mar 19, 2018

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

ghost on Apr 26, 2018