react-native-apxor-rtm-plugin

react-native-apxor-rtm-plugin

Description

React Native wrapper for Apxor RTM Plugin which includes support for deep linking.

Note: If your application is not using @react-navigation, walkthroughs will not work as expected. In that case, you must log navigation events manually by using RNApxorSDK.logNavigationEvent API

Getting started

First integrate react-native-apxor-sdk from here.

For React Native version 0.59.0 and lower

Run the following command

$ npm install react-native-apxor-rtm-plugin --save

$ react-native link react-native-apxor-rtm-plugin

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

   • Add import com.apxor.reactnativesdk.plugins.RNApxorRTMPackage; to the imports at the top of the file
   • Add new RNApxorRTMPackage() to the list returned by the getPackages() method
   @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), ... new RNApxorSDKPackage(), <- ApxorSDK package new RNApxorRTMPackage(), <- ApxorRTM plugin ... ); }

For React Native version 0.60.0 and higher

Run the following command

$ yarn add react-native-apxor-rtm-plugin

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

compile project(':react-native-apxor-rtm-plugin') // Ignore this dependency, if you have already added this when integrating `react-native-apxor-sdk` implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.5.0@aar' implementation 'com.apxor.androidx:apxor-android-sdk-rtm:1.8.7@aar'

1. Create plugins.json file at android/app/src/main/assets/ folder. If you already done this step, please ignore

2. Add the following JSON in that file

   { "plugins": [ { "name": "rtm", "class": "com.apxor.androidsdk.plugins.realtimeui.ApxorRealtimeUIPlugin" } // Other Apxor plugins ] }

Configuring View IDs for Views

Apxor RTM plugin will show Inline messages (also called as Tooltips) and CoachMark messages for a given View ID/Tag. In React Native apps, you can mention View IDs for views.

For example, you want to show tooltip for a button. You can't directly give a unique id for Button. Instead, you need to wrap it up with a View tag like:

<View nativeID="loginButton"> <Button onPress={this.handlePress}>Login</Button> </View>

So, the same value for nativeID attribute can be configured in Apxor dashboard to identify the Button at Runtime.