Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.
https://shopify.github.io/restyle/
MIT License
2.86k stars 128 forks source link

Theming is not working as expected #275

Open Forium777 opened 10 months ago

Forium777 commented 10 months ago

Current behavior

I apply a borderRadius={'round'} which is defined in my Theme.tsx but it doesn't get applied to my SkeletonPlaceholder.Item whereas if I do borderRadius={1000} - rectangle becomes circle...

With borderRadius={'round'} Simulator Screen Shot - iPhone 14 Pro - 2023-09-07 at 15 35 08

With borderRadius={1000} Simulator Screen Shot - iPhone 14 Pro - 2023-09-07 at 15 36 23

Code:

import { Box, Theme } from '@/components/Theme';
import {
  border,
  createRestyleComponent,
} from '@shopify/restyle';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const SkeletonPlaceholderItem = createRestyleComponent<
  React.ComponentProps<typeof SkeletonPlaceholder.Item & typeof Box>,
  Theme
>([border], SkeletonPlaceholder.Item)

const RoundedSkeleton = ({ size = 100 }) => {
  return (
    <SkeletonPlaceholder>
      <SkeletonPlaceholderItem
        width={size}
        height={size}
        borderRadius={`round`} // result with borderRadius={1000} in screen 2
      />
    </SkeletonPlaceholder>
  )
}

export { RoundedSkeleton };

Expected behavior

borderRadius={'round'} should get applied with value from my Theme.tsx which is:

borderRadii: {
    none: 0,
    s: 4,
    ms: 6,
    m: 8,
    lm: 10,
    l: 12,
    xl: 20,
    round: 1000,
},

Platform:

Environment

"@shopify/restyle": "^2.4.2",

laogui commented 6 months ago

Only components created using createText or createBox can be used