Integrate the Connect SDK into a React Native app
The Connect SDK captures visitors' interactions with mobile applications. You can integrate it into your React Native app and track the findings in the Acoustic Connect interface.
Language: TypeScript and JavaScript
Availability: Pro, Premium, and Ultimate
Scope: This guide covers integrating the Connect SDK for development and testing. For Expo, see Integrate the Connect SDK into an Expo app. For production configuration, see Move to production.
Requirements
-
Acoustic Connect subscription. You must register your app in Connect and get credentials for it (app key and collector URL). For instructions, see Generate Connect credentials for integration.
-
Development environment. Node.js 20 or later. Supported React Native versions: 0.82.0–0.85.x. iOS builds require Xcode 26 or later.
-
Peer dependency.
react-native-nitro-modulesat exactly the version pinned in the SDK'speerDependencies(currently0.35.9). A version mismatch may cause the SDK to fail at startup — even a patch release can contain breaking changes to the native registration contract. To check your resolved version:npm ls react-native-nitro-modules -
Mobile app compatibility. iOS 15.1–26.2, Android 8–16 (API 26–36). Android
compileSdk35 or later is required.
Known issues
- Session replay accuracy (iOS). Session replay on iOS may show stale screen snapshots and does not track scroll position. Android is not affected.
- Content inside a
WebViewcomponent is not captured in session replay. - iPad is not supported on iOS 14 and later. Due to changes introduced in iPadOS, the SDK does not support iPad on iOS 14 and later.
- Dual SIM features are in beta. Behavior using multiple carriers may be unreliable.
Initial setup
- From your project root, install the Connect library and its required peer dependency.
npm install react-native-acoustic-connect [email protected]npm install [email protected] [email protected]Running the command above automatically creates ConnectConfig.json in your project root. On Android, it also adds the required permissions (INTERNET, ACCESS_NETWORK_STATE, ACCESS_WIFI_STATE, ACCESS_FINE_LOCATION) to AndroidManifest.xml and wires android/app/build.gradle to apply the SDK's config.gradle — no manual manifest edits needed.
- Open ConnectConfig.json and update the following values with your credentials.
AppKey— your Connect app key.PostMessageUrl— your collector URL.KillSwitchUrl— constructed from your collector URL and app key:https://{collector_host}/collector/switch/{app_key}.
All other values in the file are set to safe defaults and do not require changes for initial integration.
- Install CocoaPods dependencies for iOS.
cd ios && pod install --repo-updateUse --repo-update to ensure CocoaPods fetches the latest pod specs. Omitting it can cause pod resolution failures if your local spec repo is stale. See Troubleshooting > iOS for details.
- For Android, trigger a Gradle sync in Android Studio. To avoid PATH resolution errors, open Android Studio from a terminal:
open -a "Android Studio".
WarningThe values in ConnectConfig.json are baked into the native bundles at build time, not read at runtime. If you edit the file later, run
pod install --repo-updateagain on iOS and trigger a Gradle sync on Android before rebuilding.
- Add the
<Connect>wrapper to your app's root component (typically App.tsx). This is required for screen tracking, touch capture, and keyboard event interception.
<Connect> wraps your existing JSX — it does not replace your root component structure.
Add useNavigationContainerRef to your existing @react-navigation/native import. If NavigationContainer is not already imported in this file, add it too. Then add the Connect import and update your component as shown below.
import { NavigationContainer } from '@react-navigation/native'
export default function App() {
return (
<NavigationContainer>
{/* your screens */}
</NavigationContainer>
)
}import { useNavigationContainerRef, NavigationContainer } from '@react-navigation/native'
import { Connect } from 'react-native-acoustic-connect'
export default function App() {
const navigationRef = useNavigationContainerRef()
return (
<Connect
navigationRef={navigationRef}
captureKeyboardEvents={true}
>
<NavigationContainer ref={navigationRef}>
{/* your screens */}
</NavigationContainer>
</Connect>
)
}Pass navigationRef from useNavigationContainerRef() as an explicit prop to both <Connect> and <NavigationContainer>.
Use this approach if your app uses a different navigation library or no navigation library at all. Import the SDK's default export and call setCurrentScreenName from each screen component.
import AcousticConnectRN from 'react-native-acoustic-connect'
function HomeScreen() {
AcousticConnectRN.setCurrentScreenName('HomeScreen')
// ...
}- Validate your configuration (recommended).
npx acoustic-connect doctordoctor checks the things that otherwise fail late and confusingly at build time — Node version and ConnectConfig.json values (AppKey, PostMessageUrl, KillSwitchUrl). It's safe to re-run any time you change ConnectConfig.json.
Verify the SDK is running
Build and run your app. The SDK auto-initializes at module load using the values from ConnectConfig.json. With "useRelease": false in your config (the default), the debug-capable SDK build is available, and verbose native logging from the SDK's native modules — Connect, Tealeaf, and EOCore — can be written to the Xcode console and Logcat. Confirm that the SDK is initializing, capturing screen views, and posting to the collector.
Enable debug logging
Add these environment variables with a value of 1 to your scheme so the Xcode console shows verbose native logging: CONNECT_DEBUG, TLF_DEBUG, and EODebug. Without this step, no verbose native logging appears even with useRelease: false set.

Verbose logging is on by default — no equivalent setup step needed. Filter Logcat by the tags Tealeaf, EOCore, and Connect to isolate SDK output. To reduce or disable it, set DisplayLogging and LoggingLevel under the Connect object in ConnectConfig.json, then trigger a Gradle sync.
If you have a Connect Ultimate subscription, you can also verify the integration visually: open Behavior studio > Sessions > Session replay and confirm that your session appears and renders correctly.
Troubleshooting
npm install peer-dependency conflict on react-native-nitro-modules
npm install peer-dependency conflict on react-native-nitro-modulesThe SDK pins react-native-nitro-modules to an exact version. If npm install reports a peer conflict, your project is resolving a different version. Check the resolved version with npm ls react-native-nitro-modules and align it to the version declared in the SDK's peerDependencies. See Requirements above.
Using --legacy-peer-deps or --force silences the error but does not resolve the underlying mismatch; a version conflict can cause the SDK to fail at startup.
ConnectConfig.json not created after npm install
npm installThe file is created by a postinstall script that only runs when npm actually installs packages. If the SDK was already listed in package.json before you ran npm install, npm may skip the script with an "up to date" message. To create the file manually, run:
node node_modules/react-native-acoustic-connect/scripts/postinstall.mjspod install fails with [Connect] requires AcousticConnect >= 2.0.5
pod install fails with [Connect] requires AcousticConnect >= 2.0.5You have an older iOS pod version pinned in ConnectConfig.json. Set "iOSVersion" to an empty string to use the latest available version, then re-run pod install --repo-update.
pod install fails with CocoaPods could not find compatible versions
pod install fails with CocoaPods could not find compatible versionsYour local CocoaPods spec repo is stale. Always run pod install --repo-update rather than pod install to ensure the latest pod specs are fetched.
Connect: navigation tracking disabled — no usable NavigationContainer ref resolved
Connect: navigation tracking disabled — no usable NavigationContainer ref resolvedThis warning may appear at startup when NavigationContainer is nested inside other providers rather than being a direct child of <Connect>. Screen tracking works correctly despite the warning — it does not indicate a loss of functionality.
pod install fails with [Xcodeproj] Unable to find compatibility version string for object version 'N'
pod install fails with [Xcodeproj] Unable to find compatibility version string for object version 'N'The xcodeproj gem does not yet support the project format version used by your installed Xcode. This can occur any time Xcode ships a new format version before the xcodeproj gem has been updated to match — including between minor Xcode updates.
First, check whether a compatible version of the gem is now available:
gem update xcodeproj
pod install --repo-updateIf the gem has not been updated yet, build xcodeproj from source as a temporary workaround:
git clone https://github.com/CocoaPods/Xcodeproj.git /tmp/xcodeproj
cd /tmp/xcodeproj
gem build xcodeproj.gemspec
gem install xcodeproj-*.gem --localThen re-run pod install --repo-update. Once CocoaPods publishes a compatible gem release, revert to the released version with gem update xcodeproj.
Gradle fails to resolve io.github.go-acoustic:connect
io.github.go-acoustic:connectThe SDK requires an Android Connect artifact in the range [11.0.11, 12.0.0). If Gradle rejects your pinned version, set "AndroidVersion" in ConnectConfig.json to an empty string and re-sync.
Gradle cannot find node or npx
node or npxThis occurs when Gradle is launched outside a shell where your Node installation is active — most commonly when Android Studio is opened from the Dock rather than from a terminal.
Recommended fix: Open Android Studio from a terminal so it inherits your shell's PATH:
open -a "Android Studio"Then re-trigger the Gradle sync. If you need to run ./gradlew clean from the terminal directly, prefix the command with the PATH fix:
PATH="/usr/local/bin:$PATH" ./gradlew cleanAlternative: Create symlinks so Gradle can resolve both binaries from a stable system path regardless of how Android Studio is launched. Use the path that matches your machine:
sudo ln -sf "$(which node)" /opt/homebrew/bin/node
sudo ln -sf "$(which npx)" /opt/homebrew/bin/npxsudo ln -sf "$(which node)" /usr/local/bin/node
sudo ln -sf "$(which npx)" /usr/local/bin/npxVerify that the symlink targets exist before running these commands — if which npx resolves to a broken symlink, the commands above will not fix the issue.
Manifest merger failed: minSdkVersion too low
minSdkVersion too lowThe React Native template sets minSdkVersion 24 by default, which is below the Connect SDK's minimum of API 26. The build fails with:
Manifest merger failed : uses-sdk:minSdkVersion 24 cannot be smaller than version 26
declared in library [io.github.go-acoustic:connect:...]In android/build.gradle, set minSdkVersion to at least 26:
minSdkVersion = 26SDK initializes but no session appears in Connect
The kill switch may be returning "die". Check the native log for KillSwitch Responded with 0 and killswitch : says die. The most likely cause is that PostMessageUrl points to a different collector node than the one where your app is registered. Verify the collector URL in your Connect account and update PostMessageUrl in ConnectConfig.json to match, then run pod install --repo-update on iOS (and Gradle sync on Android) and rebuild.
Next steps
- Identify users at registration — send the account registered signal to associate sessions with contacts in Connect.
- Identify users at sign-in — send the logged in signal to attribute sessions to known contacts.
- Enable push notifications in a React Native app (iOS) — set up APNs with the Connect SDK.
- Move to production — disable verbose logging and prepare your app for release.
Updated 25 days ago
