React UI Kitten Styling TabBars

Question

Pretty simple question and concept here, I am using the react UI Kitten Framework for a React Native Project, and for the life of me I cannot change the styling on the TabBar's Tab components. I've looked at the documentation, and this is where it had lead me...

 <View style={LandingPageStyles.container}>
            <View style={LandingPageStyles.tabBarContainer}>
                <TabBar
                    indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                    tabBarStyle={LandingPageStyles.loginTab}
                    style={LandingPageStyles.tabBar}
                    selectedIndex={selectedIndex}
                    onSelect={index => setSelectedIndex(index)}
                >
                    <Tab 
                        title="Login" 
                        tabBarStyle={LandingPageStyles.loginTab}
                        indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                        tabBarStyle={LandingPageStyles.loginTab}/>
                    <Tab 
                        title='Sign Up' 
                        tabBarStyle={LandingPageStyles.signUpTab}
                        indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                        tabBarStyle={LandingPageStyles.loginTab}/>
                </TabBar>
            </View>
            <View>
                {determineRender()}
            </View>
        </View>

And I have the following styleSheets...

const LandingPageStyles = StyleSheet.create({
    container: {
        width: maxWidth,
        height: maxHeight,
    },
    tabBarContainer: {
        marginTop: maxHeight * 0.045,
        marginLeft: maxWidth * 0.075,
        marginBottom: maxHeight * 0.06,

        // borderWidth: 1,
        // borderColor: 'black',
        // width: maxWidth * 0.85,
    },
    tabBar: {
        backgroundColor: 'rgba(52, 52, 52, 0.3) !important',
    },
    loginTab: {
        borderBottomColor: "white",
        color: 'white',
    },
    signUpTab: {
        borderBottomColor: "white",
        color: 'white',
    }
})

Notice that I'm attempting to style the tabs themselves in anyway possible, adding style tabBarStyle and indicatorStyle anywhere it would be relevant. Unfortunately it does nothing and the text color is still some faded blue/grey instead of white, and the borderBottomColor of the selected tab is just blue. Am I shit out of luck an unable to style Kitten elements or is there something I'm missing?

score 1 · Answer 1 · answered Feb 06 '22 at 18:00

For Changing certain styles in the react native ui kitten library, you would need to use something known as customize mappings.

You can follow the guide here:

score 0 · Answer 2 · answered Jun 28 '22 at 15:51

The tabview styles are very limited, your styles are ignored/overridden. Customize component mapping is very cumbersome, lack of documentation, moreover you can't change the layout. You have to render the components by yourself to fully control the styling

<TabView indicatorStyle={yourStyle} tabBarStyle={yourStyle}>
<Tab style={yourTabStyle}
    /* instead of passing the string, you pass the function to render the title */
    title={() => <Text style={yourTitleStyle}>Tab1</Text>}
    /* same for icon */
    icon={() => <Icon name='star' style={yourIconStyle}/>} 
>
</TabView>

React UI Kitten Styling TabBars

2 Answers2