---
sidebar_label: With Typescript
title: Typescript
sidebar_position: 6
---

### TypeScript Definitions (extending the default theme)

TypeScript definitions for your theme can be extended by using TypeScript's [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) feature. First you need to create a declaration file called `react-native-elements.d.ts` and then declare the module `@rneui/themed` and 're-export' the types that you want to extend.

i.e. below we add a custom `p1Style` to the `Text` theme object and we add a bunch of colors to the `colors` object.

```tsx
export * from '@rneui/themed';

type RecursivePartial<T> = { [P in keyof T]?: RecursivePartial<T[P]> };

declare module '@rneui/themed' {
  export interface TextProps {
    bold: boolean;
  }

  export interface Colors {
    background: string;
    border: string;
    text: string;
    altText: string;
    danger: string;
  }

  export interface FullTheme {
    colors: RecursivePartial<Colors>;
    Text: Partial<TextProps>;
  }
}
```

```tsx
const myTheme = createTheme({
  Text: (props) => ({
    style: {
      fontWeight: props.bold ? 'bold' : 'normal',
    },
  }),
});
```
