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

Search
K
Hire us
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).
Customising 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.
Basic
Copy
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
Copy
<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.
Playground
Adding Variants
You can also add the variants to the components and use it across project.
Playground

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