<h1 align="center">react-native-apxor-rtm-plugin</h1>

<p align="center">
  <a href="https://npmjs.com/package/react-native-apxor-rtm-plugin"><img src="https://img.shields.io/npm/v/react-native-apxor-rtm-plugin?style=for-the-badge&labelColor=000000" alt="npm-v"></a>
  <a href="https://npmjs.com/package/react-native-apxor-rtm-plugin"><img src="https://img.shields.io/npm/dt/react-native-apxor-rtm-plugin.svg?style=for-the-badge&labelColor=000000" alt="npm-d"></a>
  <a href="https://bundlephobia.com/result?p=react-native-apxor-rtm-plugin"><img src="https://img.shields.io/bundlephobia/minzip/react-native-apxor-rtm-plugin?style=for-the-badge&labelColor=000000" alt="minzip"></a>
</p>

## Description

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

## Getting started

> First integrate `react-native-apxor-sdk` from [here](https://npmjs.org/package/react-native-apxor-sdk).

### 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

   ```java
   @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`:

```groovy
  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

1. Add the following JSON in that file

   ```json
   {
     "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:

```xml
<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.
