Fix Android overflow for horizontal scroll container

[vdmtrv]

This change fixes an overflow issue related to horizontal scroll views. Currently, any child <View/> within a horizontal <FlatList/> will be clipped by default and this change aims to fix this issue.

Changelog:

[Android] [Fixed] - Fixed an Android overflow issue with horizontal scroll views

Test Plan:

• Create a horizontal <FlatList/> with styled items having scale: 2 and a border around each item
• Item border should not be cut-off once app is launched

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[sahrens]

I’m worried this will break existing products that rely on this behavior. Can you make it a prop controllable through JS instead?

[cpojer]

@vdimitrovv could you address @sahrens's comments?

[vdmtrv]

@sahrens fair point. Linking it to the overflow prop would probably make more sense.

@cpojer I'll be addressing it shortly. Life and work keep getting in the way 😬

I managed to delete my previous react-native fork. Can someone edit this PR and point it to vdimitrovv/react-native -> fix/horizontal-scroll-container-overflow? Thanks.

[cpojer]

Hey @vdimitrovv did you have any chance to address our concerns?

[cpojer]

@vdimitrovv feel free to create a new PR :)

[computerjazz]

@cpojer @sahrens I'd love for this to be fixed and I'd like to take a crack at it if @vdimitrovv doesn't have time. Where would be the proper place to add the overflow prop? As a style of the FlatList itself? The contentContainerStyle? Somewhere else?

[vdmtrv]

@computerjazz I'm not sure that this Android overflow issue is still an issue with the latest version of react-native. I will upgrade the repository I'm working on soon and will submit a new PR if necessary.

Also, I probably should have mentioned that the issue was spotted on an Android TV build.

[computerjazz]

@vdimitrovv it is still an issue in RN 60. I build and maintain a draggable flatlist package and am in the process of rewriting it to be more performant by using a translate. Vertical lists work fine but horizontal lists do not overflow correctly:

Vertical lists do overflow correctly: