Skip to content

React Native - iOS

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.

1
npm install react-native-contextual-mobile-sdk --save

Go to ProjectName/ios folder.

1
pod update

For React Native =< 0.59

Install npm module.

1
npm install react-native-contextual-mobile-sdk --save

Compilation Fix

1
rm -rf ./node_modules/react-native-contextual-mobile-sdk/contextual-react.podspec

Link the dependency.

1
react-native link react-native-contextual-mobile-sdk

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.

1
2
import ContextualReact from "react-native-contextual-mobile-sdk";
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:

ContextualReact.viewWillRender('<Page Name>'); //Above contextual-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:

1
2
3
4
5
6
7
onTabSelect(tab: Tab) {
    if (this.props.tab !== tab) {
      this.props.onTabSelect(tab);
    }
    console.log('I entered into a new Page called: ' + JSON.stringify(tab))
    ContextualReact.viewWillRender(JSON.stringify(tab));
  }

Or

In some React Native projects, when a page has changed

componentWillMount() is called upon page enter.

Class Component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import ContextualReact from 'react-native-contextual-mobile-sdk';

class PageOne extends Component {
//...
 componentWillMount() {
      console.log('When user enters here, Contextual will call this view PageOne')
      ContextualReact.viewWillRender('PageOne');
   }
//...
render() {
    return (
     //...
     );
   }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import ContextualReact from 'react-native-contextual-mobile-sdk';

class PageTwo extends Component {
//...
 componentWillMount() {
      console.log('When user enters here, Contextual will call this view PageTwo')
      ContextualReact.viewWillRender('PageTwo');
   }
//...
render() {
    return (
     //...
     );
   }
}

Function Component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React, { useEffect } from "react";
import ContextualReact from 'react-native-contextual-mobile-sdk';

const PageOne = () => {
//...
useEffect(() => {
    ContextualReact.viewWillRender('PageOne');
  }, []);
//...
  return (
    //...
  );
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React, { useEffect } from "react";
import ContextualReact from 'react-native-contextual-mobile-sdk';

const PageTwo = () => {
//...
useEffect(() => {
    console.log('When user enters here, Contextual will call this view PageTwo')
    ContextualReact.viewWillRender('PageTwo');
  }, []);
//...
  return (
    //...
  );
}

Identify your app users

  • Tagging customer's unique ID
1
2
var ContextualReact = NativeModules.ContextualReact;
ContextualReact.tagUserId('user_id');
  • Tagging user's email address
1
2
var ContextualReact = NativeModules.ContextualReact;
ContextualReact.tagString('sh_email','hello@contextu.al');
  • Tagging user's first name
1
2
var ContextualReact = NativeModules.ContextualReact;
ContextualReact.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

SwiftUI Linker Error

SwiftUI Linker Error

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

SwiftUI Linker Fix

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.

1
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-30