Getting Started with FullStory React Native Recording

Overview

The FullStory React Native Plugin works in conjunction with and does not replace the FullStory Native Mobile Plugin.

As you're implementing the instructions below, you may find it useful to reference a sample app with FullStory integrated. We have an example of the SDK being implemented into a React Native app here.

Configure FullStory for Mobile Apps

First, make sure your Android and iOS projects are properly configured with FullStory for Mobile Apps.

Adding the FullStory React Native Plugin

Modify your application’s package.json file and add the FullStory React Native Plugin as a dependency:

"dependencies": {
   ...
    "@fullstory/react-native": "1.0.1"
  },

Once this is done, execute yarn install or npm install to bring in the new dependencies.

• iOS
  • Legacy Projects: If your React Native project does not auto-link dependencies, add the following to ios/Podfile:

pod 'fullstory_react-native', :path => '../node_modules/@fullstory/react-native'

All Projects: In the ios sub-directory, execute pod update or pod install

Configuring the React Native Plugin

The FullStory React Native Plugin includes 2 babel dependencies that must be configured.

Modify your application’s babel.config.js file and add the plugins:

module.exports = {
  ...
  plugins: [
    ...
    '@fullstory/react-native', ['@fullstory/annotate-react', { native: true }],
  ]
};

Automatic props provided to React Native components

The included babel plugins, when properly configured, will provide read-only and writable props.

• Read-only props to help with element identity:
  data-component
data-element
data-source-file
  
  
• Writable props:
  fsAttribute
fsClass
fsTagName

Limitations: The automatic props are not respected on custom components or layout-only components at this time.

Note: In order to use our automatic properties with Typescript, you can create a tsx file with the following contents:

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      fsAttribute?: string;
      fsClass?: string;
      fsTagName?: string;
    }
  }
}

export {};

Using fsAttribute for Privacy Rules

• You can utilize the new fsAttribute prop to help create selector-based rules in the FullStory app settings.

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

• The corresponding selector in the FullStory app settings:

Using fsTagName for Privacy Rules

• You can utilize the new fsTagName prop to help create selector-based rules in the FullStory app settings. 

  <text fsTagName="my_tag_name">Text element with custom tagName</Text>

  The corresponding selector in the FullStory app settings:

Using fsClass for Privacy Rules

You can use the new fsClass prop on React Native elements to declare privacy rules.

• Standard privacy rules

<Text fsClass="fs-exclude">Text element that is excluded</Text>
<Text fsClass="fs-mask">Text element that is masked</Text>
<Text fsClass="fs-unmask">Text element that is unmasked</Text>

• Consent privacy rules

<Text fsClass="fs-exclude-without-consent">Text element that is excluded unless the user consents</Text>
<Text fsClass="fs-mask-without-consent">Text element that is masked unless the user consents</Text>
<Text fsClass="fs-unmask-with-consent">Text element that is unmasked only if the user consents</Text>

Using testID for Privacy Rules

You can also utilize React Native’s built-in testID prop to help create selector-based rules in the FullStory app settings.

<Text testID="test_id_for_unmasking">Text element that is unmasked via privacy rules settings</Text>

• The corresponding selector in the FullStory app settings:

FullStory API

Supported API methods

• Support for the FullStory JS API has been added with the following methods:
  anonymize
consent
event
getCurrentSession
getCurrentSessionURL
identify
onReady
restart
shutdown
setUserVars

Using the FS API

• Import the FullStory API via:
  

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

In your React Native app, once you import the FullStory plugin, you can call any of the supported API methods.

• Using FullStory.anonymize 
  Anonymize can be invoked via:

FullStory.anonymize();

• Using FullStory.consent 
  Consent can be granted via:

FullStory.consent(true);

• Using FullStory.event 
  A custom event can be invoked via:

FullStory.event('Checkout invoked', {
  page_str: 'Checkout Page',
  cart_amount_real: 299,
});

Note: array values are not currently supported. 

• Using FullStory.getCurrentSession 
  We can retrieve the current session ID:
  

  FullStory.getCurrentSession().then(function(result) {
    const sessionId = result;
  });

  Note: this will be null if called before a session is active.
  
  

• Using FullStory.getCurrentSessionURL 
  We can retrieve the current session URL:
  

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

  Note: this will be null if called before a session is active.
  
  

• Using FullStory.identify 
  User identify is set via:
  

  FullStory.identify('462718483', {
   displayName: 'Daniel Falko',
   Email: 'daniel.falko@example.com',
  });

  Note: array values are not currently supported.
  
  

• Using FullStory.onReady
  We can subscribe to a callback to be invoked when we have a session:
  

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

   

• Using FullStory.restart
  We can invoke a request for a new session:

FullStory.restart();

• UsingFullStory.setUserVars
  User vars can be set via:

FullStory.event('Subscribed', {
  uid_str: '750948353',
  plan_name_str: 'Professional',
  plan_price_real: 299,
  plan_users_int: 10,
  days_in_trial_int: 42,
});

Note: array values are not currently supported.

• Using FullStory.shutdown
  We can shutdown the current session:

  FullStory.shutdown();