reactjsreact-nativereact-native-tab-view

How to make TabBar of react-native-tab-view smaller?


I am using react-native-tab-view, but the TabBar is big, I want to make it small. How to customize it ? Applying margin/padding 0 didn't work. Applying small height worked but the text went missing. How to make it small or more customizable ?

<TabView
 ...
                renderTabBar={props =>
                    <TabBar
                        {...props}
                        indicatorStyle={{ backgroundColor: 'white' }}
                        style={{ backgroundColor: 'pink' }}
                        tabStyle={{ backgroundColor: 'teal' }}
                        renderLabel={({ route, focused, color }) => (
                            <Text style={{ color, margin: 8 }}>
                                {route.title}
                            </Text>
                        )}

                }

Solution

  • Try to use tabStyle prop for TabBar. By default it has a style:

    minHeight: 48,
    

    So in your case:

    <TabView
     ...
      renderTabBar={props =>
          <TabBar
              {...props}
              indicatorStyle={{ backgroundColor: 'white' }}
              style={{ backgroundColor: 'pink' }}
              tabStyle={{ backgroundColor: 'teal', minHeight: 30 }} // here
              renderLabel={({ route, focused, color }) => (
                  <Text style={{ color, margin: 8 }}>
                      {route.title}
                  </Text>
              )}
        }