React Native iOS doc

Requirements

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

See prerequisites.

Please see our sample app with Contextual 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

During linking / pop update, we will automatically select an appropriate version of the Contextual iOS SDK, depending on how your xcode project is configured. We recommend you update the "Deployment target" in Xcode and "platform" in podfile to at least iOS 13.0. If any of these is less than iOS 13, then we will use the legacy Contextual version.

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.

Class Component:

import PointziReact from 'pointzi-react';

class PageOne extends Component {
//...
 componentWillMount() {
      console.log('When user enters here, Contextual 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, Contextual will call this view PageTwo')
      PointziReact.viewWillRender('PageTwo');
   }
//...
render() {
    return (
     //...
     );
   }
}

Function Component:

import React, { useEffect } from "react";
import PointziReact from 'pointzi-react';

const PageOne = () => {
//...
useEffect(() => {
    PointziReact.viewWillRender('PageOne');
  }, []);
//...
  return (
    //...
  );
}

import React, { useEffect } from "react";
import PointziReact from 'pointzi-react';

const PageTwo = () => {
//...
useEffect(() => {
    console.log('When user enters here, Contextual will call this view PageTwo')
    PointziReact.viewWillRender('PageTwo');
  }, []);
//...
  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 Contextual 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.

Step 6 - Xcode Configuration fix (Optional)

After running the app in Xcode you might see below errors

You can fix the error by removing "$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)" from Project -> Build Settings -> LIBRARY_SEARCH_PATHS , as shown below

Upgrading the SDK

The Contextual team are continually improving the SDK. It is always best to use the latest version of the SDK.

To ensure that the ReactNative SDK has the latest sdk components integrated please run the following command before building the app.

pod update

This will pull the correct version of the SDK for your platform version:

• above iOS 13.0: build will pull latest sdk
• below iOS 13.0 (11-12): the build will pull the legacy sdk

You can find the current version and version history here

---

Last update: 2024-01-16