SDKs
Help centerCommunityDevelopersAcademyStatus

React Native integration

Suggest Edits

Add the React Native SDK and instrument your iOS and Android applications developed with the React Native framework for logging and analysis.

Before you begin

Set up the appropriate environment. For more information, see React Native environment-setup.

Install the React Native SDK

You can use NPM or Yarn. Run an appropriate command to add the Connect library to the package.json in your React Native project.

NPM command:

npm i react-native-acoustic-connect

Yarn command:

yarn add react-native-acoustic-connect

Known issues for Android support

  1. Screen capture in replay sometimes displays overlapping items, which is expected when Tealeaf captures UI state during animation. It's recommended to set the delay value from the app's Javascript code.
  2. The Logcat shows errors for invalid IDs such as 0x00000001. You can ignore the error as the react-Native app doesn't generate all resource IDs mapping.
  3. There may be Android compile issues. In such cases, use the example app as a reference for a common setup: NativeBase-KitchenSink/Example/android.

Configure Connect

In the root directory of your application, update the ConnectConfig.json file with AppKey, PostMessageUrl and KillSwitchUrl assigned to your organization. Update screen logging default settings as needed. For more information, see Configuration.

{
  "Connect": {
    "AppKey": "<YOUR_APP_KEY>", 
    "PostMessageUrl": "<YOUR_POST_MESSAGE_URL>", 
    "KillSwitchUrl": "<YOUR_KILLSWITCH_URL>", 
    "useRelease": false,
    "iOSVersion": "",
    "layoutConfig": {
      "AutoLayout": {
        "GlobalScreenSettings": {
          "ScreenChange": true,
          "DisplayName": "Example",
          "CaptureLayoutDelay": 500,
          "ScreenShot": true,
          "NumberOfWebViews": 0,
          "CaptureUserEvents": true,
          "CaptureScreenVisits": false,
          "CaptureLayoutOn": 2,
          "CaptureScreenshotOn": 2,
          "Masking": {
            "HasMasking": true,
            "HasCustomMask": true,
            "Sensitive": {
              "capitalCaseAlphabet": "X",
              "number": "9",
              "smallCaseAlphabet": "x",
              "symbol": "#"
            },
            "MaskIdList": [],
            "MaskValueList": []
          }
        }
      },
      "MainActivity": {
        "ScreenChange": true,
        "DisplayName": "LoginActivity",
        "CaptureLayoutOn": 2,
        "Masking": {
          "HasMasking": true,
          "HasCustomMask": true,
          "Sensitive": {
            "capitalCaseAlphabet": "X",
            "number": "9",
            "smallCaseAlphabet": "x",
            "symbol": "#"
          },
          "MaskIdList": [
            "password"
          ],
          "MaskValueList": [],
          "MaskAccessibilityIdList": [],
          "MaskAccessibilityLabelList": [
            "Masking",
            "Test Masking",
            "password"
          ]
        }
      },
      "Button": {
        "ScreenChange": true,
        "DisplayName": "Visible",
        "CaptureLayoutDelay": 500,
        "ScreenShot": true,
        "NumberOfWebViews": 0,
        "CaptureUserEvents": true,
        "CaptureScreenVisits": true,
        "CaptureLayoutOn": 2,
        "CaptureScreenshotOn": 2
      },
      "ErrorTest": {
        "ScreenChange": false,
        "DisplayName": "Hidden",
        "CaptureLayoutDelay": 1,
        "ScreenShot": false,
        "NumberOfWebViews": 0,
        "CaptureUserEvents": false,
        "CaptureScreenVisits": false,
        "CaptureLayoutOn": 0,
        "CaptureScreenshotOn": 0
      },
      "AppendMapIds": {
        "[w,9290],[v,0]": {
          "mid": "ASimpleUIView"
        },
        "tag2999999": {
          "mid": "giveAdditionalId1"
        },
        "idxPathValue": {
          "mid": "giveAdditionalId2"
        }
      }
    }
  }
}

📘

Note:

ConnectConfig.json currently only supports primitive values, i.e., strings & booleans.

See the sample app config file for reference

Final project preparation

To enable correct screen capturing, add the following code to the App.js file.

For apps using React Navigation 5

import { Connect } from 'react-native-acoustic-connect';
import { useRef } from 'react';

export default () => {
  const navigationRef = useRef();

  return (
    <Tealeaf>
      <NavigationContainer ref={navigationRef}>
        <StackNav/>
      </NavigationContainer>
    </Tealeaf>
  );
};

For apps without React Navigation

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Left, Right, Body, Text } from "native-base";
import styles from "./styles";

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

class Header1 extends Component {
 render() {
   Connect.setCurrentScreenName("HomePage");
   return (
     <Container style={styles.container}>
       <Header>
         <Left />
         <Body>
           <Title>Header</Title>
         </Body>
         <Right />
       </Header>

       <Content padder>
         <Button onPress={() => this.props.navigation.goBack()}>
           <Text>Back</Text>
         </Button>
       </Content>
     </Container>
   );
 }
}
export default Header1;

Capture session and replay

You have now set up your React Native application with the Connect React Native SDK. You can now capture sessions and view replays. For more information see, Replay a visitor session.

Updated 7 months ago