Missing TabBar Review Icon when in Settings screen

Question

When I am on settings screen, I see that the Review Icon (favorite) is missing. It shows when I am back on Review screen. Why is that happening. See the screenshot I took. Pasting relevant code snippet from my project for reference.

 const MainNavigator = TabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: StackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        })
      }
    }, {
      tabBarPosition: 'bottom',
      tabBarOptions: {
        labelStyle: { fontSize: 12 }
      }
    });

class ReviewScreen extends Component {
  static navigationOptions = props => {
    const {navigation} = props;
    const {navigate} = navigation;
    return {
        tabBarIcon: ({ tintColor }) => {
            return <Icon name="favorite" size={30} color={tintColor} />

        },
        headerTitle: 'Review Jobs',
        headerRight: (
            <Button
                title="Settings"
                onPress={() => navigate('settings')}
                backgroundColor="rgba(0,0,0,0)"
                color="rgba(0, 122, 255, 1)"
            />
        )
    }
  }

Leads here is appreciated.

Answer 1

There is an issue with your code, since you're setting every icon's tintColor in the static navigationOptions as

tabBarIcon: ({tintColor}) => {
        return <Icon name="favorite" size={30} color={tintColor}/>

      }

and there is none for the Settings Screen, which also expects an Icon as it is inside the TabNavigator, therefore null is being rendered there.

Therefore you need to set the navigationOptions in the Settings Screen as

static navigationOptions = props => {
    const {navigation} = props;
    const {navigate} = navigation;
    return {
      tabBarIcon: ({tintColor}) => {
        return <Icon name="favorite" size={30} color={tintColor}/>

      }
    }
  }

or you may add the default icons in your App.js navigation file as

screen: TabNavigator({
        map: { screen: MapScreen,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="favorite" size={30} color={tintColor}/>
                )
            }
        },
// ....so on

Hope it helps!