react-native-agora icon indicating copy to clipboard operation
react-native-agora copied to clipboard

Published 20 hours ago • verified publisher icon AgoraIO-Extensions

Rounded Corners?

Open AB-70 opened this issue 10 months ago • 1 comments

Is there any way to get rounded corners on android for the RTC Surface View?

I've tried so many ways, including overflow: hidden on parent, masked view (from react-native-community package), and none of them seem to work.

The video is always rendered with sharp corners and this doesn't align with my app's theme.

Any help in this regard will be appreciated.

Using react native 0.73.5 React Native Agora: 4.3.0

AB-70 avatar Apr 25 '24 22:04 AB-70

@AB-70 Thanks for your PR, we will make a fully test and release it in the future , maybe in 4.4.0.

BTW you can use RTCTextureView to get rounded corners.

guoxianzhe avatar Apr 30 '24 08:04 guoxianzhe 

<View style={{ flex: 1, borderRadius: 50, overflow: 'hidden' }}>
  <RtcSurfaceView style={{ flex:1 }}/>
</View>

Without native side changes, I use these simple code can make borderRadius happen(tested in Android and iOS), so I will not add this in sdk. So If you still get problems we can look into them again.

image image

guoxianzhe avatar Jun 14 '24 07:06 guoxianzhe