React Native 77 Android Surface Shadow

[iM-GeeKy]

Current behaviour

When upgrading to react native 77, on android, surface shadows appear to be distorted as opposed to them looking correct when using a lower version such as react native 76.6.

Expected behaviour

Surface shadows should look and behave in the same way as previous versions of this library.

How to reproduce?

1 The working branch with react native version 76.6

• Run eas build --profile android-development-client --platform android --local --clear-cache.
• b. Run npm run start.
• Type a for android.

2 The issue branch with react native version 77

• Run eas build --profile android-development-client --platform android --local --clear-cache.
• b. Run npm run start.
• Type a for android.

Preview

React Native 76.6 (Correct)	React Native 77 (Incorrect)

What have you tried so far?

After doing some digging it appears the Surface component is responsible for this behavior when upgrading to react native 77.

Your Environment

software	version
ios	18.2
android	14.0
react-native	77.0
react-native-paper	5.13.1
node	22.13.1
npm or yarn	npm
expo sdk	52.0.28

[iM-GeeKy]

It appears it may be an upstream issue.

[Smit-Kadawala]

any update i am also get this problem? Thank you

[iM-GeeKy]

I'm closing this. It is an upstream issue. Follow the [upstream thread]([Android] Elevation (elevation style prop) looks weird combined with border radius (borderRadius style prop) on RN 0.77 facebook/react-native#48874) for more info.

Update: Solved by react native version 77.1