RNVideoRenderView covers overlays depending on the layout on Android 9

[andreav]

Describe the bug Depending on the layout, RNVideoRenderView covers overlays placed on top of it

To Reproduce I tried reducing the problem at the minimum example possible. This code works:

     <>
        <View style={styles.wrapAll}>
          <View style={[styles.videoWrapper1]}>
            <View style={[styles.videoContainer]}>
              <RNVideoRenderView style={styles.video} key={0} tileId={0} />
            </View>
          </View>

          <View style={[styles.videoWrapper2]}>
            <View style={[styles.videoContainer]}>
              <RNVideoRenderView style={styles.video} key={1} tileId={1} />
            </View>
          </View>
        </View>

        <View style={[styles.videoWrapper1Text]}>
          <Text style={{color: 'white'}}>Text 1 VISIBLE</Text>
        </View>

        <View style={[styles.videoWrapper2Text]}>
          <Text style={{color: 'white'}}>Text 2 VISIBLE</Text>
        </View>
      </>

This code doesn't work: (Note I moved first Text between RNVideoRenderView 1 and 2)

      <>
        <View style={styles.wrapAll}>
          <View style={[styles.videoWrapper1]}>
            <View style={[styles.videoContainer]}>
              <RNVideoRenderView style={styles.video} key={0} tileId={0} />
            </View>
          </View>

          <View style={[styles.videoWrapper1Text]}>
            <Text style={{color: 'white'}}>TEXT 1 NOT VISIBLE</Text>
          </View>

          <View style={[styles.videoWrapper2]}>
            <View style={[styles.videoContainer]}>
              <RNVideoRenderView style={styles.video} key={1} tileId={1} />
            </View>
          </View>
        </View>

        <View style={[styles.videoWrapper2Text]}>
          <Text style={{color: 'white'}}>TEXT 2 VISIBLE</Text>
        </View>
      </>

Common CSS (absolute positioning of elements)

const styles = StyleSheet.create({
  wrapAll: {
    flex: 1,
    backgroundColor: '#FF11AA',
  },
  videoWrapper1: {
    position: 'absolute',
    width: '100%',
    height: '50%',
    top: 0,
    left: 0,
    borderWidth: 1,
    borderColor: 'blue',
    backgroundColor: 'transparent',
  },
  videoWrapper1Text: {
    position: 'absolute',
    width: '100%',
    top: 0,
    left: 0,
    borderWidth: 1,
    borderColor: 'green',
  },
  videoWrapper2Text: {
    position: 'absolute',
    width: '100%',
    top: '50%',
    left: 0,
    borderWidth: 1,
    borderColor: 'yellow',
  },
  videoWrapper2: {
    position: 'absolute',
    width: '100%',
    height: '50%',
    top: '50%',
    left: 0,
    borderWidth: 1,
    borderColor: 'red',
    backgroundColor: 'transparent',
  },
  videoContainer: {
    height: '100%',
    'object-fit': 'cover',
  },
  video: {
    height: '100%',
  },
});

Expected behavior Overlays should be visible regardless of layout

Logs If applicable, add logs from logcat to help explain your problem.

Screenshots Working layout:

Not working layout:

Test environment Info (please complete the following information):

• Device: LG G6
• OS: Android 9
• Version amazon-chime-sdk: 0.18.0
• Version amazon-chime-sdk-media: 0.18.0

Note: the same code is working on another device:

• Samsung Galaxy S20FE
• OS: Android 12

[dingyishen-amazon]

Thanks for reporting the issue, we are taking a look.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hemavthink]

Any solution to this issue?? I have faced this same issue. I have rendered two RNVideoRenderView, one renderView overlaps the other if I scrolled

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.