Layoutprops is not getting applied while using useRestyle hook
sandeepkmrr opened this issue · 2 comments
sandeepkmrr commented
import React from 'react';
import {
createVariant,
createRestyleComponent,
VariantProps,
backgroundColor,
BackgroundColorProps,
useRestyle,
spacing,
SpacingProps,
LayoutProps,
layout,
} from '@shopify/restyle';
import {TouchableOpacity} from 'react-native';
import {Theme} from '../../themes/default';
import Box from '../Box';
const CardVariant = createVariant({themeKey: 'cardVariants'});
const CardContainer = createRestyleComponent<
VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
Theme
>([CardVariant], Box);
const restyleFunctions = [CardVariant as any, backgroundColor, spacing, layout];
type CardProps = VariantProps<Theme, 'cardVariants'> &
BackgroundColorProps<Theme> &
SpacingProps<Theme> &
LayoutProps<Theme> & {
onPress?: () => void;
children?: React.ReactNode;
};
const Card = ({...rest}: CardProps) => {
const props = useRestyle(restyleFunctions, rest);
const {
onPress,
children,
} = rest;
return (
<TouchableOpacity onPress={onPress}>
<CardContainer {...props}>{children}</CardContainer>
</TouchableOpacity>
);
};
export default Card;
flexbox commented