Typescript: useContext(ThemeContext) doesn't expose extended theme types

My theme looks something like this:

const theme = {
  colors: {
    primary: '#fff'
  },
  customColors: {
    background: '#000'
  }
}

Referencing an extended theme with const { theme } = React.useContext(ThemeProvider) does not expose the extended theme elements in typescript - in this example, typescript does not know about the customColors object on the theme.

Copying @braincore from #2007, it looks like this is because the ThemeContext statically defines the generic in ThemeProps as {}. And a workaround is to use a type assertion: const { theme } = useContext(ThemeContext) as ThemeProps<MyTheme>;

Is this workaround the recommended way to do this? Or is it possible to define the ThemeContext in some way after the defaultTheme is defined by deep merging the base theme with the custom theme?

Envi details:

software	version
react-native-elements	^1.2.7
react-native	0.61.4

[walterholohan]

Same here, in order to resolve the issue I had to add import {Colors, FullTheme} from 'react-native-elements' to the top of the file. Example of my declaration file below

e.g.

import {Colors, FullTheme} from 'react-native-elements'

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

declare module 'react-native-elements' {
  export interface Colors {
    background: string
    darkText: string
  }

  type ThemeFontDimention = {
    fontSize: number
    lineHeight: number
  }

  export interface FullTheme {
    colors: RecursivePartial<Colors>
    padding: {
      small: number
      default: number
      large: number
      screen: number
    }
    fontSizes: {
      small: ThemeFontDimention
      medium: ThemeFontDimention
      large: ThemeFontDimention
    }
  }
}

[brerdem]

@Johan-dutoit thanks it worked. However now I’m getting error about every element that I didn’t declare in the file (see the screenshot below) Shouldn’t it be merged into the existing definitions?