{"id":22093217,"url":"https://github.com/iadvize/iadvize-reactnative-sdk-integration-process","last_synced_at":"2025-03-24T00:27:03.160Z","repository":{"id":150819235,"uuid":"623069974","full_name":"iadvize/iadvize-reactnative-sdk-integration-process","owner":"iadvize","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-17T13:31:41.000Z","size":746,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-29T07:14:48.636Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iadvize.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-03T16:24:41.000Z","updated_at":"2023-04-03T16:25:22.000Z","dependencies_parsed_at":"2024-12-01T03:13:21.339Z","dependency_job_id":"38c7c700-8644-4f4f-a060-3b427e4d4e7f","html_url":"https://github.com/iadvize/iadvize-reactnative-sdk-integration-process","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fiadvize-reactnative-sdk-integration-process","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fiadvize-reactnative-sdk-integration-process/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fiadvize-reactnative-sdk-integration-process/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iadvize%2Fiadvize-reactnative-sdk-integration-process/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iadvize","download_url":"https://codeload.github.com/iadvize/iadvize-reactnative-sdk-integration-process/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245188884,"owners_count":20574862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-01T03:13:18.735Z","updated_at":"2025-03-24T00:27:03.076Z","avatar_url":"https://github.com/iadvize.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iAdvize SDK ReactNative Plugin integration\n\nThis repository goal is to demonstrate the integration process of the iAdvize React Native SDK.\nEach commit corresponds to an integration step and is described below.\n\n## Prerequisites\n\n```\nbrew install node\nbrew install watchman\nbrew install ruby\nbrew install rbenv\nrbenv install 2.7.6\n```\n\n- Xcode (14.2) + Simulator + CocoaPods (\u003e 1.9)\n- Android Studio (Electric Eel | 2022.1.1 Patch 1) + Android SDK (33) + Emulator\n\n## Steps\n\n### Step 1 - Create ReactNative project\n\nTo install the ReactNative boilerplate code, run the following command:\n\n```\nnpx react-native@latest init IntegrationDemoApp\n```\n\nThis will create a `IntegrationDemoApp` folder containing the ReactNative project.\nThe React \u0026 ReactNative versions used in this case are:\n\n```\n\"dependencies\": {\n  \"react\": \"18.2.0\",\n  \"react-native\": \"0.71.5\"\n}\n```\n\nFor the rest of this guide, the root folder for all commands will be the `IntegrationDemoApp` repository so navigate to this folder:\n\n```\ncd IntegrationDemoApp\n```\n\nTo launch the app on a device:\n\n```\n# Start the Metro server\nnpx react-native start\n\n# Then run the app on iOS...\nnpx react-native run-ios\n\n# ... or Android\nnpx react-native run-android\n```\n\n### Step 2 - Add the SDK ReactNative plugin\n\nTo integrate the iAdvize SDK ReactNative Plugin inside the demo project, run the following command:\n\n```\nnpm install @iadvize-oss/iadvize-react-native-sdk\n```\n\nThis will add the dependency inside the `package.json` file\n\n```\n$ package.json\n\n\"dependencies\": {\n  \"@iadvize-oss/iadvize-react-native-sdk\": \"^3.1.1\",\n  \"react\": \"18.2.0\",\n  \"react-native\": \"0.71.5\"\n},\n```\n\n### Step 3 - Configure iOS project\n\nThere are multiple ways to configure a ReactNative project, for simplicity this guide will simply hardcode the configuration, please note that you can use a configuration plugin using environment variables (like `react-native-config` or `react-native-dotenv`).\n\n#### Step 3.1 - Add use_frameworks! directive\n\nThe iAdvize iOS SDK is delivered as a binary framework (in an XCFramework bundle), which is a standard way of distributing closed-source binaries. ReactNative is using the CocoaPods package manager and in order for it to work with binary frameworks, the directive `use_frameworks!` must be added in the `Podfile`:\n\n```\n$ ios/Podfile\n\n# Comment those lines\nlinkage = ENV['USE_FRAMEWORKS']\nif linkage != nil\n  Pod::UI.puts \"Configuring Pod with #{linkage}ally linked Frameworks\".green\n  use_frameworks! :linkage =\u003e linkage.to_sym\nend\n\n# And add this one\nuse_frameworks!\n```\n\nIf you are using an environment variable plugin you should be able to set the same behavior by adding the following line in your `.env` file:\n\n```\n$ .env\n\nUSE_FRAMEWORKS='dynamic'\n```\n\n#### Step 3.2 - Disable Hermes \u0026 Flipper\n\nHermes and Flipper are not compatible (or at least unstable) when using `use_frameworks!` on iOS. Thus they need to be disabled:\n\n```\n$ ios/Podfile\n\ntarget 'IntegrationDemoApp' do\n  config = use_native_modules!\n\n  # Flags change depending on the env values.\n  flags = get_default_flags()\n\n  use_react_native!(\n    :hermes_enabled =\u003e false,\n    :flipper_configuration =\u003e FlipperConfiguration.disabled,\n\n    ...\n  )\n  ...\nend\n```\n\nIf you are using an environment variable plugin you should be able to set the same behavior by adding the following line in your `.env` file:\n\n```\n$ .env\n\nRCT_NEW_ARCH_ENABLED=0\nUSE_HERMES=0\nNO_FLIPPER=1\n```\n\n#### Step 3.3 - Enable Swift Library Evolution support\n\nAdd this step inside the `post_install` hook at the end of the `Podfile` to enable Swift Library Evolution:\n\n```\n$ ios/Podfile\n\npost_install do |installer|\n  react_native_post_install(\n    installer,\n    # Set `mac_catalyst_enabled` to `true` in order to apply patches\n    # necessary for Mac Catalyst builds\n    :mac_catalyst_enabled =\u003e false\n  )\n  __apply_Xcode_12_5_M1_post_install_workaround(installer)\n\n  # Add those lines\n  installer.pods_project.targets.each do |target|\n    target.build_configurations.each do |config|\n      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'\n    end\n  end\nend\n```\n\nLibrary evolution support allows developers of binary frameworks to make additive changes to the API of their framework while remaining binary compatible with previous versions.\n\n#### Step 3.4 - Download native iOS SDK pod\n\nOnce this is done, is it possible to download the iOS dependency pod:\n\n```\ncd ios\npod install\ncd ..\n```\n\n#### Step 3.5 - Add microphone and camera permissions\n\nSince the version 2.5.0, the iAdvize iOS SDK supports video conversations. Thus it will request camera and microphone access before entering a video call. To prevent the app from crashing at this stage, you have to setup two keys in your app `Info.plist`:\n\n```\n$ ios/IntegrationDemoApp/Info.plist\n\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003c!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\"\u003e\n\u003cplist version=\"1.0\"\u003e\n  \u003cdict\u003e\n    ...\n    \u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis application will use the camera to share photos and during video calls.\u003c/string\u003e\n    \u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis application will use the microphone during video calls.\u003c/string\u003e\n  \u003c/dict\u003e\n\u003c/plist\u003e\n```\n\n### Step 4 - Configure Android project\n\n#### Step 4.1 - Add Android SDK dependency repository\n\nThe iAdvize Android SDK is hosted on GitHub, this repository should be declared in the Android app in order for it to find the SDK artifacts:\n\n```\n$ android/build.gradle\n\n// Add those lines after the `buildscript` block\nallprojects {\n  repositories {\n    maven { url \"https://raw.github.com/iadvize/iadvize-android-sdk/master\" }\n    maven { url \"https://jitpack.io\" }\n  }\n}\n```\n\n#### Step 4.2 - Setup Kotlin\n\nThe latest iAdvize Android SDK used Kotlin `1.8.10`. To avoid conflict between the Kotlin versions used in the ReactNative dependencies, this version needs to be set in the Android configuration.\n\nFirst in the project-level `android/build.gradle` file, add the Kotlin version in the `buildscript \u003e ext` block:\n\n```\n$ android/build.gradle\n\nbuildscript {\n  ext {\n    buildToolsVersion = \"33.0.0\"\n    minSdkVersion = 21\n    compileSdkVersion = 33\n    targetSdkVersion = 33\n\n    // Add this line\n    kotlinVersion = '1.8.10'\n  }\n  ...\n}\n```\n\nAdd the Kotlin gradle plugin in the `buildscript \u003e dependencies` block:\n\n```\n$ android/build.gradle\n\nbuildscript {\n  ...\n  dependencies {\n    classpath(\"com.android.tools.build:gradle:7.3.1\")\n    classpath(\"com.facebook.react:react-native-gradle-plugin\")\n    // Add this line\n    classpath(\"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion\")\n  }\n}\n```\n\nThen in the module-level `android/app/build.gradle` activate the Kotlin plugin at the top of the file:\n\n```\n$ android/app/build.gradle\n\napply plugin: \"com.android.application\"\napply plugin: \"com.facebook.react\"\n// Add this line\napply plugin: \"kotlin-android\"\n```\n\nAdd the Kotlin dependency in the `dependencies` block:\n\n```\n$ android/app/build.gradle\n\ndependencies {\n  // Add this line\n  implementation(\"org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion\")\n\n  ...\n}\n```\n\n#### Step 4.3 - Initiate the SDK\n\nOn Android, the iAdvize SDK needs to be initiated during the app startup to allow several functionnalities to work. \nThus you need to add those lines in `android/app/src/main/java/com/integrationdemoapp/MainApplication.java` to initialize the SDK properly:\n\n```\n$ android/app/src/main/java/com/integrationdemoapp/MainApplication.java\n\n// Add this line\nimport com.iadvize.conversation.sdk.IAdvizeSDK;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n  ...\n\n  @Override\n  public void onCreate() {\n    super.onCreate();\n    SoLoader.init(this, /* native exopackage */ false);\n    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {\n      // If you opted-in for the New Architecture, we load the native entry point for this app.\n      DefaultNewArchitectureEntryPoint.load();\n    }\n    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());\n\n    // Add this line\n    IAdvizeSDK.initiate(this);\n  }\n}\n```\n\n### Step 5 - Activate the SDK\n\nAdd the IAdvize SDK import statement:\n\n```\n$ App.tsx\n\nimport IAdvizeSDK, {\n  LogLevel\n} from '@iadvize-oss/iadvize-react-native-sdk';\n```\n\nThen you can activate using the relevant API:\n\n```\n$ App.tsx\n\nIAdvizeSDK.activate(projectId, userId, gdprUrl);\n```\n\n### Step 6 - Trigger engagement\n\nAdd the ConversationChannel import statement:\n\n```\n$ App.tsx\n\nimport IAdvizeSDK, { LogLevel, ConversationChannel } from '@iadvize-oss/iadvize-react-native-sdk';\n```\n\nThen you can engage the visitor using the relevant API:\n\n```\n$ App.tsx\n\nIAdvizeSDK.setLanguage(\"targetingLanguage\");\nIAdvizeSDK.activateTargetingRule(\"targetingRuleId\", ConversationChannel.CHAT);\n```\n\nThis will display the Default Floating Button that leads to the Chatbox.\n\n### Step X - Developer Platform\n\nTo go further in your integration you will need to read the SDK documentation available in our [Developer Platform](https://developers.iadvize.com/documentation/mobile-sdk#reactnative-integration-guide).\n\nThis covers a wide range of the use cases you may have (chatbox configuration, custom button, notifications, transactions, custom data registration...)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiadvize%2Fiadvize-reactnative-sdk-integration-process","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiadvize%2Fiadvize-reactnative-sdk-integration-process","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiadvize%2Fiadvize-reactnative-sdk-integration-process/lists"}