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

• 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

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

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

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