Open Forium777 opened 10 months ago
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...
borderRadius={'round'}
SkeletonPlaceholder.Item
borderRadius={1000}
With borderRadius={'round'}
With borderRadius={1000}
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 };
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, },
"@shopify/restyle": "^2.4.2",
Only components created using createText or createBox can be used
Current behavior
I apply a
borderRadius={'round'}
which is defined in my Theme.tsx but it doesn't get applied to mySkeletonPlaceholder.Item
whereas if I doborderRadius={1000}
- rectangle becomes circle...With![Simulator Screen Shot - iPhone 14 Pro - 2023-09-07 at 15 35 08](https://github.com/Shopify/restyle/assets/69720050/0d02dc7f-0d0a-4434-802f-8854fd1baec5)
borderRadius={'round'}
With![Simulator Screen Shot - iPhone 14 Pro - 2023-09-07 at 15 36 23](https://github.com/Shopify/restyle/assets/69720050/a074ba25-73b5-4003-9646-7484e15a5434)
borderRadius={1000}
Code:
Expected behavior
borderRadius={'round'}
should get applied with value from my Theme.tsx which is:Platform:
Environment
"@shopify/restyle": "^2.4.2",