Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customise tabs of native base

I need to customise tabs (change their background color ) from native base in my react native application, like shown in the image enter image description here

I've already tried this style={{ backgroundColor: '#C0C0C0' }} but i keep getting the default theme.

like image 997
user3521011 Avatar asked Mar 30 '17 09:03

user3521011


People also ask

How do I use NativeBase icons?

NativeBase allows you to use icons in multiples ways: Create icon by creating an SVG Icon. Create icon using createIcon function and use it as a component. ), with as prop.

What is NativeBase provider?

NativeBase is a mobile-first, component library for React & React Native. Version 3.0 ships with complete ARIA integration, support for utility props and nearly 40 components that are consistent across Android, iOS and Web. Fast-track your dev process with NativeBase 3.0. Recommended by Awesome React Native.

Why we use NativeBase in react native?

NativeBase is an open-source UI library that makes it easy to build universal design systems. NativeBase was built for react native and is supported in Expo, Web, and React Native CLI initiated apps. NativeBase has UI components like Button, Image, Alert, Progress, Spinner, Card, and more built into it.


1 Answers

You can apply, your own style to native base tabs like below.

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
</Tabs>
like image 175
Irfan Ali Avatar answered Sep 19 '22 22:09

Irfan Ali