Before you start integrating the Connect library into your React Native app, we recommend installing our sample app with the library.

Requirements

• Development environment. To build and run the sample app, you need a properly configured React Native environment with Node.js 16-18, Yarn Classic line (1.x) and CocoaPods.
• Mobile app compatibility. You can run the sample app on simulators and real devices. Supported operating systems: iOS 13 and later, Android 13.0 (API level 33) and later.
• Acoustic Connect. If you have an Ultimate license for Connect and want to check how session replay works, you'll need an access key. For instructions, see Get an application key for the Connect library.

Setup instructions

1. Clone the sample app code from our GitHub repository.

git clone https://github.com/go-acoustic/react-native-acoustic-connect.git

2. In a terminal, navigate to the root project directory.

cd react-native-acoustic-connect/Example/nativebase-v3-kitchensink

3. If you have Yarn Modern line (2.x-4.x) on your machine, run the following command to install Yarn Classic line (1.x) to the project.

yarn set version classic

4. Run the yarn command to install the Connect packages.
5. Navigate to theios project directory and install dependencies.

cd ios
pod update

6. (Connect Ultimate only) Under react-native-acoustic-connect/Example/nativebase-v3-kitchensink/, open the primary configuration file (ConnectConfig.json). Update the AppKey and PostMessageUrl values with the application key and endpoint URL assigned to your Acoustic Connect organization. This is necessary for access to session replay in Connect (see the exercise below).

Running the app

• Android
• iOS

1. Run an Android emulator.
2. In your terminal, navigate to the root project directory react-native-acoustic-connect/Example/nativebase-v3-kitchensink and run the following script from there.

Shell

yarn android

Option A: using the command line

1. (optional) Run an iOS simulator.

📘

Note

If you skip this step, the app will run on the first available simulator.

2. In your terminal, navigate to the root project directory react-native-acoustic-connect/Example/nativebase-v3-kitchensink and run the following script from there.

Shell

yarn ios

Option B: using Xcode

1. Navigate to react-native-acoustic-connect-beta-develop/Example/nativebase-v3-kitchensink/ios/ and open the KitchenSinkappnativebase.xcworkspace file.

2. Run the app on a simulator or a real device.

Exercise (Ultimate only)

If you have an Ultimate license for Connect, you can check how user behavior data is captured.

1. Click around in the sample app.
2. In your Connect account, go to Optimise > Session search.
3. Find the session and play it back.

Notes:

• If a user is inactive for 30 minutes, their session times out.
• To learn more about the Sessions module, see Session replay in our marketing guide.