Skip to content

Typescript errors when merging declarations to extend theme #2932

@vruffer

Description

@vruffer

Explain what you did (Required)

I tried to extend the default theme following the guide on your documentation, under "Customization -> TypeScript Definitions (extending the default theme)". I've tried it on react-native-elements@3.3.2 where the typescript error occurs, and on react-native-elements@3.2.0 where it doesn't.

I also want to mention that the guide doesn't properly explain that you should import the types you want to extend in your react-native-elements.d.ts otherwise, typescript will not find any properties or types you didn't define in that file.

Example:

import {Colors} from 'react-native-elements'
type RecursivePartial<T> = {[P in keyof T]?: RecursivePartial<T[P]>};

declare module 'react-native-elements' {
  export interface Colors {
    foreground: string;
  }

  export interface FullTheme {
    colors: RecursivePartial<Colors>;
  }
}

Expected behavior (Required)

That typescript correctly merges the default Colors type, with my custom Colors type, such that colors.foreground has autocompletion and typechecking.

Describe the bug (Required)

When following the guide using a basic extension of the Colors object like the example earlier, a typescript error: Subsequent property declarations must have the same type. Property 'colors' must be of type 'RecursivePartial<Colors>', but here has type 'RecursivePartial<Colors>' occurs.

To Reproduce (Required)

  1. Create new react-native app using typescript template
  2. Install react-native-elements react-native-vector-icons
  3. Create file react-native-elements.d.ts somewhere in project
  4. Insert the code from the earlier example
  5. Try to compile (or see vscode typescript error) and see the error

Your Environment (Required):

software version
react-native-elements 3.3.2
react-native 0.63.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions