SEON React Native Stream SDK

React Native bindings for the SEON Stream SDK — session monitoring for React Native apps on iOS and Android. You can start/stop session monitoring, tag screens and form fields, and react to stream lifecycle events, all from JavaScript/TypeScript.

Installation

npm install seon-react-native-stream-sdk
# or
yarn add seon-react-native-stream-sdk

iOS

Install pods after adding the dependency:

cd ios && pod install

By default the library pulls the released SeonStreamSDK CocoaPod. No further setup is required.

Android

No extra setup is required beyond installing the package — the native module is autolinked.

Usage

Starting and stopping a session

import { SeonStreamSdk } from 'seon-react-native-stream-sdk';

// Start a session
await SeonStreamSdk.startStream({
  authData: sessionToken,
  label: 'checkout-flow', // optional
  maxBackgroundDuration: 60, // optional, seconds
});

// Stop a session
await SeonStreamSdk.finishStream();

// Check whether a session is currently running
const isRunning = await SeonStreamSdk.getIsRunning();

Listening for stream events

import { useEffect } from 'react';
import { SeonStreamSdk } from 'seon-react-native-stream-sdk';

useEffect(() => {
  const subs = [
    SeonStreamSdk.onStreamStarted((streamId) => {
      console.log('Stream started:', streamId);
    }),
    SeonStreamSdk.onStreamFinished(() => {
      console.log('Stream finished');
    }),
    SeonStreamSdk.onStreamFinishedWithError((error) => {
      console.log('Stream finished with error:', error);
    }),
    SeonStreamSdk.onStreamAuthError(() => {
      console.log('Stream authentication error');
    }),
  ];

  return () => subs.forEach((sub) => sub.remove());
}, []);

Custom events

await SeonStreamSdk.createCustomEvent('button_tap', JSON.stringify({ button: 'submit' }));

Tagging individual views

Wrap any element with SeonViewTag to tag it for the SDK, or use tagElement directly with a ref:

import { SeonViewTag } from 'seon-react-native-stream-sdk';

<SeonViewTag title="Username">
  <TextInput value={username} onChangeText={setUsername} />
</SeonViewTag>

import { useRef } from 'react';
import { SeonStreamSdk } from 'seon-react-native-stream-sdk';

const inputRef = useRef(null);

useEffect(() => {
  SeonStreamSdk.tagElement(inputRef, 'Username');
}, []);

<TextInput ref={inputRef} value={username} onChangeText={setUsername} />

Tagging a form

Wrap a group of SeonViewTag-tagged fields with SeonForm to associate them with a named form. Mark non-essential fields with optional:

import { SeonForm, SeonViewTag } from 'seon-react-native-stream-sdk';

const LOGIN_FORM_TAG = { id: 'login-form', numberOfElements: 2 };

<SeonForm formTag={LOGIN_FORM_TAG}>
  <SeonViewTag title="Username" optional>
    <TextInput value={username} onChangeText={setUsername} />
  </SeonViewTag>
  <SeonViewTag title="Password">
    <TextInput value={password} onChangeText={setPassword} secureTextEntry />
  </SeonViewTag>
  <SeonViewTag title="Submit button">
    <Pressable onPress={handleLogin}>
      <Text>Login</Text>
    </Pressable>
  </SeonViewTag>
</SeonForm>

Navigation tracking

Register your navigation library once, near the root of your app, so screen changes are reported to the SDK automatically. Pick the helper matching the navigation library you use:

React Navigation

import { useNavigationContainerRef, NavigationContainer } from '@react-navigation/native';
import { SeonStreamSdk } from 'seon-react-native-stream-sdk';

const navigationRef = useNavigationContainerRef();

useEffect(() => {
  return SeonStreamSdk.registerReactNavigation(navigationRef);
}, [navigationRef]);

<NavigationContainer ref={navigationRef}>...</NavigationContainer>

React Native Navigation

useEffect(() => {
  return SeonStreamSdk.registerReactNativeNavigation();
}, []);

Expo Router

useEffect(() => {
  return SeonStreamSdk.registerExpoRouter();
}, []);

Each register* call returns an unsubscribe function — call it (or return it from a useEffect) to stop tracking navigation.

Release Notes

1.0.0

• Initial release of the SEON Stream SDK for React Native.