[Android] Transparency of rasterized content about gl-react-native-v2

[gr4yscale]

First: thanks for this fantastic contribution to the react native ecosystem.

I wanted to confirm if what I'm seeing is the same issue as described:

If I place a underneath any other view on Android, the Surface will render on top of any native views. In iOS I see the expected behavior, so I can place text or buttons above the shader/surface.

I've tried many, many things: using position: absolute of course, and various combinations of background transparency/colors.

Is this behavior related to this issue or do I need to open a new issue?

[gre]

Mmh it depends, what are you rendering in the Surface?
Do you have rasterized content (like native views), I mean content that you passed in an uniform. or are these native views just under the <Surface> in absolute?

I might not have deeply tested this but I think gl-react-native Surface opacity (from shader) does work on Android. the bug logged here is that the native views when rasterized via gl-react uniforms is always opaque (never have opacity in it).

facebook/react-native#4878 <- Maybe you might be talking about this React Native bug? (that I also discovered when playing with gl-react-native on Android)

[gr4yscale]

Mmmmm, no - I did't pass any textures in as uniforms, just laid native views above the surface:

  <View style={styles.container}>
    <Surface
        width={deviceWidth}
        height={300}
        opaque={false}
        ref="helloGL"
        pixelRatio={2}
    >
      <HelloGL />
    </Surface>
    <Image style={{position:'absolute', top: 100, left: 30, width: 300, height: 100}} source={{ uri: 'http://i.imgur.com/S22HNaU.png'}} width={300} height={100} />
    <Text style={{position:'absolute', top: 100, left: 30, width: 300, height: 100,backgroundColor:'transparent', color:'#FFFFFF', fontSize:36}}>SOME NATIVE TEXT ABOVE AN IMAGE, ABOVE A SHADER</Text>
  </View>

Yields different results on iOS / Android:

iOS:

Android:

[gre]

I'm not sure how position: "absolute" works and if it's well supported in RN Android, have you tried to replace the <Surface> by a simple red square <View style={{ width: deviceWidth, height: 300, backgroundColor: "red" }} /> ?
also have you tried to position: "absolute" the Surface too (style prop should be supported) ?

[gr4yscale]

Works fine with replacing a surface with a simple view, so it seems to be specific to gl-react-native:

[gr4yscale]

And yes, I've tried position: absoluting the surface. That works fine in terms of positioning, but the layer order is not respected on Android like it is on iOS - no matter what order you define the views in on render, the surface is always rendering on top

[gre]

this is weird.
I'll try to repro it, it might be related to the <View><GLCanvas> specific internal nesting

[gre]

can you open another issue?

[gr4yscale]

Opened a new issue:
#57

I'm happy to do some investigation as well, will comment on the new issue

[gre]

thanks

[IjzerenHein]

Is there any progress on this item? Running into this as well.
Thanks