ReactNative

introduction using the native ios/android webview implies some extra setup in your reactnative project this setup involves incorporating the intelliprove plug in mobile sdk files into your project dependencies for both ios and android and adding the necessary bridging code all this is nicely laid out in our step by step guide below the integration guide covers three sections setting up the ios code setting up the android code interfacing with the native code from reactnative ( bridging ) github our github repository provides a fully functional example of our platform's integration, demonstrating the seamless setup and utilisation of our native sdks for ios and android platforms https //github com/intelliprove/intelliprove web plugin react native minimal requirements for this guide, we assume a minimal 'hello world' application generated by the reactnative project initialisation 1\ ios framework setup adding the framework last update 18/06/2024 19 13 add folder ios/frameworks copy the unzipped intelliprovesdk xcframework folder into this folder open the ios/\[project name] xcodeproj project in xcode open project settings > general and in the frameworks, libraries, and embedded content section, add the intelliprovesdk xcframework that you copied above as a dependency setting up the project in project settings > build settings tab, verify that the ios deployment target is set appropriately the minimum supported version for the intelliprovesdk is ios 15 0 now open the project settings > info tab to add the following info plist value nscamerausagedescription add a string here that will be displayed when the application asks the user for camera usage permissions updating the code in the project tree, add a new header file called webviewmodule h , and add the following code \#import \<react/rcteventemitter h> // we create a reactnative module that can bridge from react to ios, but also is an event emitter to post back to react @interface webviewmodule rcteventemitter @end next to that file, add an objectivec file webviewmodule m \#import "webviewmodule h" \#import "appdelegate h" // add the intelliprovesdk import \#import "intelliprovesdk/intelliprovesdk swift h" \#import \<swiftui/swiftui h> \#import \<react/rctbridge h> @interface webviewmodule () \<intelliwebviewdelegate> @end @implementation webviewmodule // we export this class as a module to reactnative rct export module(); // we add an event name for the post message and register it // the name is important, it must match the name of the event in the tsx file nsstring postmessageevent = @"intelliwebviewpostmessage"; \ (nsarray\<nsstring > )supportedevents { return @\[postmessageevent]; } /// this function creates a new intelliwebview using the factory method, /// passing in the provided urlstring, and setting this class as a delegate for the intelliwebview /// it then presents this web view on top of the window's rootviewcontroller /// this function is exported so it can be used from within reactnative code rct export method(presentwebview (nsstring )urlstring) { dispatch async(dispatch get main queue(), ^{ uiviewcontroller rootviewcontroller = \[uiapplication sharedapplication] delegate window\ rootviewcontroller; uiviewcontroller webviewcontroller = \[intelliwebviewfactory newwebviewwithurlstring\ urlstring delegate\ self]; webviewcontroller modalpresentationstyle = uimodalpresentationfullscreen; \[rootviewcontroller presentviewcontroller\ webviewcontroller animated\ yes completion\ nil]; }); } /// implementation of the `intelliwebviewdelegate` protocol /// this dispatches received `postmessage api` messages through to the reactnative application \ (void)didreceivewithpostmessage (nsstring )postmessage { // pass message to react app through an event \[self sendeventwithname\ postmessageevent body\ postmessage]; } @end now open appdelegate m in the project tree and add the registerwebviewmodule method as described below (note the changes in the application selector) \#import \<react/rctbundleurlprovider h> \#import \<react/rctbridge h> // this is an example of how the appdelegate may look, it may be defined differently in another project @implementation appdelegate \ (bool)application (uiapplication )application didfinishlaunchingwithoptions (nsdictionary )launchoptions { self modulename = @"project name"; self initialprops = @{}; bool result = \[super application\ application didfinishlaunchingwithoptions\ launchoptions]; // register the webviewmodule \[self registerwebviewmodule]; return result; } // this registers a nativemodule with the reactnative application // the name is important, it must match the name of the nativemodule in the tsx file \ (void)registerwebviewmodule { rctbridge bridge = self bridge; if (bridge) { \[bridge moduleforname @"webviewmodule"]; } } @end 2\ android framework setup adding the framework last update 16/09/2024 17 00 all the following actions are taken in the android root folder of the reactnative project add folder app/libs copy the intelliprovewebview\ aar into this folder in app/build gradle , add a dependency for the intelliprovewebview\ aar and androidx's appcompatibility constraintlayout dependencies { implementation("androidx constraintlayout\ constraintlayout 2 1 4") implementation files('libs/intelliprovewebview\ aar') } setting up the project in build gradle (not app/build gradle ), ensure the correct kotlin version is used, and define the minsdkversion buildscript { ext { minsdkversion = 24 kotlinversion = "1 8 0" } } in app/src/main/androidmanifest xml , add the needed permissions for camera and internet usage, and an activity tag, so the intelliwebviewactivity can be shown in the application \<manifest xmlns\ android="http //schemas android com/apk/res/android"> \<uses feature android\ name="android hardware camera" android\ required="false" /> \<uses permission android\ name="android permission internet" /> \<uses permission android\ name="android permission camera" /> \<application > \<activity android\ name="com intelliprove webview\ intelliwebviewactivity" /> \</application> \</manifest> updating the code find the folder where the mainapplication of the project is located (for example app/src/main/java/\[packagename]/mainapplication kt now we'll add the react nativemodule that acts as a bridge between reactnative and android, add a new file webviewmodule kt in this same folder // use your package name here package com \<package name> import android content context // imports for reactnative's bridging import com facebook react bridge javascriptmodule import com facebook react bridge reactapplicationcontext import com facebook react bridge reactcontextbasejavamodule import com facebook react bridge reactmethod import com facebook react modules core deviceeventmanagermodule // imports for the intelliprove webview import com intelliprove webview\ intelliwebviewactivity import com intelliprove webview\ intelliwebviewdelegate class webviewmodule(reactcontext reactapplicationcontext) reactcontextbasejavamodule(reactcontext), intelliwebviewdelegate, javascriptmodule { // this defines the name of the nativemodule // make sure to use the same name as in the reactnative app code override fun getname() string { return "webviewmodule" } // add a reactmethod to react to the trigger and show the webview sent from the reactnative app code @reactmethod fun presentwebview(urlstring string) { currentactivity? let { intelliwebviewactivity start(it, urlstring, this) } } // this is the implementation of the `intelliwebviewdelegate` interface // that way it can receive and emit callbacks from the web app's `postmessage api` to reactnative override fun didreceivepostmessage(postmessage string) { reactapplicationcontext getjsmodule(deviceeventmanagermodule rctdeviceeventemitter class java) emit("intelliwebviewpostmessage", postmessage) } } in the same folder still, add another file intellireactpackage kt to register the webviewmodule on the application in a 'reactpackage' // use your package name here package com \<package name> import android content context import android view\ view import com facebook react reactpackage import com facebook react bridge nativemodule import com facebook react bridge reactapplicationcontext import com facebook react uimanager reactshadownode import com facebook react uimanager viewmanager class intellireactpackage reactpackage { override fun createnativemodules(reactcontext reactapplicationcontext) mutablelist\<nativemodule> { val modules = mutablelistof\<nativemodule>() modules add(webviewmodule(reactcontext)) return modules } override fun createviewmanagers(p0 reactapplicationcontext) mutablelist\<viewmanager\<view, reactshadownode< >>> { return emptylist\<viewmanager\<view, reactshadownode< >>>() tomutablelist() } } finally, open the mainapplication kt that initializes the reactnative application in android add the following code to register the package we created above import com \<package name> intellireactpackage class mainapplication application(), reactapplication { override val reactnativehost reactnativehost = object defaultreactnativehost(this) { override fun getpackages() list\<reactpackage> { packagelist(this) packages apply { // packages that cannot be autolinked yet can be added manually here, for example // add(myreactnativepackage()) add(intellireactpackage()) } } } } 3\ reactnative integration while many possibilities exist to bridge the gap between native ios/android and reactnative, this document serves as a guide to integrating the intelliprovesdk into a reactnative application project to be able to call functions on, and receive callbacks from the native application, we can implement nativemodules in the reactnative application open app tsx (or wherever in the reactnative app that the intelliprove web view will be used) add the following imports // for registering the event listener import { useeffect } from 'react'; import { nativemodules, // to use nativemodules, so we can call native functions nativeeventemitter, // to register eventemitters, so we can respond to events from native code } from 'react native'; add a function handleopenwebview that calls the nativemodules 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 health check and obtain the results from the intelliprove plug in immediately after the user has performed the health check 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 docid\ nhmyw3igywbv wbatholb 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 function app() react jsx element { const handleopenwebview = () => { nativemodules webviewmodule presentwebview('https //plugin dev intelliprove com/?action token=xxx'); }; // add event listener for intelliwebviewpostmessage api useeffect(() => { // subscribe to the event when the app component mounts const eventemitter = new nativeeventemitter(nativemodules webviewmodule); // make sure the name of the listener matches what was used on native code const subscription = eventemitter addlistener('intelliwebviewpostmessage', (postmessage) => { // handle the received postmessage console log('reactnative postmessage full body ', postmessage); try { // the postmessage is received as a json string, so we need to parse it const parsedmessage = json parse(postmessage); if (parsedmessage && parsedmessage stage) { console log('reactnative postmessage stage ', parsedmessage stage); } else { console warn('reactnative invalid postmessage format ', parsedmessage); } } catch (error) { console error('reactnative error parsing postmessage ', error); } }); // unsubscribe from the event when the component unmounts return () => { subscription remove(); }; }, \[]); // empty dependency array means this effect runs once when the component mounts return ( \<button title="open webview" onpress={handleopenwebview} /> ) } the webview is automatically dismissed by the sdk when receiving the dismiss post message next steps to match the plug in with your brand's colours and fonts, please visit our docid 0ukxybkmvpnt1kv0jgwml documentation