diff --git a/example/ios/AgoraExample/Info.plist b/example/ios/AgoraExample/Info.plist
index 41790beb..7361dfb8 100644
--- a/example/ios/AgoraExample/Info.plist
+++ b/example/ios/AgoraExample/Info.plist
@@ -37,8 +37,12 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>Camera</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>Microphone</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
diff --git a/example/src/examples/basic/JoinChannelVideo.tsx b/example/src/examples/basic/JoinChannelVideo.tsx
index b045dd91..d3af0263 100644
--- a/example/src/examples/basic/JoinChannelVideo.tsx
+++ b/example/src/examples/basic/JoinChannelVideo.tsx
@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
 import {
-  View,
-  TextInput,
-  PermissionsAndroid,
-  StyleSheet,
   Button,
+  PermissionsAndroid,
   Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
 } from 'react-native';
 
 import RtcEngine, {
-  RtcLocalView,
-  RtcRemoteView,
   ChannelProfile,
   ClientRole,
+  RtcLocalView,
+  RtcRemoteView,
 } from 'react-native-agora';
 
 const config = require('../../../agora.config.json');
@@ -22,6 +23,7 @@ interface State {
   isJoined: boolean;
   remoteUid: number | undefined;
   switchCamera: boolean;
+  switchRender: boolean;
 }
 
 export default class JoinChannelAudio extends Component<{}, State, any> {
@@ -33,7 +35,8 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
       channelId: config.channelId,
       isJoined: false,
       remoteUid: undefined,
-      switchCamera: false,
+      switchCamera: true,
+      switchRender: true,
     };
   }
 
@@ -107,6 +110,11 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
       });
   };
 
+  _switchRender = () => {
+    const { switchRender } = this.state;
+    this.setState({ switchRender: !switchRender });
+  };
+
   render() {
     const { channelId, isJoined, switchCamera } = this.state;
     return (
@@ -135,17 +143,31 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
   }
 
   _renderVideo = () => {
-    const { remoteUid } = this.state;
+    const { remoteUid, switchRender } = this.state;
     return (
       <View style={styles.container}>
-        <RtcLocalView.SurfaceView style={styles.local} />
-        {remoteUid !== undefined && (
+        {switchRender ? (
+          <RtcLocalView.SurfaceView style={styles.local} />
+        ) : (
           <RtcRemoteView.SurfaceView
-            style={styles.remote}
-            uid={remoteUid}
+            style={styles.local}
+            uid={remoteUid!}
             zOrderMediaOverlay={true}
           />
         )}
+        {remoteUid !== undefined && (
+          <TouchableOpacity style={styles.remote} onPress={this._switchRender}>
+            {switchRender ? (
+              <RtcRemoteView.SurfaceView
+                style={styles.container}
+                uid={remoteUid}
+                zOrderMediaOverlay={true}
+              />
+            ) : (
+              <RtcLocalView.SurfaceView style={styles.container} />
+            )}
+          </TouchableOpacity>
+        )}
       </View>
     );
   };
diff --git a/ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManager.swift b/ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManager.swift
index 3a9c5bf6..66dd9317 100644
--- a/ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManager.swift
+++ b/ios/RCTAgora/React/RCTAgoraRtcSurfaceViewManager.swift
@@ -9,6 +9,22 @@
 import Foundation
 import AgoraRtcKit
 
+fileprivate struct AssociatedKeys {
+    static var view: UInt8 = 0
+}
+
+@objc(AgoraRtcVideoCanvas)
+public extension AgoraRtcVideoCanvas {
+    @objc weak var view: UIView? {
+        get {
+            return objc_getAssociatedObject(self, &AssociatedKeys.view) as? UIView
+        }
+        set {
+            objc_setAssociatedObject(self, &AssociatedKeys.view, newValue, .OBJC_ASSOCIATION_ASSIGN)
+        }
+    }
+}
+
 @objc(RCTAgoraRtcSurfaceViewManager)
 class RCTAgoraRtcSurfaceViewManager: RCTViewManager {
     override func view() -> UIView! {
@@ -39,8 +55,9 @@ class RCTAgoraRtcSurfaceViewManager: RCTViewManager {
 class RtcView: RtcSurfaceView {
     private var getEngine: (() -> AgoraRtcEngineKit?)?
     private var getChannel: ((_ channelId: String) -> AgoraRtcChannel?)?
-
+    
     deinit {
+        destroy()
         // if let engine = getEngine?() {
             // resetVideoCanvas(engine)
         // }