Icons for Tabs not showing on React Native 0.54.4

[facuacostag]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.27
• react-native v0.54.4

Expected behaviour

I was using React Native 0.52.3 and custom tab icons were working as expected, as you can see in the image but once i updated React Native to the latest version they stopped working with no changes applied to the code or anything

<Scene
     key="activity"
     tabBarLabel="Activity"
     gesturesEnabled={false}
     hideNavBar
     component={ActivityScreen}
     icon={({ focused }) => (
     <Icon
        name={focused ? 'activity-active' : 'activity'}
        size={30}
        color={focused ? '#FFC920' : '#353535'}
      />
      )}
/>

Actual behaviour

The Icons are missing from the tab but the onPress behaviour works. It's not a problem with the icons library because they are shown in the whole app apart from the tab bar.

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Update to RN 0.54.4
2. Use custom Icon on the bar with react-native-vector-icons library
3. Check that the icons are not showing

Update

I managed to fix the issue, It seems like for some reason you need to add the width to the style of the Icon and it will be shown again.

icon={({ focused }) => (
    <Icon
       style={{ width: 30 }}
       name={focused ? 'profile-active' : 'profile'}
       size={30}
       color={focused ? '#FFC920' : '#353535'}
    />
)}

[MaxInMoon]

@FacuAcosta thanks for the fix which also fixes with [email protected]

[eddiesigner]

In my case I had to set the height as well ([email protected])

[dwilt]

It makes <Text> invisible too. You need to wrap a <View> around the <Text> and give it a width and height.