Shopify/restyle

Layoutprops is not getting applied while using useRestyle hook

sandeepkmrr opened this issue · 2 comments

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;

Feel free to reopen if this is still an issue (with more information, reproduction steps) or if an answer from @flexbox covered your problem.