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

<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.

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.

*.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