npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-apxor-sdk

v1.7.6

Published

React Native Apxor SDK

Downloads

7,436

Readme

Description

React Native wrapper for Apxor SDK. Please refer Plugins section to integrate other Apxor plugins.


🏁 Getting Started

A. For react-native version 0.59.0 and lower

  1. Run the following commands:
npm i react-native-apxor-sdk
react-native link react-native-apxor-sdk
  1. Open up android/app/src/main/java/[...]/MainActivity.java

    • Add import com.apxor.reactnativesdk.RNApxorSDKPackage; to the imports at the top of the file
    • Add new RNApxorSDKPackage() to the list returned by the getPackages() method
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                ...
                new RNApxorSDKPackage(), <- ApxorSDK package
                ...
        );
    }
  2. Append the following lines to android/settings.gradle:

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

B. For react-native version 0.60.0 and higher

Run the following commands:

npm i react-native-apxor-sdk

🤖 Integrate Apxor React Native Android SDK

  1. Insert the following lines inside repositories block in android/build.gradle
  maven { url "http://repo.apxor.com/artifactory/list/libs-release-android/" }
  maven { url "https://dl.bintray.com/apxor/apxor-android" }
  1. Insert the following lines inside the dependencies block in android/app/build.gradle:
  implementation 'com.apxor.androidx:apxor-android-sdk-core:2.8.3@aar'
  1. Add the following meta-data tag inside application tag of AndroidManifest.xml file:

    <application ...>
        ...
        <meta-data android:name="APXOR_APP_ID" android:value=[REPLACE_YOUR_APXOR_APP_ID_HERE] />
        ...
    </application>

🧩 Plugins (Optional)

  1. Add following dependencies in the build.gradle file.

     // Add this to track uninstalls and send push notifications from Apxor dashboard
     // Note: We don't support firebase-messaging >= 22.0.0 yet
     implementation('com.apxor.androidx:apxor-android-sdk-push:1.2.7@aar') {
       exclude group: 'com.google.firebase'
     }
    
     // Add these for Realtime Actions and Surveys
     implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.5.1@aar'
     implementation 'com.apxor.androidx:apxor-android-sdk-rtm:1.8.9@aar'
     implementation 'com.apxor.androidx:surveys:1.3.6@aar'
    
     // Add this to track application crashes
     implementation 'com.apxor.androidx:apxor-android-crash-reporter:1.0.5@aar'
    
     // Helper plugin to create walkthroughs
     implementation 'com.apxor.androidx:wysiwyg:1.2.6@aar'
    
     // Add this to log events without attributes at runtime
     implementation 'com.apxor.androidx:jit-log:1.0.0@aar'
    
     // Getting a "Could not find" error? Make sure that you've added Apxor's Maven repository to your root-level build.gradle file.

    NOTE

    If you are using firebase-messaging >= 22.0.0, use "com.apxor.androidx:apxor-android-sdk-push-v2" instead of "com.apxor.androidx:apxor-android-sdk-push"

    implementation('com.apxor.androidx:apxor-android-sdk-push-v2:1.2.7@aar') {
      exclude group: 'com.google.firebase'
    }
  2. Create plugins.json file in the android/app/src/main/assets/ directory.

  3. Paste the following JSON code in that file:

    {
      "plugins": [
        {
          "name": "rtm",
          "class": "com.apxor.androidsdk.plugins.realtimeui.ApxorRealtimeUIPlugin"
        },
        {
          "name": "crash",
          "class": "com.apxor.androidsdk.plugins.crash.CrashReporterPlugin"
        },
        {
          "name": "push",
          "class": "com.apxor.androidsdk.plugins.push.PushPlugin"
        },
        {
          "name": "surveys",
          "class": "com.apxor.androidsdk.plugins.survey.SurveyPlugin"
        },
        {
          "name": "wysiwyg",
          "class": "com.apxor.androidsdk.plugins.wysiwyg.WYSIWYGPlugin"
        },
        {
          "name": "jitlog",
          "class": "com.apxor.androidsdk.plugins.jitlog.ApxorJITLogPlugin"
        }
      ]
    }
  4. If you have extended the FirebaseMessagingService in your application, please use the below code in your extends FirebaseMessagingService class to receive Push notifications sent from the Apxor dashboard:

    if (remoteMessage.getFrom().equals(YOUR_FCM_SENDER_ID)) {
        // Your logic goes here
    } else {
        if (ApxorPushAPI.isApxorNotification(remoteMessage)) {
            ApxorPushAPI.handleNotification(remoteMessage, getApplicationContext());
        } else {
            // Silent or Data push notification which you can send through Apxor dashboard
        }
    }

🍎 Integrate Apxor React Native iOS SDK

  1. To Auto initialize the SDK (Recommended), add the following inside your application plist file.

  2. Open your application's Info.plist as source code.

  3. Copy and paste the following piece of code, to create an entry for ApxorSDK:

    <key>Apxor</key>
    <dict>
        <key>Core</key>
        <string>{YOUR_APP_ID}</string>
        <key>APXSurveyPlugin</key>
        <true/>
        <key>APXRTAPlugin</key>
        <true/>
        <key>APXWYSIWYGPlugin</key>
        <true/>
    </dict>
  4. To add the APXWYSIWYGPlugin, add the following to your application's .podspec file:

      s.dependency 'Apxor-WYSIWYG', '1.0.84'

    NOTE

    The APXWYSIWYGPlugin is only for debug builds, make sure to remove it for production builds.


🚀 API & Usage

Imports

// Import the SDK as a module
import RNApxorSDK from 'react-native-apxor-sdk'

// Or, import required modules
import { ApxNavigationContainer, logAppEvent } from 'react-native-apxor-sdk'

Set Custom User IDs

// Syntax
RNApxorSDK.setUserIdentifier('user_id')

// Example
RNApxorSDK.setUserIdentifier('[email protected]')

Set Custom User and Session Properties

// Syntax
RNApxorSDK.setUserCustomInfo(properties)
RNApxorSDK.setSessionCustomInfo(properties)

// Example
RNApxorSDK.setUserCustomInfo({
  city: 'Hyderabad',
  age: 12,
})

Wrapper Components

ApxorView

  • A wrapper over React Native's View component to track the View changes in the app.

    // Syntax
    <ApxorView
      tag='<unique_constant_tag>'
      {...otherViewProps}
    >
      // Your code goes here
    </ApxorView>

Logging Events

// Syntax
RNApxorSDK.logAppEvent(event_name, properties)

// Example
RNApxorSDK.logAppEvent('ADD_TO_CART', {
  userId: '[email protected]',
  value: 1299,
  item: 'Sony Head Phone 1201',
})

Tracking Navigation

A. Screen Navigation

1. If you are already using @react-navigation for navigation in your app, Apxor SDK automatically tracks screen navigation if you follow the below mentioned steps:
import { useNavigationContainerRef } from '@react-navigation/native'

const navigationRef = useNavigationContainerRef()

return (
  <NavigationContainer
    ref={navigationRef}
    onReady={() => {
      const currentRoute = navigationRef?.current.getCurrentRoute()
      if (currentRoute) {
        RNApxorSDK.trackScreen(currentRoute.name)
      }
    }}
    onStateChange={() => {
      const currentRoute = navigationRef?.current.getCurrentRoute()
      if (currentRoute) {
        RNApxorSDK.trackScreen(currentRoute.name)
      }
    }}
  >
    // your screens and navigators
  </NavigationContainer>
)
2. Otherwise
// Syntax
RNApxorSDK.logNavigationEvent(screen_name)

// Example
RNApxorSDK.logNavigationEvent('LoginScreen')

B. Tab Navigation

// Syntax
RNApxorSDK.trackScreen(tab_name)

// Example
RNApxorSDK.trackScreen('Home')