---
title: Components
sidebar_position: 3
---

### 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.

```tsx title='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>;
  }
}
```

```tsx title='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>
  );
};
```
