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
react-native link react-native-ux-cam

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

import RNUxcam from 'react-native-ux-cam';
RNUxcam.startWithKey('YOUR API KEY');
RNUxcam.optIntoSchematicRecordings();

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

Add UXCam to your project
```
 yarn add react-native-ux-cam
```
Drag RNUxcam.xcodeproj file inside node_module/react-native-ux-cam/ios to your project on Libraries group on Xcode.
Click on your main project file, select Build Phases and drag the static library from the Products folder inside the Library you are importing to Link Binary With Libraries

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')

Under dependencies, go to 'android/app/build.gradle' and 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 'new RNUxcamPackage()' inside getPackages() like this

@Override
    protected List getPackages() {
       return Arrays.asList(
               new MainReactPackage(),
               new RNUxcamPackage()
       );
    }

Add the following to your file 'android/app/build.gradle' (or add the maven url to your existing repositories section)

repositories {
        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        maven { url "$rootDir/../node_modules/react-native/android" }
        maven { url "http://sdk.uxcam.com/android/" }
      }

And add this to your file 'android/app/src/main/AndroidManifest.xml', inside your '<application>' tag:
```
<service android:name="com.uxcam.service.HttpPostService"/>
```

Then inside App.js

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

If you get this 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 issues with the swipes, upon implementing UXCam 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 because, react-native touch handling is treating other gesture recognizers as though they are in competition. Hence, it wont let the UXCam observing Gesture Recognizer run while there are active React-native Gesture Recognizers.

Solution:

To work around it:

Find the react-native source file: RCTTouchHandler.m
(path: $/node_modules/react-native/React/Base/RCTTouchHandler.m)

In the last method in that file edit it to be 'return NO'

so the method becomes:

(BOOL)gestureRecognizer:(__unused UIGestureRecognizer *)gestureRecognizer shouldRequireFailureOfGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return NO;
// Same condition for failure of as for be prevented by.
//return [self canBePreventedByGestureRecognizer:otherGestureRecognizer];
}

This stops the react-native touch handler from deciding that it will reject gesture recognizers for it's own views when some other part of the code is also using a UIGestureRecognizer (as UXCam is doing in this case).

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