Installing the Freshpaint React Native SDK

Getting Started

The first step installing the Freshpaint React Native SDK is to install the @freshpaint/freshpaint-react-native node module. If you are not using Expo and are using the React Native CLI instead, you'll also need to install and link the @react-native-community/async-storage dependency:

Expo

npm install --save @freshpaint/freshpaint-react-native

React Native CLI

npm install --save @freshpaint/freshpaint-react-native
npm install --save @react-native-async-storage/async-storage
npx react-native link @react-native-async-storage/async-storage

Next, you'll need to setup the Freshpaint React Native babel plugin. This allows Freshpaint to instrument your app without any additional work on your part. To setup the plugin, add the following bit of code to either your .babelrc or babel.config.json:

{
  plugins: [
    'add-react-displayname', 
    './node_modules/@freshpaint/freshpaint-react-native/plugin.js',
  ],
  ...
}

Then to initialize the Freshpaint SDK, you call freshpaint.init at the top level with your environment ID. This is normally done in the App.js file. You can get your Freshpaint environment ID from the Freshpaint sources page.

import Freshpaint from '@freshpaint/freshpaint-react-native';

Freshpaint.init('<your environment id>');

At this point you'll need to clear any build caches for your app:

Expo

expo r -c

Then restart the expo app on your phone.

React Native CLI

npx react-native start --reset-cache

After that Freshpaint will automatically collect the following actions:

• Touches

• Text Input Edits

• Switch Toggles

Text Input Edits are only captured on iOS and Android. They are not captured on React Native Web.

How it Works

Generally, the React-Native integration works by sending the data to Freshpaint, which then captures that data and sends the data to your destination. The data is sent from Freshpaint to your destination server-side, even if your app destination is configured to be client-side. You can read more about server-side and client-side connection modes here.

Capturing Screen Views

If you are using React Native Navigation, Freshpaint can also autocapture screen views. To set this up, wrap the NavigationContainer provided by React Navigation with Freshpaint.withReactNavigationAutotrack:

import Freshpaint from '@freshpaint/freshpaint-react-native';
import { NavigationContainer } from '@react-navigation/native';

const FreshpaintNavigationContainer = Freshpaint.withReactNavigationAutotrack(NavigationContainer);

Then use FreshpaintNavigationContainer in place of NavigationContainer:

function App() {
  return (
    <FreshpaintNavigationContainer>
      ...
    </FreshpaintNavigationContainer>
  );
}

Verifying your Instrumentation

To verify your Freshpaint instrumentation, navigate to the Freshpaint Live View. As you navigate around your app and click on various buttons, you should see events show up in the Live View:

You can click one of the events to dig into the specific properties captured. For example, you can see the full React component hierarchy of the captured event: