Follow the instructions below for integration
- To add UXCam to your project
For React Native versions less than 0.60yarn add react-native-ux-cam //If you use npm instead of yarn npm i react-native-ux-cam
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');
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.