Skip to content

React Native Web Integration

Prerequisites

This setup assumes you have already setup your App Key on the Dashboard and you want to use same codebase for both mobile/web.

Integration Steps

Install the npm module:
1
npm install pointzi-react --save
Link the dependency:
1
react-native link pointzi-react
Load Web SDK: index.html
1
2
3
4
5
6
<head>...</head>
<body>
...
<link rel="stylesheet" href="https://sdk.contextu.al/web/public/css/streethawk-sdk.css">
<script src="https://sdk.contextu.al/web/dist/bundle/streethawk-pointzi-bundle.js"></script>
</body>
Put this into your root component or root app.
1
2
3
4
5
6
import PointziReact from 'pointzi-react';
...

PointziReact.ready(()=>{
    PointziReact.register("YOUR_APP_KEY", "YOUR USER ID");
})
**Note** User Id is optional, you can tag users with an id later (when they log in) using sh_cuid as the key. i.e ** window.Pointzi.tag.string(sh_cuid, user@useremail.com);** If you use Expo to init your project, put it into App.tsx

Additional steps.

Expo

Generate index.html file

1
expo customize:web

Setup Content-Security-Policy(CSP) (Optional)

If your website ( web app ) uses CSP to restrict resource loading then you should add the below settings to the white list to allow your website to use resources ( JS, CSS, images, etc... ) from Contextual.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
*.contextu.al

*.streethawk.com

*.storjshare.io

cdn.filestackcontent.com

https://static.filestackapi.com/picker/1.24.1/picker.js

https://static.filestackapi.com/picker/1.23.0/main.css

Note

If you want to use external resources e.g. loading a image from facebook then you should add "*.facebook.com" to the white list.


Last update: 2024-01-14