how to add Icons for tabs

[034502219988]

hi, i need to ask that how can we use icons for tabs, now we are just using label.

[034502219988]

please add option to use icon for tab

[picknamexd]

Hello! I would also like this powerful package to include the possibility of adding icons to the tabs, I managed to do it in a more complicated way using custom tabs.

I'm going to show you how I have done it and I hope it helps you!

I have added to my code all the .tsx and .ts of the MaterialTabBar folder, you can find it in the code of this repository, Then I looked for the place where I put the name of the tab (TabItem.tsx at the end) and i changed it for these lines of code

.......
            android_ripple={{
                borderless: true,
                color: pressColor,
            }}
            {...rest}
        >
            <Animated.Text style={[styles.label, stylez, labelStyle]}>
                <MaterialIcons name={label} size={30}/>
            </Animated.Text>
        </Pressable>
    )
}

const styles = StyleSheet.create({
    grow: {
        flex: 1,
.....

As you can see, inside Animated.Text I have removed the {label} tag that there was, and I have added my icon tag, in my case I am using the imported icons from import MaterialIcons from 'react-native-vector-icons / MaterialIcons' ;

Now you have to import the new component that you have created

import {MaterialTabBar} from '../path/your_custom/component/MaterialTabBar'; and put in TabBarComponent

      TabBarComponent={(props) => (
        <MaterialTabBar
          {...props}
          activeColor="black"
          inactiveColor="black"
          inactiveOpacity={1}
          labelStyle={{fontSize: 14}}
        />
      )}>

I don't think it's the best fix in the world, but I managed to show the tabs! I hope you can get it too

Later, when adding the tag in Tabs.Tab, you can put the name of the icon that you are going to use example;

      <Tabs.Tab name="Photos" label="photo-library">
        <Tabs.FlatList
          data={[0, 1, 2, 3, 4]}
          renderItem={renderItem}
          keyExtractor={(v) => v + ''}
        />
      </Tabs.Tab>

[PedroBern]

Probably we can add a renderIcon prop on the tabbar, and allow to pass an icon prop on the Tabs.Tab. This would allow rendering icons + labels

[034502219988]

@PedroBern thanks, if you can add icons to the next release.

[kyps2020]

I've looked in the manual, but I can't find anything about adding icons in the tab bar. anyone have solution for this problem?

[KazakovVS]

Still no solution?

[andreialecu]

You can customize the MaterialTabBar and override the TabItemComponent and render your own item, which can include an icon or anything you want.

<Tab.Navigator collapsibleOptions={{ 
  renderTabBar: (props) => <MaterialTabBar TabItemComponent={(itemProps) => <YourItem />} {...props} />
}}>

Take a look at the source for more details: https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/src/MaterialTabBar/TabBar.tsx

[vlack-coder]

Honestly, I don't still get this.... I think I'll use what @picknamexd used earlier, only that I'll have to stick to Ionicons till you elaborate on this cuz I can't find anything like collapsible option or Tab.Navigator

[vlack-coder]

I'm just getting to know that collapsibleOptions is a prop to createMaterialCollapsibleTopTabNavigator from an older version. I'm seriously stuck here

[KazakovVS]

> Honestly, I don't still get this.... I think I'll use what @picknamexd used earlier, only that I'll have to stick to Ionicons till you elaborate on this cuz I can't find anything like collapsible option or Tab.Navigator

What I did is just created a custom MaterialTabItem component by copying it from the .../node_modules/react-native-collapsible-tab-view/src/MaterialTabBar/TabItem.tsx and replacing the Animated.Text to the desired result.

Then I just passed as a param to the TabBar like this TabItemComponent={(itemProps) => <MaterialTabItem {...itemProps} />

And the resulting outcome is here

[vlack-coder]

Honestly, I don't still get this.... I think I'll use what @picknamexd used earlier, only that I'll have to stick to Ionicons till you elaborate on this cuz I can't find anything like collapsible option or Tab.Navigator

What I did is just created a custom MaterialTabItem component by copying it from the .../node_modules/react-native-collapsible-tab-view/src/MaterialTabBar/TabItem.tsx and replacing the Animated.Text to the desired result.

Then I just passed as a param to the TabBar like this TabItemComponent={(itemProps) => <MaterialTabItem {...itemProps} />

And the resulting outcome is here

Thanks..... I also did somewhat the same thing ` <Animated.Text style={[styles.label, stylez, labelStyle]}>

` On the tab configuration, ` ( )} >` then ` ` - First of all, I want to be able to add my custom icon for each tab, not Ionic icons.... - I also want a text label under the icons.... Any suggestions. Thanks in anticipation of your response 

[andreialecu]

255 should make this easier. 51a7234 (#255)

It's part of 5.0.0-rc.8. See https://github.com/PedroBern/react-native-collapsible-tab-view/pull/255