iOS shadow warning

[IvanYeromenko]

react-native-figma-squircle + shadow styles

Reproduce:

1. Disable new arch with RCT_NEW_ARCH_ENABLED=0 pod install

<SquircleView squircleParams={{ cornerSmoothing: 1, cornerRadius: 20, strokeColor: 'green', strokeWidth: 1, fillColor: 'green', }} style={[ getShadow(shadow), style, ]} {...props} />

const SHADOW_MAP: Record<TShadow, TShadowConfig> = { 0: {height: 0, shadowRadius: 0, elevation: 0}, 100: {height: 2, shadowRadius: 4, elevation: 2}, 200: {height: 4, shadowRadius: 6, elevation: 4}, 300: {height: 6, shadowRadius: 8, elevation: 6}, 400: {height: 6, shadowRadius: 12, elevation: 8}, 500: {height: 6, shadowRadius: 14, elevation: 10}, 600: {height: 8, shadowRadius: 18, elevation: 12}, 700: {height: 8, shadowRadius: 22, elevation: 14}, 800: {height: 8, shadowRadius: 28, elevation: 18}, };

export const getShadow = (level: TShadow): ViewStyle => { const config = SHADOW_MAP[level];

return { shadowColor: COLORS.main.shadow, shadowOffset: {width: 0, height: config.height}, shadowOpacity: 0.12, shadowRadius: config.shadowRadius, elevation: config.elevation, }; };

Setting backgroundColor in style is not a fix, in this case cornerSmoothing is not visible.

[phamfoo]

Have you tried this https://github.com/phamfoo/react-native-figma-squircle/issues/8#issuecomment-998414506?

[IvanYeromenko]

Doesn't help. It is easy to reproduce this warning:

1. Turn off the RCT_NEW_ARCH_ENABLED for iOS
2. Use SquircleView with fillColor and cornerRadius
3. Don't pass backgroundColor to styles

[phamfoo]

Without a solid background RN will fall back to pixel based shadow, there's no way around that. https://github.com/facebook/react-native/blob/486d38c0242989e0d22b0d9b13dd597a29014c0f/packages/react-native/React/Views/RCTView.m#L882

You could set a solid background color and a borderRadius, the value of borderRadius should be slightly larger than squircleParams.cornerRadius. Keep increasing borderRadius until you no longer see the view's background.

This is obviously not ideal. Perhaps we could add custom shadow support using FeDropShadow or switch to react-native-skia.