Typescript React type errot on colorModeMangager from nativeBase framework

Question

I'm using the NativeBase Framework for my UI in typescript React and tried to setup a color mode mangager to gloabally manage dark/light mode in my App, just like they implemented it in their docs:

const colorModeManager: StorageManager = {
    get: async () => {
      let val = localStorage.getItem('@color-mode');
      return val === 'dark' ? 'dark' : 'light';
    },
    set: async (value: ColorMode) => {
      let strValue = value ? value.toString() : '';
      localStorage.setItem('@color-mode', strValue);
    },
  };

...

<NativeBaseProvider colorModeManager={colorModeManager}>  (...)    </NativeBaseProvider>

But I get this type error annotated on my "get" key in the StorageManager object:

Type '{ get: () => Promise<"light" | "dark">; set: (value: ColorMode) => Promise<void>; }' is not assignable to type 'StorageManager'.
  Object literal may only specify known properties, and 'get' does not exist in type 'StorageManager'.ts(2322)
(property) get: () => Promise<"dark" | "light">

And this error on the colorModeManager prop of the NativeBaseProvider:

Type 'StorageManager' is missing the following properties from type 'StorageManager': get, setts(2739)
NativeBaseProvider.d.ts(7, 5): The expected type comes from property 'colorModeManager' which is declared here on type 'IntrinsicAttributes & NativeBaseProviderProps'
(property) NativeBaseProviderProps.colorModeManager?: StorageManager | undefined

I've checked the StorageManager interface of native-base:

export interface StorageManager {
    get(init?: ColorMode): Promise<ColorMode | undefined>;
    set(value: ColorMode): void;
}

And I think it matches what I've defined (well it should, it's just copy pasted from their docs), but I get the type errors. Does someone know, what I'm missing here?

You can also check out the whole source code right at this state on my Github: https://github.com/Fabian5150/game-collection-app/tree/489c3975b018ac689bcd37970be586afde8815cb

Answer 1

Try Importing StorageManager from 'native-base'