React Native Android Integration

Prerequisites

This setup assumes you have already setup your App Key on the Dashboard

See requirements.

1. Your App must be targeted for at least Lollipop (21) and above;
2. Your app’s compileSdkVersion must be set to 28 or higher;
3. Pointzi supports React Native 0.60 or more recent, older versions might have incompatibility issues;

4. Pointzi uses Java 1.8 features, please make sure your app uses it as well:

   android {
       compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
       kotlinOptions {
           jvmTarget = "1.8"
       }
   }
   

5. Pointzi UI is based on Google's Material Components library. Please ensure your app's theme inherits from Theme.MaterialComponents or its subthemes.

Also, please, check if your app uses a version eqal or more recent to 1.1.0

dependencies {
    implementation (group: "com.google.android.material", name: "material", version: "1.1.0")
}

You need to make sure that inside your app/res/values/styles.xml (or equivalent) the parent of AppTheme is part of the Theme.MaterialComponents theme. Here is an example from the Wikipedia's app:

   <style name="BaseAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> 
        <...>
    </style>
    <style name="AppTheme" parent="BaseAppTheme">
        <...>
    </style>

(If you are having issues with this please check instructions here, specially step 4)

Integration Steps

Install the npm module:

npm install pointzi-react --save

Link the dependency (not necessary in ReactNative version >0.60):

react-native link pointzi-react

Set your Pointzi AppKey in `android/app/src/main/AndroidManifest.xml` Under the application tag, add the following meta-data tag replacing APP_KEY with your app key:

    <application
        android:name=".MainApplication">

        <meta-data
            android:name="com.pointzi.APP_KEY"
            android:value="APP_KEY" />

    </application>

As React Native only has one Activity, when the user switches from page 1 to page 2 on your App the native side will not know what to name Page 1 and Page 2, sometimes naming them the same or with non friendly names. To fix this and allow Pointzi to work properly you should add PointziReact.viewWillRender('VIEW_NAME'); on the JS side of your app, changing VIEW_NAME with the name of the view or a variable that contains it. Call this method when there there is a page transition, this will allow the SDK to know that there was a View change and its name. A Few Examples showcasing how to do this can be found below. React Navigation's NavigationContainer:

      <NavigationContainer
      ref={navigationRef}
      onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name

        if (previousRouteName !== currentRouteName) {
            // Let Pointzi know about the change
          PointziReact.viewWillRender(currentRouteName);
        }

        // Save the current route name for later comparision
        routeNameRef.current = currentRouteName;
      }}
      >
        <...>
      </NavigationContainer>

Tab pages:

onTabSelect(tab: Tab) {
    if (this.props.tab !== tab) {
      this.props.onTabSelect(tab);
    }
    console.log('I entered into a new Page called: ' + JSON.stringify(tab))
    PointziReact.viewWillRender(JSON.stringify(tab));
  }

Or In some React Native projects, when a page has changed `componentWillMount()` is called upon page enter.

import PointziReact from 'pointzi-react';

class PageOne extends Component {
//...
 componentWillMount() {
      console.log('When user enters here, Pointzi will call this view PageOne')
      PointziReact.viewWillRender('PageOne');
   }
//...
render() {
    return (
     //...
     );
   }
}

import PointziReact from 'pointzi-react';

class PageTwo extends Component {
//...
 componentWillMount() {
      console.log('When user enters here, Pointzi will call this view PageTwo')
      PointziReact.viewWillRender('PageTwo');
   }
//...
render() {
    return (
     //...
     );
   }
}

Usage

Tagging

You can tag Pointzi installs by the following.

Tag Name	Description
sh_cuid	Use sh_cuid to tag an install with a unique identifier for the install. sh_cuid is needed to link the identity of App Users to Users in your - and the StreetHawk backend. Allows tagging via api call. Used to identify the same User across multiple installs.
Code:	PointziReact.tagCuid('MY USER ABC');
tagString	For tagging any String and Value
Code:	PointziReact.tagString("String key" , "String tag");
tagNumeric	Tagging any Numeric String and double value
Code:	PointziReact.tagNumeric("String key" , 123);