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

Step 1 - Native Integration

Setup the IOS native side requirements.

Step 2 - Install

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

Step 3 - Import Native Modules

Import the Native Modules into project.

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

Step 4 - JS Initialization

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

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

Step 5 - Running in Xcode

React Native defaults to Objective C, but since Pointzi SDK 1.6.6 and above has swift code we need to create a bridging header

Steps for creating bridging header

1. Open ios/YourAppName.xcodeproj in Xcode
2. Right-click on Your App Name in the Project Navigator on the left, and click New File…
3. Create a single empty Swift file to the project (make sure that Your App Name target is selected when adding)
4. When Xcode asks, press Create Bridging Header and do not remove Swift file then. re-run your build.