[Android] overflow visible doesn't work
skv-headless opened this issue · 39 comments
second view {overflow: 'visible'}
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
Still not working. Drawing outside a view on Android is nearly impossible...
Are there any practical recommendations ?
@aymericbouzy - I managed to get something similar to this behavior using elevation. Checkout the gist.
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.
How is this issue closed? any solutions?
This is a real deal breaker since advanced user interfaces like this one are just impossible to create on Android, while being pretty easy on iOS.
Are there really no plans to find a solution to this matter? I find quite hard to believe that Facebook is able to cope with it...
I believe the interface you are showing can be obtained with absolute positioning.
No he can't there is always a problem with zindex and ontouch methods it's very messy...
can't you abstain from using zIndex and simply put objects in the order in which they should be displayed ?
@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?
@bd-arc I have absolutely no experience building such complex UI, and I'm not saying it's simple.
The way I would go though would be the following : putting each view in a different layer, each layer being an absolute positioned view taking the full width and height of the display, and positioning the visible views inside each layer. Since each layer takes the full dimensions of the display, overflow is not a problem.
I fully agree this solution is a pain, but I believe it works. Please tell me if I'm wrong :)
On 2 Nov 2016, at 10:46, bd-arc notifications@github.com wrote:
@aymericbouzy https://github.com/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.
https://cloud.githubusercontent.com/assets/7899844/19923629/accc6622-a0e8-11e6-82b3-e7ac55c45002.png
https://cloud.githubusercontent.com/assets/7899844/19923171/7ab68200-a0e6-11e6-8e3e-07f03521133c.png
https://cloud.githubusercontent.com/assets/7899844/19923650/bfd909be-a0e8-11e6-96e6-fd67d42fff73.png
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?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #6802 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/AHymFbxWiNuouhdMkkT7uHjvgGHMv7kgks5q6FvggaJpZM4H_jHm.
@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.
@bd-arc you're right. Then you can add touchable views on the uppermost layer upon the visible parts, but the interface is not going to be very responsive ... this is definitely not a long-term solution.
@aymericbouzy Unless I'm mistaken, you're solution is built on something that's pretty complicated: I don't see any reliable way of retrieving complex content's height, particularly before it is rendered (doing it after, assuming this would be both possible and reliable, would lead to jerkiness issues - believe me, I've been there :)
I would rather go with clever margins and paddings, since this seems easier to maintain and would avoid touch issues (the ones that @jreziga stated above), but it would be an incredibly tedious task, with lots of limitations. Furthermore, that still leaves no room for soft shadows. And we haven't even talked about orientation change or responsiveness...
@bd-arc indeed it is very complicated, and unmaintainable, and I wouldn't go this way on a general basis. I'm just saying this is the solution I've found for a much simpler use case than yours.
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?
A property that's only supported in one OS is not very useful ... don't claim react-native supports it then.
Been bitten by this multiple times, there should be a warning in RN if overflow: 'visible' is set on Android.
I hate Android. It doesn't support normal shadows, blur and even overlapping now
Any updates ..?
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.
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.
Hey checkout this https://www.npmjs.com/package/react-native-zindex-views it would help you.
Just looking for a little clarity, wouldn't Android's setClipChildren provide something similar?
https://developer.android.com/reference/android/view/ViewGroup.html#setClipChildren(boolean)
@Dygerati have you found out more about this? It looks like either clipChildren or clipToPadding control overflow on Android: https://stackoverflow.com/questions/18048997/android-view-disappearing-when-go-outside-of-parent
The Android overflow bug has been bothering me for a while now, a fix would be nice.
The commit referenced above (30044fd) doesn't fixes this issue when using overflow: visible with images.
AFAIK it will fix overflow:hidden in case there is border radius defined.
And about overflow:visible on android, it may be impossible to resolve because of android native views specific, but I can be wrong in this point
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
RN50 overflow visible seems broken for me, even with something else than images. See #17074
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.
Still no updates on this? I literally have to redo a dumb-component from scratch because of this... just cuz Android.
Any updates on this?
Still no change?
"Overflow" feature for Android won't be supported for next a few years. So find a tricky way to implement your design.
+1 !!!
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.