Skip to main content
Version: 4.0.0-rc.2

Components

Using the theme in your own components

You may want to make use of the theming utilities in your own components. For this you can use the withTheme HOC exported from this library. It adds three props to the component it wraps - theme, updateTheme and replaceTheme.

MyComponent.tsx
import { Button, createTheme, withTheme } from '@rneui/themed';

type MyCustomComponentProps = {
title: string;
titleStyle: StyleProps<TextStyle>;
};

export const MyCustomComponent = withTheme<MyCustomComponentProps>((props) => {
// Access theme from props
const { theme, updateTheme, replaceTheme } = props;
// ...
});

declare module '@rneui/themed' {
export interface FullTheme {
MyCustomComponent: Partial<MyCustomComponentProps>;
}
}
App.tsx
import { ThemeProvider, createTheme } from '@rneui/themed';

const myTheme = createTheme({
MyCustomComponent: {
titleStyle: {
color: 'red',
},
},
});

const App = () => {
return (
<ThemeProvider theme={myTheme}>
<MyCustomComponent title="My Component" />
</ThemeProvider>
);
};