diff --git a/example/android/app/src/main/assets/Sound_Horizon.mp3 b/example/android/app/src/main/assets/Sound_Horizon.mp3
new file mode 100644
index 00000000..8f4cdb87
Binary files /dev/null and b/example/android/app/src/main/assets/Sound_Horizon.mp3 differ
diff --git a/example/index.tsx b/example/index.js
similarity index 100%
rename from example/index.tsx
rename to example/index.js
diff --git a/example/ios/AgoraExample.xcodeproj/project.pbxproj b/example/ios/AgoraExample.xcodeproj/project.pbxproj
index 17be20d1..11c4abcd 100644
--- a/example/ios/AgoraExample.xcodeproj/project.pbxproj
+++ b/example/ios/AgoraExample.xcodeproj/project.pbxproj
@@ -13,6 +13,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		20F357B024636CDF00C146DC /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 20F357AF24636CDF00C146DC /* File.swift */; };
+		F5A97F0625D3B42C00263532 /* Sound_Horizon.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = F5A97ED425D3ADDC00263532 /* Sound_Horizon.mp3 */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -31,6 +32,7 @@
 		871719007ECC5EAD276C345C /* Pods-AgoraExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AgoraExample.debug.xcconfig"; path = "Target Support Files/Pods-AgoraExample/Pods-AgoraExample.debug.xcconfig"; sourceTree = "<group>"; };
 		BCEA90A70F4BEAD7E9FA28B2 /* libPods-AgoraExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AgoraExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		F5A97ED425D3ADDC00263532 /* Sound_Horizon.mp3 */ = {isa = PBXFileReference; lastKnownFileType = audio.mp3; path = Sound_Horizon.mp3; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -93,6 +95,7 @@
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				F5A97ED525D3ADEF00263532 /* Resources */,
 				1CFFDEF7170271C97B8B7E5A /* Pods */,
 				20F357AD24636CDE00C146DC /* AgoraExample-Bridging-Header.h */,
 			);
@@ -109,6 +112,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		F5A97ED525D3ADEF00263532 /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				F5A97ED425D3ADDC00263532 /* Sound_Horizon.mp3 */,
+			);
+			path = Resources;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -173,6 +184,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				F5A97F0625D3B42C00263532 /* Sound_Horizon.mp3 in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);
diff --git a/example/ios/AgoraExample.xcodeproj/xcshareddata/xcschemes/AgoraExample.xcscheme b/example/ios/AgoraExample.xcodeproj/xcshareddata/xcschemes/AgoraExample.xcscheme
index 64ade9fb..de8cf2a9 100644
--- a/example/ios/AgoraExample.xcodeproj/xcshareddata/xcschemes/AgoraExample.xcscheme
+++ b/example/ios/AgoraExample.xcodeproj/xcshareddata/xcschemes/AgoraExample.xcscheme
@@ -1,10 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
    version = "1.3">
-   <BuildAction>
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
       <BuildActionEntries>
          <BuildActionEntry
-            buildForRunning = "YES">
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
             <BuildableReference
                BuildableIdentifier = "primary"
                BuildableName = "React"
@@ -14,11 +20,26 @@
          </BuildActionEntry>
       </BuildActionEntries>
    </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+      </Testables>
+   </TestAction>
    <LaunchAction
-      useCustomWorkingDirectory = "NO"
       buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
-      <BuildableProductRunnable>
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
@@ -28,4 +49,18 @@
          </BuildableReference>
       </BuildableProductRunnable>
    </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
 </Scheme>
diff --git a/example/ios/Resources/Sound_Horizon.mp3 b/example/ios/Resources/Sound_Horizon.mp3
new file mode 100644
index 00000000..8f4cdb87
Binary files /dev/null and b/example/ios/Resources/Sound_Horizon.mp3 differ
diff --git a/example/package.json b/example/package.json
index 45c1f539..0b07b6ee 100644
--- a/example/package.json
+++ b/example/package.json
@@ -14,6 +14,7 @@
     "@react-navigation/stack": "^5.7.1",
     "react": "16.11.0",
     "react-native": "0.62.2",
+    "react-native-fs": "^2.16.6",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-reanimated": "^1.10.1",
     "react-native-safe-area-context": "^3.1.1",
diff --git a/example/src/examples/basic/JoinChannelAudio.tsx b/example/src/examples/basic/JoinChannelAudio.tsx
index 72068507..a7f25d35 100644
--- a/example/src/examples/basic/JoinChannelAudio.tsx
+++ b/example/src/examples/basic/JoinChannelAudio.tsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import {
-  View,
-  TextInput,
-  PermissionsAndroid,
-  StyleSheet,
   Button,
+  PermissionsAndroid,
   Platform,
+  StyleSheet,
+  TextInput,
+  View,
 } from 'react-native';
 
 import RtcEngine, {
@@ -14,6 +14,8 @@ import RtcEngine, {
   RtcEngineConfig,
 } from 'react-native-agora';
 
+import RNFS from 'react-native-fs';
+
 const config = require('../../../agora.config.json');
 
 interface State {
@@ -21,6 +23,7 @@ interface State {
   isJoined: boolean;
   openMicrophone: boolean;
   enableSpeakerphone: boolean;
+  playEffect: boolean;
 }
 
 export default class JoinChannelAudio extends Component<{}, State, any> {
@@ -33,6 +36,7 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
       isJoined: false,
       openMicrophone: true,
       enableSpeakerphone: true,
+      playEffect: false,
     };
   }
 
@@ -108,12 +112,46 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
       });
   };
 
+  _switchEffect = () => {
+    const { playEffect } = this.state;
+    if (playEffect) {
+      this._engine
+        ?.stopEffect(1)
+        .then(() => {
+          this.setState({ playEffect: false });
+        })
+        .catch((err) => {
+          console.warn('stopEffect', err);
+        });
+    } else {
+      this._engine
+        ?.playEffect(
+          1,
+          Platform.OS === 'ios'
+            ? `${RNFS.MainBundlePath}/Sound_Horizon.mp3`
+            : '/assets/Sound_Horizon.mp3',
+          -1,
+          1,
+          1,
+          100,
+          true
+        )
+        .then(() => {
+          this.setState({ playEffect: true });
+        })
+        .catch((err) => {
+          console.warn('playEffect', err);
+        });
+    }
+  };
+
   render() {
     const {
       channelId,
       isJoined,
       openMicrophone,
       enableSpeakerphone,
+      playEffect,
     } = this.state;
     return (
       <View style={styles.container}>
@@ -138,6 +176,10 @@ export default class JoinChannelAudio extends Component<{}, State, any> {
             onPress={this._switchSpeakerphone}
             title={enableSpeakerphone ? 'Speakerphone' : 'Earpiece'}
           />
+          <Button
+            onPress={this._switchEffect}
+            title={`${playEffect ? 'Stop' : 'Play'} effect`}
+          />
         </View>
       </View>
     );