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;

[tmaly1980]

@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

[ibraheeamm]

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