Using OneSDK in native apps

To use OneSDK inside a native app, you need to create a web app that contains a simple HTML page, following the same steps in the Getting Started section. This HTML page will serve as an intermediary layer, initializing and interacting with the OneSDK and its components via an embedded script.

The native app can then interact with the Web app using WebView. You would need to host the Web app on a server and open the URL within WebView for both Android and iOS apps.

Android integration

You can use the following example for your Android application:

webAppInterface = WebAppInterface(requireContext())
        binding.webView.apply {
            webViewClient = MyWebViewClient()
            webChromeClient = MyWebChromeClient()
            addJavascriptInterface(webAppInterface, "Android")
            loadUrl("https://visionary-donut-d00f62.netlify.app/")
        }

iOS Integration

You can use the following example for your iOS application:

private func setupWebView() {
        let configuration = WKWebViewConfiguration()
        webAppInterface = WebAppInterface(delegate: self, viewModel: FrankieOneViewModel())
        configuration.allowsInlineMediaPlayback = true
        configuration.defaultWebpagePreferences.allowsContentJavaScript = true
        configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
        configuration.upgradeKnownHostsToHTTPS = true
        webView.autoresizingMask = [.flexibleHeight]
        webView.navigationDelegate = self
        webView.allowsBackForwardNavigationGestures = true
        webView.customUserAgent = URLGenerator.userAgent
        webView.allowsLinkPreview = true
        view.addSubview(webView)
        
        if let url = URL(string: URLGenerator.webURL) {
            let myURLRequest = URLRequest(url: url)
            webView.load(myURLRequest)
        }
    }

Here are the steps done in the above code sample:

1. Create a WKWebViewConfiguration instance.
2. Initialize a WebAppInterface with a delegate and a FrankieOneViewModel.
3. Set various configuration properties for the WKWebView, such as allowing inline media playback, enabling JavaScript content, allowing automatic opening of windows by JavaScript, upgrading known hosts to HTTPS, etc.
4. Set the autoresizing mask for the WKWebView to enable flexible height.
5. Set the navigationDelegate of the WKWebView to self (likely the current view controller).
6. Enable back-forward navigation gestures for the WKWebView.
7. Set a custom user agent for the WKWebView using URLGenerator.userAgent.
8. Enable link preview for the WKWebView.
9. Add the WKWebView as a subview to the view.
10. Create a URL from the specified web URL using URLGenerator.webURL.
11. Create a URLRequest with the created URL.
12. Load the URLRequest into the WKWebView using the load() method.

Relay the results from the Web app back to the native app

Once the WebViews have been implemented correctly and point to the web application that has also been set up correctly, the final step will be relaying the results from the web application back to the native application and carrying out specific requirements.

For example, in the case of OCR, the results should be returned to the native app to take the next step. This can be done by adding additional functions to the WebAppInterface outlined above. By applying the @JavaScriptInterface annotation, this indicates that the method is accessible from the Web Application

Example

Web Application - Once OCR component is done, returnOCRResults method is called to pass the result object

function returnOCRResults(results) {
  Android.processOCRResults(results)
}

Android - Using a toast method to display the results of the OCR component

@JavascriptInterface
    public void processOCRResult(String result) {
        Toast.makeText(mContext, "OCR result: " + result, Toast.LENGTH_SHORT).show();
    }

Response object

The OCRResult object contains the data extracted from a document image and it varies depending on what was extracted, an example:

{
  documentTypeInternal: "DRIVERS_LICENCE",  
  dateOfExpiry: "2031-05-28",  
  dateOfIssue: "2021-05-28",  
  documentType: "DRIVERS_LICENCE",  
  documentNumber: "999999999",  
  dateOfBirth: "1990-01-01",  
  issuingCountry: "AUS",  
  state: "VIC",  
  postcode: "3000",  
  town: "Melbourne",  
  street: "80 Collins Street",  
  firstName: "PETER",  
  lastName: "TESTTHIRTEEN",  
}

React Native

To use OneSDK inside a React Native project, you need to create a web app that contains a simple HTML page, following the same steps in the Getting Started section. This HTML page will serve as an intermediary layer, initializing and interacting with the OneSDK and its components via an embedded script. Your React Native project can interact with the Web app using React Native WebView. You would need to host the Web app on a server and open the URL within WebView for both Android and iOS apps.

To use OneSDK in a React Native project, follow these steps:

Create a Web App:

1. Develop a web app that includes a simple HTML page, following the steps in the "Getting Started" section.
2. This HTML page will serve as an intermediary, initializing and interacting with OneSDK and its components through an embedded script.

Integrate with React Native:

1. Use React Native WebView to interact with the web app.
2. Host the web app on a server.
3. Open the web app URL within WebView for both Android and iOS apps.

This setup will allow your React Native project to effectively use OneSDK.

Install the WebView Library

React Native provides a separate library for WebView since it was removed from the core package. Install the react-native-webview package:

$ npm install react-native-webview

Implement WebView in your React Native application

Open your project in your preferred code editor and navigate to App.js. Import the WebView component from react-native-webview and use it to render your HTML page.

Here is an example implementation:

import React from 'react';  
import { SafeAreaView, StyleSheet } from 'react-native';  
import { WebView } from 'react-native-webview';

const App = () => {  
  const ONE_SDK_URL = '<https://your-web-service.com'>; // Your web app where you implement oneSDK  
  return (  
    <SafeAreaView style={styles.container}>  
      \<WebView  
        originWhitelist={['*']}  
        source={{ uri: ONE_SDK_URL }}  
        style={styles.webview}  
      />  
    </SafeAreaView>  
  );  
};

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
  },  
  webview: {  
    flex: 1,  
  },  
});

export default App;