CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
KittyCat
KittyCat

Reputation: 517

How to use different icons for each tab with createBottomTabNavigator?

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?

Upvotes: 6

Views: 11417

Answers (2)

Luciano Santos
Luciano Santos

Reputation: 153

Although the most voted answer is right, maybe you don't want to use the solution ending with '-outline' icon version, and want to use different icons, so:

CHANGE ICON (STANDARD VECTOR ONES) ON FOCUSED: 

tabBarIcon: ({ tintColor, focused }) => (
    <Ionicons name={focused ? 
                    'ios-home' : 
                    'ios-home-outline'} 
              size={26} style={{ color: tintColor }} />
),

CHANGE ICON (USING ANY IMAGE YOU WANT) ON FOCUSED:

tabBarIcon: ({ focused }) => {
        const iconimg = focused  ? 
              require('../active.png')  : 
              require('../inactive.png')
        return (
            <Image 
                source={iconimg}
                style={styles.tabIcon}
            />
        )
    }

Upvotes: 0

Omar
Omar

Reputation: 16623

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} />;
            },
        },
    },
    // ...
});

Upvotes: 15

Related Questions