How to change active tab underline color

[PedroBern]

Do you mean the indicator color?

[bekatd]

Yeap, did not catch it anywhere in the docs, might be silly question though

[PedroBern]

Yeah, the docs need an update!

 <Tabs.Container
    TabBarComponent={props => <MaterialTabBar {...props} indicatorStyle={{ backgroundColor: 'red' }} />}
     ...
 >

Let me know if you have more questions

[bekatd]

Is there any way to set borderless option to false of android_ripple for tabs

[PedroBern]

Currently only providing a custom TabItemComponent to the TabBar.

[bekatd]

Thanks but would be great borderless to be false by default and if you add an option to change it. Also another question, is there any simple way to know active tab index to use in a class components?

[acro5piano]

The prop name may be changed to renderTabBar

 <Tabs.Container
    renderTabBar={props => <MaterialTabBar {...props} indicatorStyle={{ backgroundColor: 'red' }} />}
     ...
 >

[abhishek-netizen]

sad it's missed in doc

import React from 'react'; import {View, StyleSheet, ListRenderItem, Text} from 'react-native'; import {Tabs, MaterialTabBar} from 'react-native-collapsible-tab-view';

const HEADER_HEIGHT = 50;

const DATA = [0, 1, 2, 3, 4]; const identity = (v: unknown): string => v + '';

const Header = () => { return ; };

const CollapsibleHeaderWithTabNav: React.FC = () => { const renderItem: ListRenderItem = React.useCallback(({index}) => { return ( <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} /> ); }, []);

return ( <Tabs.Container renderHeader={Header} headerHeight={HEADER_HEIGHT} renderTabBar={props => ( <MaterialTabBar {...props} indicatorStyle={{backgroundColor: 'red'}} />. //Here )}>

); }; const styles = StyleSheet.create({ box: { height: 250, width: '100%', }, boxA: { backgroundColor: 'white', }, boxB: { backgroundColor: '#D8D8D8', }, header: { height: HEADER_HEIGHT, width: '100%', backgroundColor: '#2196f3', }, indicatorStyle: { color: 'red', }, }); export default CollapsibleHeaderWithTabNav;

[darrensw777]

Be mindful if you're using TabView as opposed to TabBar that you have to set the styling as below example:

<TabView
    navigationState={{ index, routes }}
    renderScene={renderScene}
    onIndexChange={setIndex}
    initialLayout={{ width: layout.width }}
    renderTabBar={props => <TabBar
            {...props}
            style={{ backgroundColor: appConfig.colors.primary }} // <- BackgroundColor
            indicatorStyle={{ backgroundColor: 'white', height: 2 }} // <- Indicator/underline
    />}
/>