Tek Loon Tek Loon - 1 month ago 5
React JSX Question

React Native Style (top, left, bottom, right) behave different between Android and iOS

I encountered this issue where the UI display differently with the same code between Android and iOS.

Android UI Snapshot. You can only see half of the circle image in Android while you can see full circle image in iOS. Please see at the simulator on RNplay.

You can found my source code & re-simulate for this issue at
https://rnplay.org/apps/q6LxiQ

Thanks for the help in advance.

ide ide
Answer

The cause of this issue is that RN iOS views default to overflow: visible while RN Android views only implement overflow: hidden due to how the native Android view system works. The behavior on Android is unlikely to change until Android itself changes.

To render consistently on both platforms, either set overflow: 'hidden' on your parent view or, to show the overflow, move the children out of the parent view and use an onLayout event on the parent view to get its position in order to calculate the desired position of the children, and absolutely position them.

Comments