React Native iOS doc¶

Requirements¶

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

Integration Steps¶

Install npm module.

npm install pointzi-react --save

Link the dependency.

react-native link pointzi-react

Import the Native Modules into project.

import {NativeModules} from 'react-native';

To use Pointzi in ReactNative, add nativeID into View tag. For example:

class ViewColoredBoxesWithText extends Component {
    render() {
        return (
            <View nativeID="View1"
                  style={{flexDirection: 'row',
                        height: 100,
                        padding: 20}}>
                <View style=backgroundColor: 'blue', flex: 0.3 />
                <View style=backgroundColor: 'red', flex: 0.5 />
                <Text>Hello World!</Text>
            </View>
        );
    }
}

In this example, View1 is the nativeID.

Above and include pointzi-react npm package 1.4.18 a new method introduced to set a view name

PointziReact.viewDidRender('<View 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));
  }

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

Then integration is done. Now you can design the tips in Pointzi dashboard.

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