SDKs
Help centerCommunityDevelopersAcademyStatus

Integrate the Connect library into a React Native app

Suggest Edits

The Connect SDK is a library that captures visitors' interactions with mobile applications. You can integrate the library into your React Native app and track the findings in the Acoustic Connect interface.

📘

Note

New to Connect? Install our preconfigured sample app and explore the implementation faster.

Requirements

  • Acoustic Connect. To use the Connect SDK, your company must have an active Connect subscription. Proper credentials are required for each app. For instructions, see Generate Connect credentials for integration.
  • Development environment. To integrate the library into your app, you need a standard React Native environment. Supported versions: 0.72.6 and later. Only older JSC bridge architecture is supported. Expo applications are not supported unless they are ejected as native applications.
  • Mobile app compatibility. The library can function on end users' devices running Android 5.0 (API level 21) - Android 14 (API level 34). Supported iOS versions - 13.0 and later.

Limitations

Only older JSC bridge architecture is supported. Expo applications are not supported unless they are ejected as native applications.

Initial setup

  1. In a terminal, navigate to the root project directory and add the Connect library to your project. The he package.json file will be updated. 
npm i react-native-acoustic-connect

yarn add react-native-acoustic-connect
  1. In the root project directory, find ConnectConfig.json.
  2. Update the AppKey and PostMessageUrl parameters in it.

Required configuration

If your project uses React Navigation 5, make the following changes to App.js (or another file that serves as the main component of your app). This is necessary for correct screen capturing.

  1. Add an import statement for Connect.
import { Connect } from 'react-native-acoustic-connect';
  1. Wrap the navigation container into <Connect>.
export default () => {
  const navigationRef = useRef();

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

Here is a sample file for your reference.

If your React Native project doesn't use React Navigation, make the following changes to App.js (or another file that serves as the main component of your app). This is necessary for correct screen capturing.

  1. Add an import statement for Connect.
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;
  1. Add Connect.setCurrentScreenName("HomePage");.

Here is an example:

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;

Related pages

Updated 3 days ago