Skip to content

React Native iOS doc

Requirements

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

See requirements.

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