Build a sample app to evaluate the Tealeaf React Native SDK

Before you start integrating the Tealeaf SDK into your React Native app, we recommend installing our sample app with the SDK. The sample app has all the UI components of NativeBase.

Requirements

  • Acoustic Tealeaf. To view captured sessions and playback from the sample app, you need an active Tealeaf subscription.
  • 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.

Before you begin

During the setup, you will need to register the sample app with your Acoustic Tealeaf credentials. You can generate them yourself through the Tealeaf interface.

  1. Log in to Acoustic Tealeaf as an administrator.
  2. In the menu bar, click on your user profile and select Admin.
  1. On the Admin page, open the Applications tab.
  1. If a new app is required, click to add an app and fill out required settings.
  2. Click the SDK link for your app. Copy access credentials from any tab: application code and post message URL. Keep them handy for the setup.

Setup instructions

  1. Clone the sample app code from our GitHub repository.
git clone https://github.com/go-acoustic/ea_react_native_module_tealeaf.git
  1. In a terminal emulator, navigate to ea_react_native_module_tealeaf/Example/nativebase-v3-kitchensink.
  2. Run the yarn command to install the packages.
  3. Navigate to the ios project directory and install dependencies.
cd ios
pod update
  1. Open the primary configuration file: ea_react_native_module_tealeaf/Example/nativebase-v3-kitchensink/TealeafConfig.json. Update 2 keys in it using your Tealeaf credentials: AppKey and PostMessageUrl.

Run the app

Run the following in your terminal.

yarn start yarn ios
  1. Run an Android emulator.
  2. Run the following in your terminal.
yarn start yarn android

Test session replay

Now you can check how user behavior data is captured.

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

Notes:

  • To learn more about the Sessions module, see Session replay in our marketing guide.
  • User sessions in Tealeaf time out after 30 minutes of inactivity.