react-native: [Android] overflow visible doesn't work

I hate Android. It doesn’t support normal shadows, blur and even overlapping now

“Overflow” feature for Android won’t be supported for next a few years. So find a tricky way to implement your design.

There is a rewrite of Android’s View library called Nodes. It supports overflow. It is still not ready yet but maybe will be later this year if it is a success. Check back later this year.

Why does it always feel like android is just not a first class citizen in react-native

The way react-native is advertised in the readme

The focus of React Native is on developer efficiency across all the platforms you care about

Doesn’t come over with the way it actually functions at all, every time I am trying to build something for both platforms. Its super easy to do in iOS but for some reasons I require a ton of hacks to make things as trivial as this work on android. Now don’t get me wrong, I think react-native is a fantastic tool. But I think the community would appreciate it more if it worked more consistently across different platforms.

Any updates on this?

Still no updates on this? I literally have to redo a dumb-component from scratch because of this… just cuz Android.

Been bitten by this multiple times, there should be a warning in RN if overflow: ‘visible’ is set on Android.

How is this issue closed? any solutions?

Are there any practical recommendations ?

Would it be possible to update the documentation to call this out? From what I see here in the docs, overflow: 'visible' | 'hidden' would be available on both platforms.

I found this workaround - https://github.com/entria/react-native-view-overflow But note that it probably will require a bit of of restructuring of your code.

I think some updates needs to be done on the document https://facebook.github.io/react-native/docs/layout-props.html that overflow dose not work on Android currently

overflow?: enum(‘visible’, ‘hidden’, ‘scroll’)

overflow controls how a children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents main axis. It works like overflow in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details.

Overflow is not supported on Android: https://facebook.github.io/react-native/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android

A property that’s only supported in one OS is not very useful … don’t claim react-native supports it then.

im having a similar issue, im using position absolute to draw outside a view. everything works fine, untill i try to set onLayout property on the view, then it just clips whatever is outside the view.

also, setting hight on the view does the same.

any suggestions?

@aymericbouzy - I managed to get something similar to this behavior using elevation. Checkout the gist.

RN50 overflow visible seems broken for me, even with something else than images. See https://github.com/facebook/react-native/issues/17074

+1 !!!

Found a working link to Ide’s original closure explanation. It’s a wontfix: https://web.archive.org/web/20160702114556/http://facebook.github.io:80/react-native/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android

@ide the link is broken, is it still relevant?

@aymericbouzy “each layer being an absolute positioned view taking the full width and height of the display” If you do that you won’t be able to touch any button, or at least only the one with higher zIndex, even if you see the underlaying touchable element.

@aymericbouzy Unfortunately not, since you can’t overlap views on Android. This really proves problematic for this kind of layout, particularly when soft shadows are involved. There are many issues at stake: no visible overflow (the real bummer), buggy z-indexes, absolute positioning randomness…

Let me show you another example of a UI I am trying to implement, but for which I am currently clueless.

On iOS, I would simply use negative margins or even absolute positioning with a global container; this would be pretty easy. But because of the overflow issue, neither of this classic methods will work on Android. Do you have any idea that would allow me to circumvent these limitations?