Bump brace-expansion from 1.1.11 to 1.1.12 in /v4-deeplink-plan-example

README.md

@@ -3,11 +3,11 @@
 ## Introduction
 This document introduces best practices for integrating the **Airbridge react native SDK** using a eaxmple app. It also provides examples of how to implement and test various methods.
 
-**v4-example**
-- introduces best practices for integrating the  **Airbridge react native SDK v4**
+**v4-mmp-plan-example**
+- This guide introduces best practices for integrating **Airbridge React Native SDK v4** in the Airbridge **MMP Plan** environment.
 
-**v2-example**
-- **Airbridge react native SDK v2** examples will be coming later.
+**v4-deeplink-plan-example**
+- This guide introduces best practices for integrating **Airbridge React Native SDK v4** in the Airbridge **Deeplink Plan** environment.
 
 ## Link
 [Developer Guide](https://help.airbridge.io/en/developers/react-native-sdk-v4)

v4-deeplink-plan-example/App.tsx

@@ -0,0 +1,79 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  StatusBar,
+  SafeAreaView,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import {
+  Colors,
+} from 'react-native/Libraries/NewAppScreen';
+
+import MessageDialog from './source/MessageDialog'
+
+import {
+  Airbridge
+} from 'airbridge-react-native-sdk';
+
+function App(): React.JSX.Element {
+
+  useEffect(() => { 
+    prepare() 
+  }, []);
+
+  const prepare = async () => {
+    Airbridge.setOnDeeplinkReceived((result) => {
+      console.log(`[DeepLink] ${result}`)
+
+      setDeeplink(result)
+      var ref = deeplinkRef.current
+      if (!!ref && typeof ref === 'object' && typeof (ref as MessageDialog).show === 'function') {
+        (ref as MessageDialog).show()
+      }
+    })
+  };
+
+  const deeplinkRef = useRef(null);
+  const [deeplink, setDeeplink] = useState('');
+
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <View style={{margin: 16}}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <View>
+        <SafeAreaView />
+
+        <Text
+          style={{
+              color: isDarkMode ? Colors.lighter : Colors.darker, 
+              fontSize: 20,
+              fontWeight: 900
+            }}>Airbridge Deeplink plan example</Text>
+
+        <MessageDialog
+          ref={deeplinkRef}
+          title={'Deeplink'}
+          message={deeplink} />
+      </View>
+    </View>
+  );
+}
+
+export default App;

v4-deeplink-plan-example/README.md

@@ -0,0 +1,32 @@
+# Airbridge React Native v4 Example
+
+## How to run
+### Step 1: Clone This Repository
+
+1.  Open your terminal and navigate to the directory where you want to clone the eaxmple app.
+2.  Execute the following command to clone the repository:
+    ```bash
+    git clone https://github.com/ab180/airbridge-react-native-example
+    ```
+
+### Step 2: Install Airbridge SDK
+1. Install airbridge-react-native-sdk using npm.
+    ```bash
+    npm install airbridge-react-native-sdk
+    ```
+2. Install iOS dependencies using CocoaPods. Android dependencies are installed automatically.
+    ```bash
+    cd ios; pod install
+    ```
+
+## Test guide
+
+### Deeplink settings
+To set up a deep link, refer to the [Set up deep linking](https://help.airbridge.io/en/developers/react-native-sdk-v4#set-up-deep-linking) link
+
+### Deeplink test
+You can test deep links using the following two methods:
+1. Click on a custom scheme deep link starting with exabr://
+2. Click on the Airbridge tracking link: https://abr.ge/4mw2j8
+
+Confirm that the app launches and displays the deep link information.

v4-deeplink-plan-example/android/app/src/main/assets/libraryInfo.json

@@ -0,0 +1,4 @@
+{
+    "name": "airbridge-react-native-sdk",
+    "version": "4.6.0"
+}