Customizing Components | NativeBase | Universal Components for React and React Native

Hire us
Data Display
Media and Icons
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Customizing Components
Theme customisation is at the heart of NativeBase. Using NativeBase's extendTheme function, we can customise components.
Components can be customised by overriding baseStyle/defaultProps or adding a new variant.
Let's customise a Button component to include rounded borders and red colorScheme.
import React from 'react';
import { NativeBaseProvider, extendTheme } from 'native-base';
export default function () {
const theme = extendTheme({
components: {
Button: {
// Can simply pass default props to change default behaviour of components.
baseStyle: {
rounded: 'md',
defaultProps: {
colorScheme: 'red',
Heading: {
// Can pass also function, giving you access theming tools
baseStyle: ({ colorMode }) => {
return {
color: colorMode === 'dark' ? 'red.300' : 'blue.300',
fontWeight: 'normal',
return (
<NativeBaseProvider theme={theme}>{/* components */}</NativeBaseProvider>
As shown above, we can customize components by passing the components object with the key being the name of the component. Whereas you set defaultProps or baseStyle to customize the components.
Difference between baseStyle and defaultProps
Base Style
As the name suggests, it's used to define the base style of a component.
Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object.
Take a look at an .
Default Props
Default props can be used to initialize props of a component.
For e.g. You have a Button component and it has 2 variants. i.e. outline, solid.
Take a look at an .
<Button variant="ghost">
<Button variant="outline">
// What variant should it pick if it's not passed?
<Button />
When variant in defaultProps is solid the above button will use solid variant.
Customizing Base Style
You can specify the base style of the component and use it across project.
Adding Variants
You can also add the variants to the components and use it across project.

NativeBase ships with default styles for each components. .
Nativebase logo