TS error: When I use position restyleFunctions

[VictorPulzz]

Current behavior

Hello, I got this error:

My code:

export type BaseIconProps = LayoutProps<Theme> & SpacingProps<Theme> & PositionProps<Theme>;
const restyleFunctions = composeRestyleFunctions<Theme, BaseIconProps>([spacing, layout, position]);

Expected behavior

No error:)

Platform:

• [x] iOS
• [x] Android

Environment

"react": "18.2.0", "react-native": "0.71.9", "@shopify/restyle": "^2.4.2", "typescript": "~4.8.4"

[VictorPulzz]

Okay I miss zIndices section... -_-

[VictorPulzz]

One question, why I need have section zIndices (if I what use position restyleFuction)?

[sebellows]

One question, why I need have section zIndices (if I what use position restyleFuction)?

I was having the same issue with the border restyle function when passing it to composeRestyleFunction. I added dummy entries to my theme for them and the TS errors went away. Some restyle functions will rely on referring to a themeKey, which the position function does. It refers to a themeKey of zIndices, so zIndices needs to be configured in your theme in order to use position in a composed Restyle function. You can look at the table on the Restyle docs in the right column, the rows that don't say "none" need to be defined in your theme if you plan on using the associated restyle function in composeRestyleFunction.

I guess it'd be nice if maybe Restyle came with some defaults for some common properties that could be over-written if the user wants to, ala Tailwind, e.g.:

{
  border: {
    normal: '#00000033',
    white: '#FFFFFF',
    black: '#000000,
  },
  borderRadii: {
    xs: 2,
    sm: 3,
    md: 4,
    lg: 6,
    xl: 8,
  }
}

But they're not too difficult to add.

[saibbyweb]

This solved the problem for me:

https://github.com/Shopify/restyle/issues/169#issuecomment-1592846860

[m-konoval]

Hi, when you're creating a new theme these properties are required to be described at list with {} or undefined if you don't want to meet any Typescript errors

export const theme = createTheme({
    ...,
    colors: {},
    spacing: {},
    breakpoints: {},
    zIndices: undefined,
    borderRadii: undefined,
    ...

Yeh, they might look optional in types definitions, but this trick helps me to avoid any errors.