Skip to content

React Native iOS doc

Requirements

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

See requirements.

Please see our sample app with Pointzi IOS.

Clone the repo and checkout ios-react-native branch.

Integration Steps

Setup the IOS native side requirements.

For React Native >= 0.60

Install npm module.

npm install pointzi-react --save

Go to ProjectName/ios folder.

pod update

For React Native =< 0.59

Install npm module.

npm install pointzi-react --save

Compilation Fix

rm -rf ./node_modules/pointzi-react/pointzi-react.podspec

Link the dependency.

react-native link pointzi-react

Import the Native Modules into project.

import PointziReact from "pointzi-react";
import {NativeModules} from 'react-native';

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>'); //Above pointzi-react npm package 1.4.18

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 (
     //...
     );
   }
}

Identify your app users

  • Tagging customer's unique ID
var PointziReact = NativeModules.PointziReact;
PointziReact.tagCuid('user_shcuid');
  • Tagging user's email address
var PointziReact = NativeModules.PointziReact;
PointziReact.tagString('sh_email','hello@streethawk.com');
  • Tagging user's first name
var PointziReact = NativeModules.PointziReact;
PointziReact.tagString('sh_first_name','David');