I need to customise tabs (change their background color ) from native base in my react native application, like shown in the image
I've already tried this style={{ backgroundColor: '#C0C0C0' }}
but i keep getting the default theme.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With