Skip to content

ReactNative Android Integration

Requirements

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

See requirements.

Integration Steps

Install the npm module:

npm install pointzi-react

Link the dependency:

react-native link pointzi-react

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

allprojects {
    repositories {
        maven {
            url "http://pkg.streethawk.com/artifactory/pointzi"
        }
        maven {
            url "http://pkg.streethawk.com/artifactory/streethawk"
        }
    }
}

Include Pointzi dependencies in your App level build.gradle.

dependencies {
/* ...*/
    compile "com.streethawk:core:latest.release"
    compile "com.streethawk:pointzi:latest.release"
/* ...*/
}

Initialise Pointzi in your onCreate()

import com.streethawk.library.pointzi.Pointzi;

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

React Native only has one ACTIVITY. So when user switches from page 1 to page 2 in the APP the native side will be confused on what to name Page 1 and Page 2.

Add:

PointziReact.pointziReactWillDidMount('<Page Name>');

When there is a page transition, this will allow the SDK to know the transition 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.pointziReactWillDidMount(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.pointziReactWillDidMount('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.pointziReactWillDidMount('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);