fix. video render mode and release 2.4.0-alpha.5

CHANGELOG

 - support 2.4.0-alpha.2 using 0.55.1 as peerDependency and support typescript
 - support 2.4.0-alpha.3 bugfix iOS receiveStreamMessage data is null
 - support 2.4.0-alpha.4 bugfix iOS videoSizeChanged field rotation typo
+- support 2.4.0-alpha.5 bugfix Android & iOS side not support fit mode and hidden mode. Deprecate: setupLocalVideo & setupRemoteVideo
 
 #### 2.3.3-alpha
 - support agora video sdk 2.3.3

android/src/main/java/com/syan/agora/AgoraManager.java

     }
 
     /**
-     * 设置本地视频，即前置摄像头预览
+     * setupLocalVideo will render video from local side capture into ui layout
      */
-    public int setupLocalVideo() {
-        //创建一个SurfaceView用作视频预览
+    public int setupLocalVideo(Integer mode) {
         SurfaceView surfaceView = RtcEngine.CreateRendererView(context);
-        //将SurfaceView保存起来在SparseArray中，后续会将其加入界面。key为视频的用户id，这里是本地视频, 默认id是0
-
         mSurfaceViews.put(mLocalUid, surfaceView);
-
-        //设置本地视频，渲染模式选择VideoCanvas.RENDER_MODE_HIDDEN，如果选其他模式会出现视频不会填充满整个SurfaceView的情况，
-        //具体渲染模式参考官方文档https://docs.agora.io/cn/user_guide/API/android_api.html#set-local-video-view-setuplocalvideo
-        return mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, mLocalUid));
+        return mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, mode, mLocalUid));
     }
 
-    public int setupRemoteVideo(final int uid) {
+    /**
+     * setupRemoteVideo will render video from remote side capture into ui layout
+     */
+    public int setupRemoteVideo(final int uid, final Integer mode) {
         SurfaceView surfaceView = RtcEngine.CreateRendererView(context);
         mSurfaceViews.put(uid, surfaceView);
-        return mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_HIDDEN, uid));
+        return mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, mode, uid));
+    }
+
+    /**
+     * set local video render mode
+     * @param Integer renderMode
+     * @return result state
+     */
+    public int setLocalRenderMode(final Integer renderMode) {
+        return mRtcEngine.setLocalRenderMode(renderMode);
+    }
+
+    /**
+     * set remote video render mode
+     * @param Integer uid
+     * @param Integer renderMode
+     * @return result state
+     */
+    public int setRemoteRenderMode(final Integer uid, final Integer renderMode) {
+        return mRtcEngine.setRemoteRenderMode(uid, renderMode);
     }
 
     public int setEnableSpeakerphone(boolean enabled) {

android/src/main/java/com/syan/agora/AgoraModule.java

         RtcEngine.destroy();
     }
 
-    @ReactMethod
-    public void setupLocalVideo() {
-        try {
-            int res = AgoraManager.getInstance().setupLocalVideo();
-            if (res != 0) throw new ReactNativeAgoraException("setupLocalVideo Failed", res);
-        } catch (Exception e) {
-            WritableMap err = Arguments.createMap();
-            err.putBoolean("success", false);
-            err.putString("message", e.toString());
-            sendEvent(getReactApplicationContext(), "error", err);
-        }
-    }
-
-    @ReactMethod
-    public void setupRemoteVideo(ReadableMap options) {
-        try {
-            int uid = options.getInt("uid");
-            int res = AgoraManager.getInstance().setupRemoteVideo(uid);
-            if (res != 0) throw new ReactNativeAgoraException("setupRemoteVideo Failed", res);
-        } catch(Exception e) {
-            WritableMap err = Arguments.createMap();
-            err.putBoolean("success", false);
-            err.putString("message", e.toString());
-            sendEvent(getReactApplicationContext(), "error", err);
-        }
-    }
-
     @ReactMethod
     public void startPreview() {
         AgoraManager.getInstance().startPreview();
         }
     }
 
-//  deprecated
-//    @ReactMethod
-//    public void startEchoTest(Promise promise) {
-//        try {
-//            int res = AgoraManager.getInstance().mRtcEngine
-//                    .startEchoTest();
-//            if (res != 0) throw new ReactNativeAgoraException("startEchoTest Failed", res);
-//            WritableMap map = Arguments.createMap();
-//            map.putBoolean("success", true);
-//            map.putInt("value", res);
-//            promise.resolve(map);
-//        } catch (Exception e) {
-//            promise.reject("131009", e);
-//        }
-//    }
-
     @ReactMethod
     public void stopEchoTest(Promise promise) {
         try {
         }
     }
 
-//    deprecated
-//    @ReactMethod
-//    public void setVideoQualityParameters(boolean quality, Promise promise) {
-//        try {
-//            int res = AgoraManager.getInstance().mRtcEngine.setVideoQualityParameters(quality);
-//            if (res != 0) throw new ReactNativeAgoraException("sendStreamMessage Failed", res);
-//            WritableMap map = Arguments.createMap();
-//            map.putBoolean("success", true);
-//            map.putInt("value", res);
-//            promise.resolve(map);
-//        } catch (Exception e) {
-//            promise.reject(e);
-//        }
-//    }
-
     @ReactMethod
     public void setLocalVideoMirrorMode(int mode, Promise promise) {
         try {

android/src/main/java/com/syan/agora/AgoraPackage.java

     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
         return Arrays.<ViewManager>asList(
-                new AgoraViewManage()
+                new AgoraViewManager()
         );
     }
 }

android/src/main/java/com/syan/agora/AgoraVideoView.java

 
 import android.content.Context;
 import android.util.AttributeSet;
+import android.view.SurfaceView;
+import android.view.View;
 import android.widget.LinearLayout;
 
+import io.agora.rtc.mediaio.AgoraSurfaceView;
+
 /**
  * Created by DB on 2017/6/27.
  */
 
 public class AgoraVideoView extends LinearLayout {
+    public boolean isShowLocalVideo() {
+        return showLocalVideo;
+    }
+
+    public void setShowLocalVideo(boolean showLocalVideo) {
+        this.showLocalVideo = showLocalVideo;
+    }
+
+    public Integer getRenderMode() {
+        return renderMode;
+    }
+
+    public void setRenderMode(Integer renderMode) {
+        this.renderMode = renderMode;
+
+    }
+
+    public Integer getRemoteUid() {
+        return remoteUid;
+    }
+
+    public void setRemoteUid(Integer remoteUid) {
+        this.remoteUid = remoteUid;
+    }
+
+    public boolean getZOrderMediaOverlay() {
+        return zOrderMediaOverlay;
+    }
+
+    public void setZOrderMediaOverlay(boolean zOrderMediaOverlay) {
+        this.zOrderMediaOverlay = zOrderMediaOverlay;
+    }
+
+    private boolean showLocalVideo;
+    private Integer renderMode = 1;
+    private Integer remoteUid;
+    private boolean zOrderMediaOverlay;
+    private SurfaceView surfaceView;
 
     public AgoraVideoView(Context context) {
         super(context);
     public AgoraVideoView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }
+
+    protected void onVisibilityChanged(View changedView, int visibility) {
+        super.onVisibilityChanged(changedView, visibility);
+        if (changedView == this) {
+            if (null != remoteUid) {
+                AgoraManager.getInstance().setRemoteRenderMode(remoteUid, renderMode);
+            } else {
+                AgoraManager.getInstance().setLocalRenderMode(renderMode);
+            }
+        }
+    }
 }

android/src/main/java/com/syan/agora/AgoraViewManage.java

-package com.syan.agora;
-
-import android.view.SurfaceView;
-
-import com.facebook.react.uimanager.SimpleViewManager;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-
-/**
- * Created by DB on 2017/6/23.
- */
-
-public class AgoraViewManage extends SimpleViewManager<AgoraVideoView> {
-
-    public static final String REACT_CLASS = "RCTAgoraView";
-
-    public SurfaceView surfaceView;
-
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @Override
-    protected AgoraVideoView createViewInstance(ThemedReactContext reactContext) {
-        return new AgoraVideoView(reactContext);
-    }
-
-    @ReactProp(name = "showLocalVideo")
-    public void setShowLocalVideo(final AgoraVideoView agoraVideoView, boolean showLocalVideo) {
-
-        AgoraManager.getInstance().setupLocalVideo();
-        surfaceView = AgoraManager.getInstance().getLocalSurfaceView();
-        //surfaceView.setVisibility(View.VISIBLE);
-        agoraVideoView.addView(surfaceView);
-//        surfaceView.setZOrderMediaOverlay(true);
-
-    }
-
-    @ReactProp(name = "zOrderMediaOverlay")
-    public void setZOrderMediaOverlay(final AgoraVideoView agoraVideoView, boolean zOrderMediaOverlay) {
-        surfaceView.setZOrderMediaOverlay(zOrderMediaOverlay);
-    }
-
-    @ReactProp(name = "remoteUid")
-    public void setRemoteUid(final AgoraVideoView agoraVideoView, final int remoteUid) {
-        AgoraManager.getInstance().setupRemoteVideo(remoteUid);
-        surfaceView = AgoraManager.getInstance().getSurfaceView(remoteUid);
-        //surfaceView.setVisibility(View.VISIBLE);
-        agoraVideoView.addView(surfaceView);
-//        surfaceView.setZOrderMediaOverlay(true);
-    }
-}

android/src/main/java/com/syan/agora/AgoraViewManager.java

+package com.syan.agora;
+
+import android.view.SurfaceView;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+/**
+ * Created by DB on 2017/6/23.
+ */
+
+public class AgoraViewManager extends SimpleViewManager<AgoraVideoView> {
+
+    public static final String REACT_CLASS = "RCTAgoraVideoView";
+
+    public SurfaceView surfaceView;
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected AgoraVideoView createViewInstance(ThemedReactContext reactContext) {
+        return new AgoraVideoView(reactContext);
+    }
+
+    @ReactProp(name = "mode")
+    public void setRenderMode(final AgoraVideoView agoraVideoView, Integer renderMode) {
+        agoraVideoView.setRenderMode(renderMode);
+    }
+
+    @ReactProp(name = "showLocalVideo")
+    public void setShowLocalVideo(final AgoraVideoView agoraVideoView, boolean showLocalVideo) {
+        agoraVideoView.setShowLocalVideo(showLocalVideo);
+        if (showLocalVideo) {
+            AgoraManager.getInstance().setupLocalVideo(agoraVideoView.getRenderMode());
+            surfaceView = AgoraManager.getInstance().getLocalSurfaceView();
+            surfaceView.setZOrderMediaOverlay(agoraVideoView.getZOrderMediaOverlay());
+            agoraVideoView.addView(surfaceView);
+        }
+    }
+
+    @ReactProp(name = "zOrderMediaOverlay")
+    public void setZOrderMediaOverlay(final AgoraVideoView agoraVideoView, boolean zOrderMediaOverlay) {
+        surfaceView.setZOrderMediaOverlay(zOrderMediaOverlay);
+    }
+
+    @ReactProp(name = "remoteUid")
+    public void setRemoteUid(final AgoraVideoView agoraVideoView, final int remoteUid) {
+        agoraVideoView.setRemoteUid(remoteUid);
+        if (remoteUid > 0) {
+            AgoraManager.getInstance().setupRemoteVideo(remoteUid, agoraVideoView.getRenderMode());
+            surfaceView = AgoraManager.getInstance().getSurfaceView(remoteUid);
+            surfaceView.setZOrderMediaOverlay(agoraVideoView.getZOrderMediaOverlay());
+            agoraVideoView.addView(surfaceView);
+        }
+    }
+
+}

ios/RCTAgora/RCTAgora.m

 // init
 RCT_EXPORT_METHOD(init:(NSDictionary *)options) {
   [self startObserving];
-  NSLog(@"startObserving events");
   [AgoraConst share].appid = options[@"appid"];
   
   self.rtcEngine = [AgoraRtcEngineKit sharedEngineWithAppId:options[@"appid"] delegate:self];
   [AgoraRtcEngineKit destroy];
 }
 
-// set local video canvas
-RCT_EXPORT_METHOD(setupLocalVideo:(NSDictionary *)options){
-  AgoraRtcVideoCanvas *canvas = [AgoraRtcVideoCanvas new];
-  canvas.uid = [AgoraConst share].localUid;
-  canvas.view = [self.bridge.uiManager viewForReactTag:options[@"reactTag"]];
-  canvas.renderMode = [options[@"renderMode"] integerValue];
-  [self.rtcEngine setupLocalVideo:canvas];
-}
-
-// set remote video canvas
-RCT_EXPORT_METHOD(setupRemoteVideo:(NSDictionary *) options) {
-  AgoraRtcVideoCanvas *canvas = [AgoraRtcVideoCanvas new];
-  canvas.uid = [options[@"uid"] integerValue];
-  canvas.view = [self.bridge.uiManager viewForReactTag:options[@"reactTag"]];
-  canvas.renderMode = [options[@"renderMode"] integerValue];
-  [self.rtcEngine setupRemoteVideo:canvas];
-}
-
 // set local video render mode
 RCT_EXPORT_METHOD(setLocalRenderMode:(NSInteger) mode) {
   [self.rtcEngine setLocalRenderMode:mode];
   }
 }
 
-// deprecated
-// set video quality
-//RCT_EXPORT_METHOD(setVideoQualityParameters
-//                  :(BOOL) quality
-//                  resolve:(RCTPromiseResolveBlock)resolve
-//                  reject:(RCTPromiseRejectBlock)reject) {
-//  NSInteger res = [self.rtcEngine setVideoQualityParameters:quality];
-//  if (res == 0) {
-//    resolve(@{@"success": @(YES)});
-//  } else {
-//    reject(@"131033", @"setVideoQualityParameters failed", [self makeNSError:@{
-//                                                                               @"code": @(131033),
-//                                                                               @"message":@{
-//                                                                                   @"success": @(NO),
-//                                                                                   @"value":[NSNumber numberWithInteger:res]
-//                                                                                   }
-//                                                                               }]);
-//  }
-//}
-
 // set local video mirror mode
 RCT_EXPORT_METHOD(setLocalVideoMirrorMode
                   :(NSInteger) mode

ios/RCTAgora/RCTAgoraVideoView.h

 @interface RCTAgoraVideoView : UIView
 
 @property (strong, nonatomic) AgoraRtcEngineKit *rtcEngine;
-
 @property (nonatomic) BOOL showLocalVideo;
 @property (nonatomic) NSInteger remoteUid;
+@property (nonatomic) NSInteger renderMode;
 
 @end

ios/RCTAgora/RCTAgoraVideoView.m

 //
 
 #import "RCTAgoraVideoView.h"
+#import <React/RCTBridgeModule.h>
 
 @implementation RCTAgoraVideoView
 
   
   if (self == [super init]) {
     _rtcEngine = [AgoraConst share].rtcEngine;
+    _renderMode = AgoraVideoRenderModeHidden;
   }
   
   return self;
 }
 
+- (void)setRenderMode:(NSInteger)renderMode {
+  _renderMode = renderMode;
+}
+
 - (void)setShowLocalVideo:(BOOL)showLocalVideo {
-  if (showLocalVideo) {
-    AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
+  _showLocalVideo = showLocalVideo;
+  AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
+  if (_showLocalVideo) {
     canvas.uid = [AgoraConst share].localUid;
     canvas.view = self;
-    canvas.renderMode = AgoraVideoRenderModeHidden;
+    canvas.renderMode = _renderMode;
     [_rtcEngine setupLocalVideo:canvas];
   }
 }
 
 -(void)setRemoteUid:(NSInteger)remoteUid {
-  if (remoteUid > 0) {
-    AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
-    canvas.uid = remoteUid;
+  _remoteUid = remoteUid;
+  AgoraRtcVideoCanvas *canvas = [[AgoraRtcVideoCanvas alloc] init];
+  if (_remoteUid > 0) {
+    canvas.uid = _remoteUid;
     canvas.view = self;
-    canvas.renderMode = AgoraVideoRenderModeHidden;
+    canvas.renderMode = _renderMode;
     [_rtcEngine setupRemoteVideo:canvas];
+    return;
+  }
+}
+
+-(void) willMoveToSuperview:(UIView *)newSuperview {
+  [super willMoveToSuperview:newSuperview];
+  if (_remoteUid > 0) {
+    [_rtcEngine setRemoteRenderMode:_remoteUid mode:_renderMode];
+  } else {
+    [_rtcEngine setLocalRenderMode:_renderMode];
   }
 }
 

ios/RCTAgora/RCTAgoraViewManager.m

 
 @implementation RCTAgoraViewManager
 
-RCT_EXPORT_MODULE()
+RCT_EXPORT_MODULE(RCTAgoraVideoView)
 
-RCT_EXPORT_VIEW_PROPERTY(showLocalVideo, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(remoteUid, NSInteger)
+RCT_CUSTOM_VIEW_PROPERTY(mode, NSInteger, RCTAgoraVideoView) {
+  view.renderMode = [RCTConvert NSInteger:json];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(showLocalVideo, BOOL, RCTAgoraVideoView) {
+  view.showLocalVideo = [RCTConvert BOOL:json];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(remoteUid, NSInteger, RCTAgoraVideoView) {
+  view.remoteUid = [RCTConvert NSInteger:json];
+}
 
 - (UIView *)view {
   return [RCTAgoraVideoView new];

lib/AgoraView.native.d.ts

  * This class is used to rendering native sdk stream
  *
  * @props {@link AgoraViewProps}
+ *
+ * @descrption AgoraViewProps has four properties.
+ * @property number: mode, this property will setup video render mode. there is two avaliable mode {hidden: 1, fit: 2}, you could see more details [https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#ac08882c4d0ec47b329900df169493673](#here)
+ * @property boolean: showLocalVideo, this property will render local video, NOTICE: IF YOU SET showLocalVideo YOU CANNOT SET remoteUid
+ * @property number: remoteUid, this property will render video with remote uid, NOTICE: IF YOU SET remoteUid YOU CANNOT SET showLocalVideo
+ * @property boolean: zOrderMediaOverlay, this property will working for android side and it likes zIndex behaviour on web side.
  */
 export default class AgoraView extends React.Component<AgoraViewProps> {
     /**

lib/AgoraView.native.js

  *
  * This @object is used to bridge native layer between react layer.
  */
-const RCTAgoraView = react_native_1.requireNativeComponent("RCTAgoraView");
+const RCTAgoraView = react_native_1.requireNativeComponent("RCTAgoraVideoView");
 /**
  * AgoraView is the render layer for rendering video stream
  *
  * This class is used to rendering native sdk stream
  *
  * @props {@link AgoraViewProps}
+ *
+ * @descrption AgoraViewProps has four properties.
+ * @property number: mode, this property will setup video render mode. there is two avaliable mode {hidden: 1, fit: 2}, you could see more details [https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#ac08882c4d0ec47b329900df169493673](#here)
+ * @property boolean: showLocalVideo, this property will render local video, NOTICE: IF YOU SET showLocalVideo YOU CANNOT SET remoteUid
+ * @property number: remoteUid, this property will render video with remote uid, NOTICE: IF YOU SET remoteUid YOU CANNOT SET showLocalVideo
+ * @property boolean: zOrderMediaOverlay, this property will working for android side and it likes zIndex behaviour on web side.
  */
 class AgoraView extends react_1.default.Component {
     /**

lib/AgoraView.native.js.map

-{"version":3,"file":"AgoraView.native.js","sourceRoot":"","sources":["../src/AgoraView.native.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,+CAEqB;AAMrB;;;;GAIG;AAEH,MAAM,YAAY,GAAG,qCAAsB,CAAC,cAAc,CAAC,CAAC;AAE5D;;;;;;GAMG;AACH,MAAqB,SAAU,SAAQ,eAAK,CAAC,SAAyB;IAClE;;;;OAIG;IACI,MAAM;QACT,OAAO,CACH,8BAAC,YAAY,oBAAM,IAAI,CAAC,YAAY,EAAE,EAAK,CAC9C,CAAA;IACL,CAAC;IAED;;;;OAIG;IACK,YAAY;QAChB,IAAI,SAAS,GAAG,EAAoB,CAAC;QACrC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YACxB,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;SACpC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AAxBD,4BAwBC"}
+{"version":3,"file":"AgoraView.native.js","sourceRoot":"","sources":["../src/AgoraView.native.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,+CAEqB;AAMrB;;;;GAIG;AAEH,MAAM,YAAY,GAAG,qCAAsB,CAAC,mBAAmB,CAAC,CAAC;AAEjE;;;;;;;;;;;;GAYG;AACH,MAAqB,SAAU,SAAQ,eAAK,CAAC,SAAyB;IAClE;;;;OAIG;IACI,MAAM;QACT,OAAO,CACH,8BAAC,YAAY,oBAAM,IAAI,CAAC,YAAY,EAAE,EAAK,CAC9C,CAAA;IACL,CAAC;IAED;;;;OAIG;IACK,YAAY;QAChB,IAAI,SAAS,GAAG,EAAoB,CAAC;QACrC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YACxB,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;SACpC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ;AAxBD,4BAwBC"}

lib/RtcEngine.native.d.ts

-import { Option, Callback, VideoOption, AudioMixingOption, DataStreamOption, PlayEffectOption, AudioRecordingOption, AudioFrameOption, MixedAudioFrameOption, ImageOption, VideoStreamOption, DefaultVideoStreamOption, InjectStreamOption, RemoveInjectStreamOption, PublishStreamOption, RemovePublishStreamOption, LiveTranscodingOption, PositionOption, BeautyOption, LastmileProbeConfig, CameraCapturerConfiguration } from "./types";
+import { Option, Callback, AudioMixingOption, DataStreamOption, PlayEffectOption, AudioRecordingOption, AudioFrameOption, MixedAudioFrameOption, ImageOption, VideoStreamOption, DefaultVideoStreamOption, InjectStreamOption, RemoveInjectStreamOption, PublishStreamOption, RemovePublishStreamOption, LiveTranscodingOption, PositionOption, BeautyOption, LastmileProbeConfig, CameraCapturerConfiguration } from "./types";
 /**
  * RtcEngine is the javascript object for control agora native sdk through react native bridge.
  *
      * @returns Promise<{success, value}>
      */
     static destroy(): Promise<any>;
-    /**
-     * show local video
-     *
-     * This method calls native sdk render canvas for local video.
-     * @param options {@link VideoOption}
-     */
-    static setupLocalVideo(options: VideoOption): void;
-    /**
-     * show remote video
-     *
-     * This method calls native sdk render canvas for remote video.
-     * @param options {@link VideoOption}
-     */
-    static setupRemoteVideo(options: VideoOption): void;
     /**
      * set local video render mode
      *
      */
     static setAudioSessionOperationRestriction(): void;
     /**
-     * @deprecated
-     * start echo test
-     *
-     * This method launches an audio call test to determine whether the audio devices (for example, headset and speaker) and the network connection are working properly.
-     * @returns Promise<{success, value}>
+     * @deprecated startEchoTest
+     * startEchoTest
      */
     /**
      * stop echo test
      */
     static removeInjectStreamUrl(options: RemoveInjectStreamOption): Promise<any>;
     /**
-     * @deprecated
-     * set video quality
-     *
-     * This method sets the preferences for the video quality. (Live broadcast only).
-     *
-     * @param quality boolean
-     * @returns Promise<{success, value}>
+     * @deprecated setupLocalVideo
+     * setupLocalVideo
+     */
+    /**
+     * @deprecated setupRemoteVideo
+     * setupRemoteVideo
+     */
+    /**
+     * @deprecated setVideoQualityParameters
+     * setVideoQualityParameters
      */
     /**
      * set local video mirror mode

lib/RtcEngine.native.js

     static destroy() {
         return Agora.destroy();
     }
-    /**
-     * show local video
-     *
-     * This method calls native sdk render canvas for local video.
-     * @param options {@link VideoOption}
-     */
-    static setupLocalVideo(options) {
-        Agora.setupLocalVideo(options);
-    }
-    /**
-     * show remote video
-     *
-     * This method calls native sdk render canvas for remote video.
-     * @param options {@link VideoOption}
-     */
-    static setupRemoteVideo(options) {
-        Agora.setupRemoteVideo(options);
-    }
     /**
      * set local video render mode
      *
         Agora.setAudioSessionOperationRestriction();
     }
     /**
-     * @deprecated
-     * start echo test
-     *
-     * This method launches an audio call test to determine whether the audio devices (for example, headset and speaker) and the network connection are working properly.
-     * @returns Promise<{success, value}>
+     * @deprecated startEchoTest
+     * startEchoTest
      */
-    // public static startEchoTest(): Promise<any> {
-    //     return Agora.startEchoTest();
-    // }
     /**
      * stop echo test
      *
         return Agora.removeInjectStreamUrl(options);
     }
     /**
-     * @deprecated
-     * set video quality
-     *
-     * This method sets the preferences for the video quality. (Live broadcast only).
-     *
-     * @param quality boolean
-     * @returns Promise<{success, value}>
+     * @deprecated setupLocalVideo
+     * setupLocalVideo
+     */
+    /**
+     * @deprecated setupRemoteVideo
+     * setupRemoteVideo
+     */
+    /**
+     * @deprecated setVideoQualityParameters
+     * setVideoQualityParameters
      */
-    // public static setVideoQualityParameters(quality: boolean): Promise<any> {
-    //     return Agora.setVideoQualityParameters(quality);
-    // }
     /**
      * set local video mirror mode
      *

lib/types.d.ts

 export declare type String = Nullable<string>;
 export declare type Number = Nullable<number> | 0;
 export interface AgoraViewProps extends ViewProps {
+    mode: number;
     showLocalVideo: boolean;
     remoteUid: number;
     zOrderMediaOverlay: boolean;

package.json

 {
   "name": "react-native-agora",
-  "version": "2.4.0-alpha.4",
+  "version": "2.4.0-alpha.5",
   "description": "React Native around the Agora RTC SDKs for Android and iOS agora",
   "summary": "agora native sdk for react-native",
   "main": "lib/index.js",

react-native-agora.podspec

   #
 
   s.platform     = :ios
-  # s.platform     = :ios, "5.0"
+  s.platform     = :ios, "5.0"
 
   #  When using multiple platforms
   # s.ios.deployment_target = "5.0"

src/AgoraView.native.tsx

  * This @object is used to bridge native layer between react layer.
  */
 
-const RCTAgoraView = requireNativeComponent("RCTAgoraView");
+const RCTAgoraView = requireNativeComponent("RCTAgoraVideoView");
 
 /**
  * AgoraView is the render layer for rendering video stream
  * This class is used to rendering native sdk stream
  *
  * @props {@link AgoraViewProps}
+ * 
+ * @descrption AgoraViewProps has four properties.
+ * @property number: mode, this property will setup video render mode. there is two avaliable mode {hidden: 1, fit: 2}, you could see more details [https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#ac08882c4d0ec47b329900df169493673](#here)
+ * @property boolean: showLocalVideo, this property will render local video, NOTICE: IF YOU SET showLocalVideo YOU CANNOT SET remoteUid
+ * @property number: remoteUid, this property will render video with remote uid, NOTICE: IF YOU SET remoteUid YOU CANNOT SET showLocalVideo
+ * @property boolean: zOrderMediaOverlay, this property will working for android side and it likes zIndex behaviour on web side.
  */
 export default class AgoraView extends React.Component<AgoraViewProps> {
     /**

src/RtcEngine.native.ts

         return Agora.destroy();
     }
 
-    /**
-     * show local video
-     *
-     * This method calls native sdk render canvas for local video.
-     * @param options {@link VideoOption}
-     */
-
-    public static setupLocalVideo(options: VideoOption) {
-        Agora.setupLocalVideo(options);
-    }
-
-    /**
-     * show remote video
-     *
-     * This method calls native sdk render canvas for remote video.
-     * @param options {@link VideoOption}
-     */
-    public static setupRemoteVideo(options: VideoOption) {
-        Agora.setupRemoteVideo(options);
-    }
-
     /**
      * set local video render mode
      *
      }
 
     /**
-     * @deprecated
-     * start echo test
-     *
-     * This method launches an audio call test to determine whether the audio devices (for example, headset and speaker) and the network connection are working properly.
-     * @returns Promise<{success, value}>
+     * @deprecated startEchoTest
+     * startEchoTest
      */
-    // public static startEchoTest(): Promise<any> {
-    //     return Agora.startEchoTest();
-    // }
+
 
     /**
      * stop echo test
     }
 
     /**
-     * @deprecated
-     * set video quality
-     *
-     * This method sets the preferences for the video quality. (Live broadcast only).
-     *
-     * @param quality boolean
-     * @returns Promise<{success, value}>
+     * @deprecated setupLocalVideo
+     * setupLocalVideo 
+     */
+
+    /**
+     * @deprecated setupRemoteVideo
+     * setupRemoteVideo 
+     */
+
+
+    /**
+     * @deprecated setVideoQualityParameters
+     * setVideoQualityParameters
      */
-    // public static setVideoQualityParameters(quality: boolean): Promise<any> {
-    //     return Agora.setVideoQualityParameters(quality);
-    // }
 
     /**
      * set local video mirror mode

src/types.ts

 export type Number = Nullable<number> | 0;
 
 export interface AgoraViewProps extends ViewProps {
+  mode: number,
   showLocalVideo: boolean,
   remoteUid: number,
   zOrderMediaOverlay: boolean,