FullStory React Native Plugin

FullStory's React Native plugin exposes access to the FullStory Native Mobile SDK from within a React Native app. More information about the FullStory API can be found at https://developer.fullstory.com.

This plug-in is intended to be used in conjunction with FullStory for Mobile Apps. For more information, please see this getting started guide.

Install the React Native plugin

with npm

npm i @fullstory/react-native --save

with yarn

yarn add @fullstory/react-native

Configuring the babel plugin

@fullstory/babel-plugin-react-native is automatically included as a dependency to the FullStory React Native plugin. Please refer to the babel plugin's README.md for information on how to configure it.

@fullstory/babel-plugin-annotate-react is automatically included as a dependency to the FullStory React Native plugin. Please refer to the babel plugin's README.md for information on how to configure it for React Native.

Importing the React Native plugin

In order to use the FullStory Native Mobile SDK from within a React Native app, importing the React Native plugin is all that is required.

Importing Example

Here's an example of importing the SDK in a React Native app.

import FullStory from '@fullstory/react-native';

Using the SDK

Once FullStory is imported, you can make calls to the FullStory Native Mobile SDK.

Sending custom events

FullStory.event('Subscribed', {
  uid_str: '750948353',
  plan_name_str: 'Professional',
  plan_price_real: 299,
  plan_users_int: 10,
  days_in_trial_int: 42,
  feature_packs: ['MAPS', 'DEV', 'DATA'],
});

Getting a callback once a session is created

FullStory.onReady().then(function(result) {
    const replayStartUrl = result.replayStartUrl;
    const replayNowUrl = result.replayNowUrl;
    const sessionId = result.sessionId;
  });

Generating a session replay link

FullStory.getCurrentSessionURL().then(function(result) {
  const startOfPlayback = result;
});

Using the fsAttribute property

Instead of setting attributes via an FS API method, use the fsAttribute property that FullStory's babel plugin adds to every React Native View.

<Text fsAttribute={{custom_attr1: 'custom_value1', custom_attr2: 'custom_value2'}}>Text element with custom attributes</Text>

Using the fsClass property

Instead of adding and removing classes via an FS API method, use the fsClass property that FullStory's babel plugin adds to every React Native View.

The 6 built-in fsClass string values are:

• "fs-exclude"
• "fs-exclude-without-consent"
• "fs-mask"
• "fs-mask-without-consent"
• "fs-unmask"
• "fs-unmask-with-consent"

<Text fsClass="fs-unmask">Text element that is unmasked</Text>

Using the fsTagName property

Instead of setting the tag name via an FS API method, use the fsTagName property that FullStory's babel plugin adds to every React Native View.

<Text fsTagName="custom-tag-name">Text element with a custom tag name</Text>