CODEWITHSUNDEEP
androidreact-nativeiconstabview
Muhammad Raza
Muhammad Raza

Reputation: 3

React Native: how to add icon in tabBar for android

I want to add icon in tabView for android. My code looks:

<ScrollableTabView>
            <View style={styles.container} tabLabel='Menu Button'>
            </View>
            <View style={styles.container} tabLabel='My App'>
            </View>         
            <View style={styles.container} tabLabel='Settings'>
            </View>  
</ScrollableTabView>

I want to have icons instead of Menu Button and Settings. how can I use icons instead of tabLabel??

Upvotes: 0

Views: 760

Answers (1)

Kush R.
Kush R.

Reputation: 306

I assume you are using : https://github.com/skv-headless/react-native-scrollable-tab-view

This solution should work:

<ScrollableTabView>
    <View style={styles.container} tabLabel='android-menu'>
    </View>
    <View style={styles.container} tabLabel='My App'>
    </View>         
    <View style={styles.container} tabLabel='android-settings'>
    </View>  
</ScrollableTabView>

The complete list of icons is available here:

https://github.com/skv-headless/react-native-scrollable-tab-view/blob/ee5d99950fad9c4c1129d029d7bfaea130df72d1/examples/FacebookTabsExample/android/app/src/main/assets/ion.json

Edit 1:

This example demonstrates icons to be used on tabLabel instead of text: https://github.com/skv-headless/react-native-scrollable-tab-view/tree/master/examples/FacebookTabsExample

Upvotes: 1

Related Questions