#782 - Rounded Corners support for RTCSurfaceView

android/src/main/java/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManager.java

@@ -24,7 +24,7 @@ public String getName() {
   @Override
   public FrameLayout createViewInstance(ThemedReactContext context) {
     this.context = context;
-    FrameLayout layout = new FrameLayout(context.getReactApplicationContext());
+    RoundedFrameLayout layout = new RoundedFrameLayout(context.getReactApplicationContext());
     layout.addView(new SurfaceView(context.getApplicationContext()));
     return layout;
   }
@@ -55,4 +55,11 @@ public void setZOrderOnTop(FrameLayout view, boolean onTop) {
   public void setZOrderMediaOverlay(FrameLayout view, boolean isMediaOverlay) {
     ((SurfaceView) view.getChildAt(0)).setZOrderMediaOverlay(isMediaOverlay);
   }
+
+
+  @Override
+  @ReactProp(name = "cornerRadius")
+  public void setCornerRadius(FrameLayout view, float radius){
+    ((RoundedFrameLayout) view).setCornerRadius(radius);
+  }
 }

android/src/main/java/io/agora/rtc/ng/react/RoundedFrameLayout.java

@@ -0,0 +1,46 @@
+package io.agora.rtc.ng.react;
+
+import android.view.SurfaceView;
+import android.widget.FrameLayout;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Path;
+import android.util.AttributeSet;
+
+public class RoundedFrameLayout extends FrameLayout {
+    private float cornerRadius = 18; 
+
+    public RoundedFrameLayout(Context context) {
+        super(context);
+    }
+
+    public RoundedFrameLayout(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public RoundedFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+
+    @Override
+    protected void dispatchDraw(Canvas canvas) {
+        Path path = new Path();
+        float[] radii = {cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius};
+        path.addRoundRect(0, 0, getWidth(), getHeight(), radii, Path.Direction.CW);
+        canvas.clipPath(path);
+        super.dispatchDraw(canvas);
+    }
+
+    public void setCornerRadius(float radius) {
+        cornerRadius = radius;
+        invalidate(); 
+    }
+  }
+

android/src/oldarch/io/agora/rtc/ng/react/AgoraRtcSurfaceViewManagerSpec.java

@@ -13,4 +13,7 @@ public abstract class AgoraRtcSurfaceViewManagerSpec<T extends View> extends Sim
   public abstract void setZOrderOnTop(T view, boolean onTop);
 
   public abstract void setZOrderMediaOverlay(T view, boolean isMediaOverlay);
+
+  public abstract void setCornerRadius(T view, float radius);
+
 }

src/AgoraRtcRenderView.tsx

@@ -34,6 +34,11 @@
    * Controls whether to place the surface of the RtcSurfaceView on top of another RtcSurfaceView in the window (but still behind the window): true : Place it on top of another RtcSurfaceView in the window. false : Do not place it on top of another RtcSurfaceView in the window.
    */
   zOrderMediaOverlay?: boolean;
+
+  /**
+   * Sets the corner radius of the SurfaceView's container. 
+   */
+  cornerRadius?: number; 
 }
 
 /**

src/specs/AgoraRtcSurfaceViewNativeComponent.ts

@@ -1,5 +1,6 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { Float } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface NativeProps extends ViewProps {
   callApi: {
@@ -9,6 +10,7 @@
   };
   zOrderOnTop?: boolean;
   zOrderMediaOverlay?: boolean;
+  cornerRadius?: Float;
 }
 
 export default codegenNativeComponent<NativeProps>(