React Native V0.71.0 Shadow Warnings

[stakez]

Current behaviour

Since upgrading to React Native 0.71.0, the following warning has been occurring
WARN (ADVICE) View #1853 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.

After removing several React Native paper Components (especially Surface), the warnings dropped. After reverting to original, the warnings all return.

Expected behaviour

No warning should be shown.

How to reproduce?

Run a React Native App using V0.71.0 and view the terminal running react-native start

Preview

Your Environment

software	version
react-native	0.71.0
react-native-paper	^5.1.2
node	18.12.1
npm or yarn	yarn
expo sdk	not applicable

[lukewalczak]

As you noticed the issue comes form the Surface component where we are applying the elevation, but the views don't have a specified background color, that's why the warning appears. I will definitely check what we can do about it.

[stakez]

Thanks @lukewalczak. Looking toward to what you find.

[Yusk03]

Can agree
Have the same problem, hope you'll resolve it

[asurare]

Having the same issue after a recent update. Is it open to PR ?

[lukewalczak]

Is it open to PR ?

Sure, contributions are welcomed!

[visoft]

This is happening with the Portal and Dialog components as well.

[Streudal]

Adding on to what @visoft mentioned: this is also happening with the FAB component as well. Basically anything that has a shadow built in it seems like.

[lukewalczak]

We are aware of that issue and there is a PR which should fix the warning.

[lukewalczak]

Version 5.5.0 has been released and the issue should be fixed :)

[Streudal]

Everything is lookin great! Thanks for the updates!

[ericpoulinnz]

@lukewalczak I'm still getting this warning in 5.5.2.

Seems to be the AnimatedFAB.

[spaskhalov]

I'm getting this warnings in 5.5.2, after setting buttonColor property for Button.

[nam3886]

any update?

[CarlosSLoureiro]

someone know to ignore this warning from console/terminal?

[lukewalczak]

I'm getting this warnings in 5.5.2, after setting buttonColor property for Button.

I was not able to reproduce it unfortunately with the Button

Seems to be the AnimatedFAB.

Correct, there is still the warning in AnimatedFAB, which is related to the component composition and its animation – it depends on transparent background color in the wrapper container, which triggers the warning. We are aware of that and will check what we can do about it.

someone know to ignore this warning from console/terminal?

The log is printed from react-native using RCTLogAdvice and I think there is no way to suppress it.

[ericpoulinnz]

We are aware of that and will check what we can do about it.

@lukewalczak is this something actively being investigated?

The log is printed from react-native using RCTLogAdvice and I think there is no way to suppress it.

I am handing over a project to a client with a technical person onboard and they are giving me grief about any warnings in the console. Suppressing is both challenging and now that they have seen the warning, potentially not viable for me.

[mertkahramanturk]

This error requires you to specify the background color of the element you want to shade.something like that:
backgroundColor: colors.white,
shadowColor: '#171717',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.3,
shadowRadius: 5,

[fellenabmb]

This issue is still present. And just as the author, I narrowed it down to the Surface component.

Currently using:

    "react-native": "0.72.4"
    "react-native-paper": "^5.8.0"

[GoRRRRchik]

This issue is still present

react-native: 0.72.4

[brunoravizzinidev]

react-native: 0.71.8
react-native-paper: 5.10.0

This issue is present, I'm seeing it in the AnimatedFAB

[ramakula]

We are also seeing this:

WARN (ADVICE) View #46655 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.
WARN (ADVICE) View #46653 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.
WARN (ADVICE) View #48305 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.
WARN (ADVICE) View #48303 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.

[Fortidude]

Im seeing this as well. Any way to ignore / silence it?

[CostasCF]

Did you find any way to silence it?

[JeanBaptisteBolh]

@Fortidude @CostasCF I am also looking for a way to silence this.

[Abdeldmh]

Still no fix for this ??

[abubakarasifmughal]

Im using this version "react-native-paper": "^5.11.6" and still facing this issue.

[Abdeldmh]

Hi ! I've finally identified the issue. Initially, I thought it might be related to react-native-paper, but after explore other possibilities. It turns out that when you set backgroundColor: 'transparent' on some components like Views, it triggers the warning. The solution? I added shadowColor: 'transparent', and voila, the issue was resolved! 😄

[R4tch3t]

Hi ! I've finally identified the issue. Initially, I thought it might be related to react-native-paper, but after explore other possibilities. It turns out that when you set backgroundColor: 'transparent' on some components like Views, it triggers the warning. The solution? I added shadowColor: 'transparent', and voila, the issue was resolved! 😄

not work :/ react-native: 0.73.2, react-native-paper: 5.12.1

[R4tch3t]

only adding the backgroundColor to the elevated component :/

[fellenabmb]

This issue is still present!.

[JuMaruhn]

If you do not need the functionalities of the Surface component, you can go to the AnimatedFAB.tsx and replace the <Surface> component by a <Animated.View> component.

[devonik]

For me it was the elevated style of a react-native-elements Icon.

When I remove the raised the warning it's gone.

Result: As the advise says I set the backgroundColor and the warning is gone
<Icon raised containerStyle={{ backgroundColor: theme.colors.white }} />