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