Typescript

TypeScript Definitions (extending the default theme)

TypeScript definitions for your theme can be extended by using TypeScript's declaration merging 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.

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

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