React Native Integration – UXCam

Follow the instructions below for integration

Native Integration
Manual Integration (iOS)
Manual Integration (Android)

To add UXCam to your project

yarn add react-native-ux-cam

//If you use npm instead of yarn
npm i react-native-ux-cam

For React Native versions less than 0.60

react-native link react-native-ux-cam

Call this method on App.js when your app starts. Your App-key is available on the UXCam dashboard

//Add this on top of App.js
import RNUxcam from 'react-native-ux-cam';
RNUxcam.optIntoSchematicRecordings(); // Add this line to enable iOS screen recordings
RNUxcam.startWithKey('YOUR APP KEY'); // Add this line after RNUxcam.optIntoSchematicRecordings();

That completes the integration process.
Your session will be shown on the dashboard within a few seconds after the app goes in the background. You can optionally use the API'es for customizations such as identifying users from your database with UXCam, tagging sessions or hiding sensitive views.

Add UXCam to your project
```
yarn add react-native-ux-cam
```
Add the following in your Podfile within your application target
```
pod 'RNUxcam', :path => '../node_modules/react-native-ux-cam'
```
After updating podfile, run
```
pod install
```

Then inside App.js

import RNUxcam from 'react-native-ux-cam';
        
RNUxcam.optIntoSchematicRecordings();
RNUxcam.startWithKey(‘UXCAM_APP_KEY’);

Add UXCam to your project
```
yarn add react-native-ux-cam
```

Go to android/settings.gradle and add

include ':react-native-ux-cam'
project(':react-native-ux-cam').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ux-cam/android')

Go to 'android/app/build.gradle' and under dependencies, add
```
compile project(':react-native-ux-cam')
```
Go to 'android/app/src/main/java/<path-to-main-application>/MainApplication.java' and add
```
import com.uxcam.RNUxcamPackage;
```

Add 'packages.add(new RNUxcamPackage());' inside getPackages() before return statement like this

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
      
    packages.add(new RNUxcamPackage()); //Add this line
    return packages;
}

Then inside App.js

import RNUxcam from 'react-native-ux-cam';
        
RNUxcam.optIntoSchematicRecordings();
RNUxcam.startWithKey(‘UXCAM_APP_KEY’);

If you get the error "Unable to load script from assets 'index.android.bundle'", then run this code in terminal inside your react project folder

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res

Issue

We are seeing an issue with the swipes upon implementing UXCam's SDK on React Native

Problem:
You may be seeing an issue with the swipes upon implementing UXCam on React Native. The reasoning for the issue is that React Native touch handling is treating other gesture recognizers as though they are in competition. Hence, it won't let the UXCam observing Gesture Recognizer run while there are active React Native Gesture Recognizers. -

Solution:

To work around it, disable advancedGestureRecognizers. Advanced gestures include swipe direction, double taps, pinch and trails.

RNUxcam.enableAdvancedGestureRecognizers: (enable: boolean) => void
  
// Example
// Set to FALSE before startWithKey to disable - Default is TRUE
RNUxcam.enableAdvancedGestureRecognizers(false);
RNUxcam.optIntoSchematicRecordings();
RNUxcam.startWithKey('YOUR APP KEY');

If you wish to keep advancedGestureRecognizers like swipe direction, double taps and pinch, follow this instruction instead.

This should resolve the issue that you are seeing. Please reach out to our Customer Success Team at team@uxcam.com if you need any additional help.