This guide will help you set up the Ada React Native SDK in your app. The process involves three main steps:

1. Complete prerequisites: Ensure all necessary configurations and installations are done.
2. Install the SDK: Add the SDK manually to your project.
3. Launch Ada: Choose one of the available options to display Ada, such as using the AdaEmbedView component.

Follow the instructions below to install the SDK and start integrating Ada into your app!

Before you begin

The Ada React Native SDK is based on react-native-webview. Before using the SDK, you must do the following:

• Complete the react-native-webview Getting Started Guide.
• Ensure that you’re using react-native-webview version 11.2.0 or greater. The React Native SDK uses allowUniversalAccessFromFileURLs from the later versions of this module.
• To support developing and testing locally, ensure that you temporarily add http://localhost:8081/ to your Approved Domains. Without doing this the bot will be blocked by the Content Security Policy.

Once you’ve configured react-native-webview, simply install the Ada React Native SDK via NPM.

Install React Native SDK

1. Use one of the following options to install Ada React Native SDK via NPM:
   1. With npm: npm install --save @ada-support/react-native-sdk
   2. With yarn: yarn add @ada-support/react-native-sdk
2. Update your iOS Podfile to include the following import:

require_relative '../node_modules/@ada-support/react-native-sdk/react_native_pods'

3. Update your iOS Podfile to include the following piece of code. This will import any required native modules in the React Native SDK.

use_ada!()

4. Run pod install in your app to install the required native modules.

# Example Podfile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/@ada-support/react-native-sdk/react_native_pods'
platform :ios, '11.0'
target 'example' do
  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )
  use_ada!()
  target 'exampleTests' do
    inherit! :complete
    # Pods for testing
  end
  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()
  post_install do |installer|
    react_native_post_install(installer)
  end
end

Launch

Once you have installed the Ada React Native SDK, you’re ready to use it in your app! Simply import the AdaEmbedView component, then render it. Note that you must pass a valid handle for the Chat window to work.

1
import AdaEmbedView from '@ada-support/react-native-sdk';
2
// ...
3
4
class MyComponent extends React.Component {
5
  render() {
6
    return <AdaEmbedView handle="ada-example"/>;
7
  }
8
}

File permissions

Some functionality in the Ada Chat bot will not work unless permissions are explicitly given.

React Native iOS permissions

For iOS, specify the permissions in your ios/[project]/Info.plist file.

1
<!-- Photo capture -->
2
<key>NSCameraUsageDescription</key>
3
<string>Take pictures for certain activities</string>
4
5
<!-- Gallery selection -->
6
<key>NSPhotoLibraryUsageDescription</key>
7
<string>Select pictures for certain activities</string>
8
9
<!-- Video recording -->
10
<key>NSMicrophoneUsageDescription</key>
11
<string>Need microphone access for recording videos</string>

React Native Android permissions

For Android, add permissions in AndroidManifest.xml.

1
<manifest ...>
2
  ...
3
  <!-- this is required only for Android 4.1-5.1 (api 16-22)  -->
4
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
5
  ...
6
</manifest>