Getting android opacity (alpha) applied to random elements on react native 0.73.8

[matt-dalton]

We're experiencing a tricky issue, so I apologize for not being as precise as I'd like!

We've got an issue in our Android app where certain elements on our screens seem to sometimes appear greyed out. e.g.

When inspecting these elements, there are no styling props anywhere on our side that would cause this, but an alpha value of <1 has been applied to the underlying Android native element:

The actual value seems to vary randomly between 0 and 1. It seems to randomly happen on certain components in our hierarchy...e.g. the text and image component above...plus a few views.

We've spent lots of time isolating the issue, and are confident no code on our side is setting this. There is nothing setting any kind of opacity in our tree. It also does not happen on iOS.

We are using a few common libraries (e.g. react navigation, gesture handler, react native screens). We have tried rendering the tree with/without them, and have found we can't recreate the issue once we remove the SafeAreaProvider at the top of the screen. We are using the latest safe area context v4.10.9.

We have tried reproducing via an expo snack and unfortunately are not able to. We think there is a performance/device element to it so it perhaps is more likely to appear on larger component hierarchies.

I don't understand why safe area view could be causing this, but is there anything in the library that could conceivably set an alpha value? Is there anything we could log or comment out from the library that might help us understand more.

[simonxciv]

Just on a hunch, is there any chance you're using a BlurView anywhere in the component hierarchy of the screen you're seeing this behaviour? Your description sounds similar to an issue I've seen and am able to reproduce on Android when using BlurView