Installing the Freshpaint React Native SDK
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
React Native CLI
npm install --save @freshpaint/freshpaint-react-native
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 r -c
Then restart the expo app on your phone.
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.
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.
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>
);
}
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:
Last modified 1mo ago