React Native
You can integrate the widget into your React Native application using a web view.
This documentation provides an example of integration using the react-native-webview package.
1. First, add the required permissions
For Android: In your AndroidManifest.xml file
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
For iOS: In your Info.plist file
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSFileProviderDomainUsageDescription</key>
<string></string>
2. Create an integration.html file in the assets directory containing your widget's web integration (example: integration.html)
Android
Assets directory: ./android/app/src/main/assets/
iOS
Assets directory: ./ios/external/assets/See also how to build assets
3. Finally load the file in a WebView. For example, in your main App component:
import React from "react"
import { Platform } from "react-native"
import { WebView } from "react-native-webview"
import { WebViewMessageEvent } from "react-native-webview/lib/WebViewTypes"
const uri = Platform.OS === "android" ? "file:///android_asset/integration.html" : "./assets/integration.html"
export default class App extends React.Component {
private readonly _handleOnMessage = ({ nativeEvent: { data } }: WebViewMessageEvent) => {
const message = JSON.parse(data)
console.log("Message from WebView:", message)
}
render = () =>
<WebView
originWhitelist={["*"]}
source={{ uri }}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={false}
onMessage={this._handleOnMessage}/>
}
Here is the complete React Native Webview example and the React Native Webview with local content example.
Ionic
Since Ionic already uses a web view, integrating the widget is straightforward.
This documentation provides an example of integrating the widget using Ionic with React.
1. First, add the required permissions:
Android
In your AndroidManifest.xml file:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />iOS
In your Info.plist file:
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSFileProviderDomainUsageDescription</key>
<string></string>2. Add the ressource in your index.html
<head>
<!-- ... -->
<script src="https://cdn.test.saphere.ai/saphere-scan/js/main.min.js"></script>
</head>3. Create a new React component, named Module
import React from "react"
declare global {
interface Window { Handler: any }
}
export class Module extends React.Component {
private readonly _options = {
createMeasure: {
strategy: "delegate",
url: "https://cdn.test.saphere.ai/saphere-scan/js/main.min.js",
headers: { Authorization: "Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" } }
}
componentDidMount() {
window.Handler.load("#container", this._options)
}
render = () => <div id="container" style={{ height: "100vh" }}></div>
}
export default Module
