React Native hidden overflow child behavior

[ocapio]

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.50.4
2. npm ls rnpm-plugin-windows:
   [email protected] C:\src\react-native-windows
3. npm ls react-native-windows:
   [email protected] C:\src\react-native-windows
4. node -v:
   v7.5.0
5. npm -v:
   4.1.2
6. yarn --version:

Then, specify:

• Target Platform: IOS, Android and UWP

• Target Platform Version(s):
  Building from source whatever is master - UWP.

• Target Device(s):

• Development Operating System: Windows

• Visual Studio Version:
  Visual Studio 2017 v15.4.5

Steps to Reproduce

This is from a question in reactiflux under the react-native-platform channels. username: facelessraven.
I've been asked by matt to file an issue. This is more of a question regarding rendering behavior between all the react-native platforms.

Are there any specification on how View items are rendered as a child of a View item with the hidden overflow property?

(Write your steps here:)

1. Just modify the Playground index.windows.js with the following:

class Playground extends Component { render() { return ( <View style={{ width: 200, height: 200, margin: 60, backgroundColor: 'blue', overflow: 'visible' }}> <View style={{ width: 100, height: 100, backgroundColor: 'green', marginLeft: -50 }} /> <View style={{ overflow: 'hidden' }}> <View style={{ width: 100, height: 100, backgroundColor: 'orange', marginLeft: -50 }} /> </View> </View> ); } }

Expected Behavior

I am not sure what is the expected behavior that is why I am asking.

Actual Behavior

The rendering matches that of Android:

Windows:

However, if we add something like a transparent background to the hidden overflow element.
i.e.
<View style={{ backgroundColor: 'rgba(0,0,0,0)', overflow: 'hidden' }}>

The rendering will be more like IOS:

However, this doesn't have an effect in Android.

If rendering should follow standard CSS. Here is a screenshot of HTML:

So who is rendering this correctly and is there any specifications? Do children inherit the parent properties or use some other default values?

Reproducible Demo

Here is a snack demo demonstrating the IOS and Android behavior.
https://snack.expo.io/@ocapio/nested-view-behavior

Thanks

[rozele]

@ocapio thanks for reporting. React Native uses some flex defaults - can you apply the same flex defaults to the Web solution and post that here?

[rozele]

@ocapio - it looks like iOS is the only correct implementation. I think it's a known issue that overflow: visible doesn't work on Android (facebook/react-native#17074). It concerns me that you need to set a transparent background on the parent View container to get Windows to match iOS. I'll investigate.

[ghost]

We are not investing in new features or lower priority bug fixes on vCurrent. The bulk of investment is now in vNext as we prepare to make that the default choice. If this issue is still relevant on the vNext implementation please open a vNext issue. If this issue is of significant severity for a vCurrent app and vNext is not an option, re-open with justification.