How to create a custom hook useColors() ?

[fregayeg]

Hello!

I'd like to create a hook called useColors() in which I get the colors object from the theme.

I did the following but I have a wrong return type their 😞

import { useTheme } from "@shopify/restyle";
import { AppTheme } from "@app/constants";

export const useColors = ():  typeof AppTheme.colors => {

  const theme = useTheme<AppTheme>();

  return theme.colors;
}

The IDE suggest me to use a long object like:

TS2322: Type '{ primary1: string; primary2: string; primary5: string; primary7: string; primary3: string; primary8: string; primary9: string; primary10: string; primary11: string; primary12: string; red10: string; ... 15 more ...; transparent: string; }'

And I don't want to do this, is there any other way out please ?

[firasrg]

Hello !

You can do the following:

import { useTheme } from "@shopify/restyle";
import { AppTheme } from "@app/constants";

export const useColors = ():   AppTheme["colors"] => useTheme<AppTheme>().colors;