react native collapsible tab view labelstyle not working

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>
)
};

...............................................................................................................................,.........................................................................................

Could you please share screenshots? Or point out to the code line that's not working? What do you mean by the styling is not working? Font style, color, size, background, transparency? — Saamer, Aug 20 '21 at 22:39

score 2 · Answer 1 · answered Jul 13 '22 at 23:32

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>
    )

  }

score 0 · Answer 2 · answered Dec 17 '21 at 05:51

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

react native collapsible tab view labelstyle not working

2 Answers2