Developers
Help CenterCommunityStatus

Add the React Native SDK to your project

Suggest Edits

Overview

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

Run the npm install code or the yarn code to add the SDK to your app. 

npm install --save react-native-acoustic-ea-tealeaf

yarn add react-native-acoustic-ea-tealeaf -E

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 Tealeaf

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

{
    "Tealeaf": {
        "AppKey": "<YOUR_APP_KEY>", 
        "PostMessageUrl": "<YOUR_POST_MESSAGE_URL>", 
        "KillSwitchUrl": "<YOUR_KILLSWITCH_URL>", 
        "useRelease": false, 
        "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"
                    ]
                }
            }, 
            "AppendMapIds": {
                "[w,9290],[v,0]": {
                    "mid": "ASimpleUIView"
                }, 
                "tag2999999": {
                    "mid": "giveAdditionalId1"
                }, 
                "idxPathValue": {
                    "mid": "giveAdditionalId2"
                }
            }
        }
    }
}

📘

Note:

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

See the sample app config file for reference

Integrate React Native to capture screen tracking

To correctly capture screen tracking add the following code to the App.js file.

React navigation version 5

import { Tealeaf } from 'react-native-acoustic-ea-tealeaf';
import { useRef } from 'react';

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

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

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 Tealeaf = NativeModules.RNCxa;

class Header1 extends Component {
 render() {
   Tealeaf.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 Tealeaf React Native SDK. You can now capture sessions and view replays. For more information see, Replay a visitor session.

Updated about 1 month ago