TS error: When I use position restyleFunctions
VictorPulzz opened this issue · comments
Current behavior
My code:
export type BaseIconProps = LayoutProps<Theme> & SpacingProps<Theme> & PositionProps<Theme>;
const restyleFunctions = composeRestyleFunctions<Theme, BaseIconProps>([spacing, layout, position]);
Expected behavior
No error:)
Platform:
- iOS
- Android
Environment
"react": "18.2.0",
"react-native": "0.71.9",
"@shopify/restyle": "^2.4.2",
"typescript": "~4.8.4"
Okay I miss zIndices section... -_-
One question, why I need have section zIndices (if I what use position restyleFuction)?
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.
This solved the problem for me: