Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When displaying a video on top of a video using the RtcRemoteView.SurfaceView component, borderRadius not working with zOrderOnTop

See original GitHub issue

Trying to display a video on top of another video. The bottom video is a fullscreen video. // FullVideo.js <View fullScreen style={{ position: 'absolute', top: 0, left: 0, zIndex: 0}}> <RtcRemoteView.SurfaceView style={{ flex: 1 }} uid={uid} channelId={channelId} renderMode= {VideoRenderMode.Hidden} zOrderMediaOverlay />} </View>

Another video is displayed as absolute positioned, on top of it. // SmallVideo.js <View style={{ width, height, borderRadius: 10, overflow: 'hidden', zIndex: 2 }}> <RtcRemoteView.SurfaceView style={{ flex: 1 }} uid={uid} channelId={channelId} renderMode={VideoRenderMode.Hidden} zOrderOnTop /> </View>

When in SmallVideo.js the zOrderMediaOverlay prop is set, the View becomes TRANSPARENT When in SmallVideo.js the zOrderOnTop prop is set, borderRadius does not work even with overflow hidden

Even zIndex in the SurfaceView style doesn’t have any effect. Is there something missing here? I am using the react native v0.63.3

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8

github_iconTop GitHub Comments

louxinbocommented, May 19, 2021

@dylancolin Did you try to use RtcRemoteView.TextureView? The borderRadius did not work for me, when I used SurfaceView, after I changed to TextureView then it worked.

LichKing-2234commented, May 20, 2021

seem like the issue has been solved.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML5 Video Border Radius in Chrome Not Working
Show activity on this post. We have a video playing with rounded corners and a drop shadow and it's as simple as: border-radius:...
Read more >
How to add borderRadius to RtcLocalView.SurfaceView ? #480
How to add borderRadius to RtcLocalView.SurfaceView in React Native ? I tried the following code, but the video is still square without rounded...
Read more >
border-radius - CSS: Cascading Style Sheets - MDN Web Docs
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, ......
Read more >
Video in border-radius element - CodePen
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >
HTML DOM Style borderRadius Property - W3Schools
The borderRadius property is a shorthand property for setting, or returning, ... Tip: This property allows you to add rounded corners to elements!...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found