search

alabsi91 / reanimated-color-picker

A Pure JavaScript Color Picker for React Native
https://alabsi91.github.io/reanimated-color-picker/
MIT License
221 stars 15 forks source link

Shadow calculation of Swatch is inefficient #77

Closed MehediH closed 2 months ago

MehediH commented 3 months ago

Description

Getting this warniong with the <Swatches/> component:

WARN  (ADVICE) View #963 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Steps to reproduce

Use the <Swatches/> component like:

 <Swatches
     style={{ paddingTop: 10, paddingHorizontal: 10 }}
     swatchStyle={{
                shadowOpacity: enableSwatchShadow ? 0.2 : 0,
                shadowRadius: 4,
                width: 30,
                height: 30
     }}
     colors={SWATCHES_COLORS}
/>

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.1

React Native version

0.73.4

React Native Reanimated version

3.8.1

React Native Gesture Handler version

2.14.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

alabsi91 commented 3 months ago

This warning is related to React Native on iOS. It occurs when a view lacks a background color (swatch color) property or has a transparent one. Additionally, it can happen when using a shadowOpacity of 0. Some solutions suggest putting the opacity in the shadowColor instead

MehediH commented 2 months ago

Thanks @alabsi91, this issue was unrelated to this component. Sorry about that!