How to add icons to tabs in react-native-tab-view

How to add icons to tabs in react-native-tab-view

react-native tab view custom tabbar
react native tabs tutorial
react-native tab view badge
react-native-tab-view on tab press
react-native tab bar icon size
react-native-paper tabs
react-native elements tabs
how to use tab bar in react native

I am working with react-native-tab-view and I can just put text on tabs but I want icons. There are some answers on GitHub but they are unclear. If you know anything it would be perfect!


1. Get an imported icon library:-

import Icon from 'react-native-vector-icons/AwesomeFont'

2. Create a method for rendering the icons depending on route using props:-

const getTabBarIcon = (props) => {

    const {route} = props

      if (route.key === 'Search') {

       return <Icon name='search' size={30} color={'red'}/>

      } else {

       return <Icon name='circle' size={30} color={'red'}/>

      }
}

3. Render TabView with a rendered TabBar prop calling back to getTabBarIcon:-

export default class App extends React.Component {

    state = {
        index: 0,
        routes: [
            {key: 'Home', title: 'Hello'},
            {key: 'Search', title: 'Second'}
        ],
    }

    render() {
        return (
            <TabView
                navigationState={this.state}
                renderScene={SceneMap({
                    Home: FirstRoute,
                    Search: SearchScreen,
                })}
                onIndexChange={index => this.setState({index})}
                initialLayout={{height: 100, width: Dimensions.get('window').width}}
                renderTabBar={props =>
                    <TabBar
                        {...props}
                        indicatorStyle={{backgroundColor: 'red'}}
                        renderIcon={
                            props => getTabBarIcon(props)
                        }
                        tabStyle={styles.bubble}
                        labelStyle={styles.noLabel}
                    />
                }
                tabBarPosition={'bottom'}
            />
        );
    }
}

4. You can style the TabBar with anything (here the label is hidden to use icon only tabs)

const styles = StyleSheet.create({
    scene: {
        flex: 1,
    },
    noLabel: {
        display: 'none',
        height: 0
    },
    bubble: {
        backgroundColor: 'lime',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 10
    },
})

react-native

icons in Tabs · Issue #274 · react-native-community/react-native-tab , Hey! thanks for your grate plugin! is there any way to put icons instead text, or both? Example to Add Icons at the Bottom of Tab Navigation. First add the required library and dependency to the React Native project: 1. Add the react navigation library by using the following command: yarn add react-navigation. yarn add react-navigation.


You have to override renderHeader method and define in TabBar your own render label method:

  renderHeader = (props) => (
      <TabBar
        style={styles.tabBar}
        {...props}
        renderLabel={({ route, focused }) => (
          <View style={styles.tabBarTitleContainer}>
               /* HERE ADD IMAGE / ICON */
          </View>
        )}
        renderIndicator={this.renderIndicator}
      />
  );

how to add icon in the tabView area? · Issue #871 · react-native , for example ,i want to add some function buttons on the right side of the tabView​,i tryed adding Text Component but doesn't work  The size is the size of the icon expected by the tab bar. Read the full API reference for further information on createBottomTabNavigator configuration options. #Add badges to icons. Sometimes we want to add badges to some icons. A common way is to use an extra view container and style the badge element with absolute positioning.


I had the same problem. I solved it as follows by creating a "_renderTabBar" function and passing as props to the renderTabBar method of the TabView component and in this function I put the component "image" as my icon, I hope it helps.

A print:

_renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i);

return (
  <View style={styles.tabBar}>
    {props.navigationState.routes.map((route, i) => {
      const color = props.position.interpolate({
        inputRange,
        outputRange: inputRange.map(
          inputIndex => (inputIndex === i ? 'red' : 'cyan')
        ),
      });
        return (
        <TouchableOpacity
          style={[styles.tabItem, {backgroundColor: '#FFF' }]}
          onPress={() => this.setState({ index: i })}>
          <Image
      style={styles.iconTab}
      source={{uri: 'https://www.gstatic.com/images/branding/product/2x/google_plus_48dp.png'}}
    />
          <Animated.Text style={{ color }}>{route.title}</Animated.Text>

        </TouchableOpacity>

      );
    })}
  </View>
);

};

Here you render

render() {
return (
  <TabView
    navigationState={this.state}
    renderScene={this._renderScene}
    renderTabBar={this._renderTabBar}
    onIndexChange={index => this.setState({ index })}
  />
);

Code complete: https://snack.expo.io/@brunoaraujo/react-native-tab-view-custom-tabbar

How to add icons to tabs in react-native-tab-view, I am working with react-native-tab-view and I can just put text on tabs but I want icons. There are some answers on GitHub but they are unclear. If you know  npm install react-navigation-tabs. Next step is to start implementing the codes. We required the icons package to add icons with the tab bar. I am using the expo to develop this view. And for icons I am using the @expo/vector-icons.


react-native-tab-view, Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon. <TabBar. yarn add react-native-tab-view Now we need to install react-native-gesture-handler and react-native-reanimated . If you are using Expo, to ensure that you get the compatible versions of the libraries, run:


React Native: Tab bar is customizable, To change colors of icons in active or inactive states you need to add config object at the second parameter of createBottomTabNavigator, but  Current behaviour. I am looking to add a png image as icon for individual tabs, but the images are not appearing. Expected behaviour. I would want the images to appear before the text.


Package, A cross-platform Tab View component for React Native. Smooth animations and gestures; Scrollable tabs; Both top and bottom tab bars; Follows Material Design callback which receives the current scene and returns a React Element to be used as a icon If you need it to trigger a re-render, put it in the navigationState . First of all, we don’t need, build a new one tab bar, just use react-navigation lib. It’s in version 2, now to create TabBar at the bottom you should use function createTabNavigator or createBottomTabNavigator, a configuration in the most staying like in the previous version.