jiny-react-native

1. Getting started

$ npm install jiny-react-native --save

Mostly automatic installation

$ react-native link jiny-react-native

Manual installation

Android

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. Tagging UI Elements with testID

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 autogenerated at run time it is not reliable to identify a screen using resource-id. But tag is used in testing frameworks like Espresso to identify the elements during testing. tag in native is testID in react-native.

To enable tagging UI elements so that each screen can be identified uniquely implement the below code

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

3. Initialization

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);
	}

}

4. 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='jiny-test-webview'          
        source={{ uri: sourceUri }}
        javaScriptEnabled={true}
/>

5. Disable Jiny

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

JinyReactNative.enable(false)

6. 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>).

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);
}

7. [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.

8. 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.** {*;}