SDK Integration React-Native

Jiny supports only Android Platform in React-Native and will be extending support to iOS soon

Pre-requisites

Jiny identifies a screen of native apps uniquely with resource-id and tag property of an element in that screen. In react-native resource-id is auto generated at run time it is not reliable to identify a screen using resource-id. But tag is not auto generated, rather needs to be added manually. It is used in testing frameworks like Espresso to identify the elements uniquely during testing. To tag elements you need add an attribute called testID in the element. ReactNative converts testID attribute into tag attribute.

Here are some resources

React-Native and unique identifiers - TIPS AND TRICKS - Documentation

From the official page of Selenium/Appium Troubleshooting

View · React Nativereactnative

From the official page of React Native

You'll need to tag most of the views which will enable Jiny to identify the screen uniquely. To enable tagging UI elements use the below code.

<View style={styles.body}
		testID="body_view">
</View>

1. Integration

Download jiny-react-native package from npm using the following command

npm install jiny-react-native@0.0.15 --save

1.a Automatic Installation

• If you are using React Native 0.60+

React native already has a feature called CLI autolink feature that links the module while building the app.

• If you are using React Native <= 0.59

To link jiny-react-native package automatically using the following command

react-native link jiny-react-native

1.b Manual Installation

Incase the Automatic Installation fails, you can link jiny-react-native package manually

1. Open up android/app/src/main/java/[...]/MainApplication.java

   • Add import com.jiny.reactnative.JinyReactNativePackage; to the imports at the top of the file

   • Add new JinyReactNativePackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

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

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

   implementation project(':jiny-react-native')

2. Initialization

To initialize Jiny add the following inside componentDidMount() {} in your App.js

import RNJinyReactNative from 'jiny-react-native';

export class App extends React.Component {

	componentDidMount() {
		// To set the environment in test mode pass true
		JinyReactNative.init("YOUR_API_KEY", true);

		// To set the environment in production mode pass false
		JinyReactNative.init("YOUR_API_KEY", false);
	}

}

3. Web Support

If your app has any webview, tag your webview with a uinque testID and call this function in componentDidMount() {}

JinyReactNative.enableWebInterface('UNIQUE_WEBVIEW_TESTID')

For tagging webview with unique testID refer below code

<WebView
        testID='unique_webview_testid'          
        source={{ uri: sourceUri }}
        javaScriptEnabled={true}
/>

4. Disable Jiny

In case you want to disable Jiny, you can call this method

JinyReactNative.enable(false)

5. [Optional] User Identification

If you are using any other user identification other than google ad id, call this method

JinyReactNative.setAnalyticsDetails({
    id: 'unique user identifier',
    name: 'Elon Musk',
    email: '[e-mail]',
    age: '48',
    gender: 'Male',
    city: 'Los Angeles',
    state: 'Calnifornia',
    country: 'USA',
    latitude: 39.538,
    longitude: -119.44,
    extras: {
        'custom_key1': 'custom_value1',
        'custom_key2': 'custom_value2'
    }
})

To get deeper analytics insights, use the above function.

6. Proguard Rules

If you are using proguard for your builds, add the following rules in android/proguard-rules.pro file.

-dontwarn com.jiny.android.**
-keep class com.jiny.android.** {*;}

7. Callbacks

You can listen to the events provided by Jiny SDK by attaching a listener to DeviceEventEmitter with JinyCallbacks. (Make sure to call this method after you have initialised Jiny). Event is an Object with key as name of the event(String) and value as an Object of meta data of the event(Map<String, String>). For more on events refer this doc here.

import { DeviceEventEmitter } from 'react-native';

componentDidMount() {

    // Listen for callbacks
    const onJinyCallback = (event) => { 
      // For eg - value of the event is
      // {
      //    "jiny_ab_event": {
      //         "jiny_pilot_mode": "",
      //         "experiment_code":""
      //    }  
      // }
      console.log("Jiny Events: ", event)
    };
    
    DeviceEventEmitter.addListener('JinyCallbacks', onJinyCallback);
}