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;
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"
       }
   }
   

Integration Steps

Install the npm module:

npm install pointzi-react --save

Link the dependency:

react-native link pointzi-react

Include Pointzi repositories in Top Level Gradle file (NOT app-level)

allprojects {
    repositories {
        maven {
            url "https://repo.pointzi.com/sdk/pointzi"
        }
    }
}

Include Pointzi dependencies in your App level build.gradle.

dependencies {
/* ...*/
    implementation "com.pointzi:pointzi:2.+"
/* ...*/
}

Initialise Pointzi in your onCreate()

import com.pointzi.Pointzi;

public class MainApplication extends Application implements ReactApplication {
/* code ..*/
  @Override
  public void onCreate() {
    super.onCreate();
    Pointzi.init(<Application>,  "<Your App Key>");
  }
/* code ..*/
}

React Native only has one ACTIVITY. When user switches from page 1 to page 2 on your App the native side will be confused on what to name Page 1 and Page 2.

Add:

PointziReact.viewWillRender('<Page Name>'); // In pointzi-react npm package 1.4.17 and above

Call this method when there there is a page transition, this will allow the SDK to know there is a View change and it's name, by what you have set.

A Few Examples

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);