Installing the Freshpaint React Native SDK

The first step is to 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
React Native CLI
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
React Native CLI
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.

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: