Expo

introduction using the native ios/android webview implies some extra setup in your expo project this setup involves incorporating the intelliprove plug in mobile sdk as a pre packaged expo module and adding the necessary bridging code all this is nicely laid out in our step by step guide below the integration guide covers two sections setting up the expo module interfacing with the native code from expo ( bridging ) github our github repository provides a fully functional example of our platform's integration, demonstrating the seamless setup and utilisation of our pre packaged expo module https //github com/intelliprove/intelliprove web plugin expo minimal requirements for this guide, we assume a minimal 'hello world' application generated by the expo project initialisation 1\ expo module setup adding the framework last update 10/02/2025 14 31 https //archbee doc uploads s3 amazonaws com/ 0r dnpmbbllxmaowvg2u/jymthtvdggpi5awvuxa55 expo intelliprovewebview 011 tgz copy the expo intelliprovewebview x x x tgz tarball into your expo app root directory in your expo app root directory, execute npm install /path/to/tarball/expo intelliprovewebview x x x tgz configuration for ios we need to configure the minimum deployment target of the application, and allow camera usage by the application open app json and add "ios" { , "deploymenttarget" "15 0", "infoplist" { "nscamerausagedescription" "we need camera permission for performing the measurement " } }, then run npx pod install to ensure all ios dependencies are added to your application run npx expo prebuild clean first if you don't have an /ios folder configuration for android run npx expo install expo build properties this allows you to edit the gradle build properties for the android application then in app json add the following, so we can set the correct sdk versions and permissions "android" { , "permissions" \[ "android permission internet", "android permission camera" ] }, "plugins" \[ \[ "expo build properties", { "android" { "compilesdkversion" 34, "targetsdkversion" 34, "minsdkversion" 24, "kotlinversion" "1 8 0", "buildtoolsversion" "34 0 0" } } ], ] we also need to do some updates to the android manifest, so we can run the intelliprove module from the application first, create a file at plugins/withintelliproveandroidmanifest js relative to the expo application root folder in that file, add the following code const { withandroidmanifest } = require("@expo/config plugins"); function addusesfeaturecameratomanifest(androidmanifest) { const { manifest } = androidmanifest; if (!array isarray(manifest\["uses feature"])) { manifest\["uses feature"] = \[]; } if (!manifest\["uses feature"] find( (item) => item $\["android\ name"] === "android hardware camera" )) { manifest\["uses feature"]? push({ $ { "android\ name" "android hardware camera", "android\ required" "false", }, }); } return androidmanifest; } function addintelliwebviewactivitytomanifest(androidmanifest) { const { manifest } = androidmanifest; if (!array isarray(manifest\["application"])) { console warn("withintelliproveandroidmanifest no application array in manifest?"); return androidmanifest; } const application = manifest\["application"] find( (item) => item $\["android\ name"] === " mainapplication" ); if (!application) { console warn("withintelliproveandroidmanifest no mainapplication?"); return androidmanifest; } if (!array isarray(application\["activity"])) { application\["activity"] = \[]; } if (!application\["activity"] find( (item) => item $\["android\ name"] === "com intelliprove webview\ intelliwebviewactivity" )) { application\["activity"]? push({ $ { "android\ name" "com intelliprove webview\ intelliwebviewactivity" }, }); } return androidmanifest; } module exports = function withintelliproveandroidmanifest(config, attributes) { return withandroidmanifest(config, (config) => { config modresults = addusesfeaturecameratomanifest(config modresults); config modresults = addintelliwebviewactivitytomanifest(config modresults); return config; }); }; finally, add the following to app json "plugins" \[ \[ " /plugins/withintelliproveandroidmanifest", {} ] ] 2 expo integration while many possibilities exist to bridge the gap between native ios/android and expo, this document serves as a guide to integrating the intelliprovesdk into an expo application project to be able to call functions on, and receive callbacks from the intelliprove expo module, we need to import it in the expo application open app tsx or wherever in the expo app that the intelliprove web view will be used ( for newer expo projects, add the code to the rootlayout in the layout tsx file instead ) add the following imports // for registering the event listener import { useeffect } from 'react'; // the intelliprove expo module import as expointelliprovewebview from 'expo intelliprovewebview'; add a function handleopenwebview that calls the intelliprove expo module to present the web view also add a callback handler for receiving 'postmessage' messages the post messages allow you to track the progress of the face scan and obtain the results from the intelliprove plug in immediately after the user has performed the face scan this allows you to use the results in your mobile app, enabling you to link actions to the results or design a custom results screen you can find an overview of the different types of messages on the message events docid\ kz6xsnd6v4g8efcgd02ib page finally, we call the handleopenwebview() function from wherever the entry point to the webview should be the url to open the intelliprove webapp including the action token is also passed to this function in our example, it is added on a button press handler export default function app() { const handleopenwebview = () => { expointelliprovewebview\ presentwebview('https //plugin intelliprove com/?action token=xxx'); }; // add event listener for intelliwebviewpostmessage api useeffect(() => { // make sure the name of the listener matches what was used on native code const subscription = expointelliprovewebview\ addpostmessagelistener((event) => { // handle the received postmessage console log('expo postmessage full body ', event postmessage); try { // the postmessage is received as a json string, so we need to parse it const parsedmessage = json parse(event postmessage); if (parsedmessage && parsedmessage stage) { console log('expo postmessage stage ', parsedmessage stage); } else { console warn('expo invalid postmessage format ', parsedmessage); } } catch (error) { console error('expo error parsing postmessage ', error); } }); // unsubscribe from the event when the component unmounts return () => { subscription remove(); }; }, \[]); return ( \<button title="open webview" onpress={handleopenwebview} /> ) } the webview is automatically dismissed by the sdk when receiving the dismiss post message now run the application as you normally would, for example npx expo prebuild clean npx expo run\ ios or npx expo run\ android next steps to match the plug in with your brand's colours and fonts, please visit our customisation docid\ vzz odplrstmbhthzklld documentation