React Native

UXCam React Native SDK Installation & Quick Start

npm versionnpm version

Follow the instructions below for Integration

SDK Integration

Native Integration

  1. 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
  2. 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();
    

Manual Integration (iOS)

  1. Add UXCam to your project

    yarn add react-native-ux-cam
  2. Add the following in your Podfile within your application target

    pod 'RNUxcam', :path => '../node_modules/react-native-ux-cam'
  3. After updating podfile, run

    pod install
  4. Then inside App.js

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

Manual Integration (Android)

  1. Add UXCam to your project

    yarn add react-native-ux-cam
  2. 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')
  3. Go to 'android/app/build.gradle' and under dependencies, add

    compile project(':react-native-ux-cam')
  4. Go to 'android/app/src/main/java//MainApplication.java' and add

    import com.uxcam.RNUxcamPackage;
  5. 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;
    }
  6. 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

👍

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.


What’s Next