^{Originally posted by lucksp April 5, 2022}
I do not want to use the default Colors theme shape type because it does not fit our needs. I added a react-native-elements.d.ts file to extend the theme, as suggested in docs, but it brings up the docs to v3.4.

// react-native-elements.d.ts

import '@rneui/themed';
import { ColorShape } from '../lib/theme/colors/theme.type';

declare module '@rneui/themed' {
    export interface CreateThemeOptions {
        myColors: ColorShape;
    }
}

and then in my App, i add the ThemeProvider, and inject the new theme as prop:

// app.tsx

import { ThemeProvider, FullTheme, createTheme } from '@rneui/themed';

const withThemeProvider = (Story, context) => {
  const colors = useDarkMode() ? dark : light;

  const themeObj = createTheme({
    myColors: colors
  })

  return (
    <ThemeProvider theme={themeObj}>
        {children}
    </ThemeProvider>
  );
};

What I am seeing is that the ThemeProvider in V4 requests theme to be of type: theme?: CreateThemeOptions, where in v3, the theme is of type (property) theme?: {} | undefined.

So v4 is much more strict about this. However, I still thought that by creating a new interface CreateThemeOptions above, that we could add a new type in. Typescript complains:

Argument of type '{ myColors: ColorShape; }' is not assignable to parameter of type 'CreateThemeOptions'.
Object literal may only specify known properties, and 'myColors' does not exist in type 'CreateThemeOptions'.ts(2345)

How can I add this custom theme shape?