Skip to content

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: 

    1
2
3
4
5
6
7
8
9
    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.

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:

1
2
3
4
5
6
   <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: 
1
npm install pointzi-react --save
Link the dependency (not necessary in ReactNative version >0.60): 
1
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: 
1
2
3
4
5
6
7
8
    <application
        android:name=".MainApplication">

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

    </application>
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('');` 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 React Navigation NavigationContainer: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
      <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: 
1
2
3
4
5
6
7
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. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
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 (
     //...
     );
   }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
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);