react native collapsible tab view labelstyle not working - react-native

Question

I am trying to style the tab names but not working. the prop labelStyle are not exists as Prop but in the documentation its exists.
import React, { memo, useMemo, useCallback, useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, ScrollView } from 'react-native';
import { RecyclerListView, LayoutProvider, DataProvider } from 'recyclerlistview';
import Header from './Header';
import PropTypes from 'prop-types';
import faker from 'faker';
import { datas } from '../../utils';
import { Tabs } from 'react-native-collapsible-tab-view';
const HEIGHT = 250;
const Main = () => {
const Header = useCallback(() => (
<View style={{flex: 1}}>
<Header/>
</View>
), []);
const renderItem = useCallback(({ item }) => {
return (
<Text>Hello</Text>
)
}, [datas]);
const [currentIndex, setCurrentIndex] = useState(0);
const RenderTabBar = props => {
console.log(JSON.stringify(props));
console.log(JSON.stringify(props.tabNames));
return props.tabNames.map(el => {
return <Text key={Math.random(100).toString()}>{el}</Text>
})
};
return (
<Tabs.Container
containerStyle={{flex: 1, paddingBottom: 60}}
renderHeader={Header}
initialTabName={0}
renderTabBar={RenderTabBar}
headerHeight={HEIGHT}>
<Tabs.Tab style={{flex: 1}} label="s" name="Produkte">
<Tabs.FlatList
data={datas}
renderItem={renderItem}
keyExtractor={item => Math.random(100).toString()}
/>
</Tabs.Tab>
<Tabs.Tab name="Kollektionen">
<Tabs.ScrollView>
<View style={[styles.box, styles.boxA]} />
<View style={[styles.box, styles.boxB]} />
<View style={[styles.box, styles.boxA]} />
<View style={[styles.box, styles.boxB]} />
</Tabs.ScrollView>
</Tabs.Tab>
<Tabs.Tab name="Neuerscheinigungen">
<Tabs.ScrollView>
<View style={[styles.box, styles.boxA]} />
<View style={[styles.box, styles.boxB]} />
<View style={[styles.box, styles.boxA]} />
</Tabs.ScrollView>
</Tabs.Tab>
</Tabs.Container>
)
};
...............................................................................................................................,.........................................................................................

Answer 1

You need to Import the MaterialTabBar to use it in the renderTabBar.
import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view'
const tabBar = props => (
<MaterialTabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{ backgroundColor: 'pink' }}
/>
);
const Main = () => {
return (
<Tabs.Container
renderTabBar={tabBar}
>
<Tabs.Tab>
<Text>content</Text>
</Tabs.Tab>
</Tabs.Container>
)
}

Answer 2

Basic usage looks like this:
<
Tabs.Container
...
TabBarComponent = {
(props) => ( <
MaterialTabBar {
...props
}
activeColor = "red"
inactiveColor = "yellow"
inactiveOpacity = {
1
}
labelStyle = {
{
fontSize: 14
}
}
/>
)
} >
{
...
}
<
/Tabs.Container>
https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/src/MaterialTabBar/TabBar.tsx