App Directory

React Native SDK quick start

The Ada React Native SDK is a small framework that you can use to embed your Ada chatbot into your React Native application.

It also supports actions and settings that you can use to customize the behavior of your bot. For example, you might want to set the bot language, or customize the greeting. The React Native SDK reference covers these options and more.

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.

Upgrading to 3.2.0

In version 3.2.0 of @ada-support/react-native-sdk the prop greetings became greeting. Please verify whether you are using this prop before upgrading.

Breaking change in version 2.2.0

As of version 2.2.0 of @ada-support/react-native-sdk you must import a native module for iOS to enable the ability to download transcripts. Whether or not you have this feature enabled, the code depends on importing these native modules.

Please follow steps 2, 3, and 4 in the installation instructions to update your existing configuration after you have updated your @ada-support/react-native-sdk to version 2.2.0 or greater.

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'

  1. 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!()

  1. 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

Quick start for React Native

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.

import AdaEmbedView from '@ada-support/react-native-sdk';
// ...

class MyComponent extends React.Component {
  render() {
    return <AdaEmbedView handle="ada-example"/>;
  }
}

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.

<!-- Photo capture -->
<key>NSCameraUsageDescription</key>
<string>Take pictures for certain activities</string>

<!-- Gallery selection -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Select pictures for certain activities</string>

<!-- Video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access for recording videos</string>

React Native Android permissions

For Android, add permissions in AndroidManifest.xml.

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