Tab icons do not render when defined as a function component

[lehresman]

I'm using create-react-native-app and their included vector icons.

When creating a TabNavigator, I can set the tabBarIcon to be a <Ionicons/> component just fine:

Code:

export const ScheduleNavigator = TabNavigator({
  ScheduleDetails: {
    screen: ScheduleDetailsScreen,
    navigationOptions: {
      title: "My Plan",
      tabBarIcon: <Ionicons name="ios-settings" size={24} />
    }
  },
  ScheduleUpcoming: {
    screen: ScheduleUpcomingScreen,
    navigationOptions: {
      title: "Upcoming",
      tabBarIcon: <Ionicons name="ios-calendar" size={24} />
    }
  },
  ScheduleCompleted: {
    screen: ScheduleCompletedScreen,
    navigationOptions: {
      title: "Completed",
      tabBarIcon: <Ionicons name="ios-checkmark-circle"  size={24} />
    }
  },
});

Screenshot:

However, when I try to set the tabBarIcon to be a component function (so I can use the focused parameter), it renders nothing.

Code:

export const ScheduleNavigator = TabNavigator({
  ScheduleDetails: {
    screen: ScheduleDetailsScreen,
    navigationOptions: {
      title: "My Plan",
      tabBarIcon: ({focused}) => {
        <Ionicons name={focused ? "ios-settings" : 'ios-settings-outline'} size={24} />
      },
    }
  },
  ScheduleUpcoming: {
    screen: ScheduleUpcomingScreen,
    navigationOptions: {
      title: "Upcoming",
      tabBarIcon: ({focused}) => {
        <Ionicons name={focused ? "ios-calendar" : 'ios-calendar-outline'} size={24} />
      },
    }
  },
  ScheduleCompleted: {
    screen: ScheduleCompletedScreen,
    navigationOptions: {
      title: "Completed",
      tabBarIcon: ({focused}) => {
        <Ionicons name={focused ? "ios-checkmark-circle" : 'ios-checkmark-circle-outline'} size={24} />
      },
    }
  },
});

Screenshot:

Am I doing something wrong, or is this a bug? I've seen other examples of people doing this just fine and as far as I can tell, I'm doing it the same way. That's what makes me think this might be some kind of bug.

software	version
react-navigation	1.0.0-beta.22
react-native	0.50.3

[lehresman]

Nevermind, I figured it out. It was just my own dumb fault and not using the right ES6 syntax for anonymous functions.

Should have been:

export const ScheduleNavigator = TabNavigator({
  ScheduleDetails: {
    screen: ScheduleDetailsScreen,
    navigationOptions: {
      title: "My Plan",
      tabBarIcon: ({focused}) =>
        <Ionicons name={focused ? "ios-settings" : 'ios-settings-outline'} size={24} />,
    }
  },
  ScheduleUpcoming: {
    screen: ScheduleUpcomingScreen,
    navigationOptions: {
      title: "Upcoming",
      tabBarIcon: ({focused}) =>
        <Ionicons name={focused ? "ios-calendar" : 'ios-calendar-outline'} size={24} />,
    }
  },
  ScheduleCompleted: {
    screen: ScheduleCompletedScreen,
    navigationOptions: {
      title: "Completed",
      tabBarIcon: ({focused}) =>
        <Ionicons name={focused ? "ios-checkmark-circle" : 'ios-checkmark-circle-outline'} size={24} />,
    }
  },
});

[pandumalik]

Thanks