Version: 3.0.0-next.36

Customising Components

NativeBase theme is complex object which looks like

// theme
{
colors: {...},
fonts: {...},
.
.
.
config: {...},
}

using NativeBase's extendTheme function, we can update theme object. You can customize the components at multiple levels.

Basic#

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

From the above example we can observe that we 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.

Both defaultProps and baseStyle can either be simple object or function. You can use object simple use cases while the function when you want to use themeTools.

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.