How to use different icons for each tab with createBottomTabNavigator?

Question

I am using React Native Navigation v2 for my project. I am trying to set two different IonIcons with the createBottomTabNavigator.

Their site gives an example like this:

navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') {
      iconName = `ios-information-circle${focused ? '' : '-outline'}`;
    } else if (routeName === 'Settings') {
      iconName = `ios-options${focused ? '' : '-outline'}`;
    }

    // You can return any component that you like here! We usually use an
    // icon component from react-native-vector-icons
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },
}),

But to me, this seems dull. Can I define the IonIcon in the component itself? How can I define the symbols individually with React Native Navigation v2?

Answer 1

Yes, you can:

class HomeComponent extends Component {
    static navigationOptions = {
        tabBarIcon: ({ focused, tintColor }) => {
            const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            return <Ionicons name={iconName} size={25} color={tintColor} />;
        },
    };

    // ...
}

Or:

const tabs = createBottomTabNavigator({
    Home: {
        screen: HomeComponent,
        path: '/',
        navigationOptions: {
            tabBarIcon: ({ focused, tintColor }) => {
                const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
                return <Ionicons name={iconName} size={25} color={tintColor} />;
            },
        },
    },
    // ...
});