LIQA™

Appearance

Integrating LIQA into React Native app ​

Below is the guide for integrating LIQA into a React Native app using Expo and TypeScript language.

WebView with LIQA integrated ​

Here is a ready-to-use implementation of WebView with integrated LIQA functionality.

Production recommendation

For the simplicity of the guide, WebView loads the HTML page from a string containing the page‘s HTML content.

In a real-world application, you may consider loading the page from a CDN managed by your organization. Check the Hosting the HTML Page section for more details.

IMPORTANT

WebView should be opened over HTTPS. Without HTTPS, the camera access will not be requested, and the camera cannot be used.

When hosting locally, you can open the WebView using https://localhost/ as the baseUrl

tsx
<WebView source={{ html: HTML, baseUrl: "https://localhost/" }} />
<WebView source={{ html: HTML, baseUrl: "https://localhost/" }} />
tsx
import { WebView, type WebViewMessageEvent } from "react-native-webview"

const HTML = ` PUT THE HTML PAGE CONTENT HERE `

export type Props = {
  onLiqaEvent: (name: string, payload?: Object) => void
}

export const LiqaWebView = ({ onLiqaEvent }: Props) => {
  const handleWebviewMessage = (event: WebViewMessageEvent) => {
    const message = event.nativeEvent.data
    const { name, payload } = JSON.parse(message)

    onLiqaEvent(name, payload)
  }

  return (
    <WebView
      source={{
        html: HTML,
        // `https://` is required to get WebView camera working
        baseUrl: "https://YOUR.DOMAIN.COM,
      }}
      originWhiteList={["*"]}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
      onMessage={handleWebviewMessage}
      // Set the mediaCapturePermissionGrantType to "grant" to avoid repetitive permission requests, especially on iOS
      mediaCapturePermissionGrantType={"grant"}
    />
  )
}
import { WebView, type WebViewMessageEvent } from "react-native-webview"

const HTML = ` PUT THE HTML PAGE CONTENT HERE `

export type Props = {
  onLiqaEvent: (name: string, payload?: Object) => void
}

export const LiqaWebView = ({ onLiqaEvent }: Props) => {
  const handleWebviewMessage = (event: WebViewMessageEvent) => {
    const message = event.nativeEvent.data
    const { name, payload } = JSON.parse(message)

    onLiqaEvent(name, payload)
  }

  return (
    <WebView
      source={{
        html: HTML,
        // `https://` is required to get WebView camera working
        baseUrl: "https://YOUR.DOMAIN.COM,
      }}
      originWhiteList={["*"]}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
      onMessage={handleWebviewMessage}
      // Set the mediaCapturePermissionGrantType to "grant" to avoid repetitive permission requests, especially on iOS
      mediaCapturePermissionGrantType={"grant"}
    />
  )
}

Before integrating the snippet into your app, please, ensure that:

Application integration example ​

Here is an app‘s entry point, showcasing a sample integration of LiqaWebView:

tsx
import { useState, useEffect } from "react"
import { Camera } from "expo-camera"
import Logs from "react-native-toast-message"
import { LiqaWebView } from "./LiqaWebView"

export default function App() {
  const webview = <LiqaWebView onLiqaEvent={handleLiqaEvent} />
  const [view, setContentView] = useState<React.JSX.Element>()

  // Request camera permission before loading WebView
  useEffect(() => {
    Camera.requestCameraPermissionsAsync().then(() => setContentView(webview))
  }, [])

  return (
    <>
      {view}
      <Logs />
    </>
  )
}

// The App‘s business logic for handling LIQA events
function handleLiqaEvent(name: string, payload?: Object) {
  let text = `LIQA: ${name}`

  if (payload) {
    let extars = JSON.stringify(payload)
    // Do not overwhelm the log
    if (extars.length >= 1024) extars = extars.substring(0, 1024) + "..."
    text += `\n${extars}`
  }

  log(text)
}

function log(message: string) {
  const [text1, text2] = message.split("\n")

  Logs.show({
    text1,
    text2,
    position: "bottom",
  })
}
import { useState, useEffect } from "react"
import { Camera } from "expo-camera"
import Logs from "react-native-toast-message"
import { LiqaWebView } from "./LiqaWebView"

export default function App() {
  const webview = <LiqaWebView onLiqaEvent={handleLiqaEvent} />
  const [view, setContentView] = useState<React.JSX.Element>()

  // Request camera permission before loading WebView
  useEffect(() => {
    Camera.requestCameraPermissionsAsync().then(() => setContentView(webview))
  }, [])

  return (
    <>
      {view}
      <Logs />
    </>
  )
}

// The App‘s business logic for handling LIQA events
function handleLiqaEvent(name: string, payload?: Object) {
  let text = `LIQA: ${name}`

  if (payload) {
    let extars = JSON.stringify(payload)
    // Do not overwhelm the log
    if (extars.length >= 1024) extars = extars.substring(0, 1024) + "..."
    text += `\n${extars}`
  }

  log(text)
}

function log(message: string) {
  const [text1, text2] = message.split("\n")

  Logs.show({
    text1,
    text2,
    position: "bottom",
  })
}

Feel free to adapt the example for your application needs.

Application permissions configuration ​

Additionally, there is an example of expo-camera configuration for LiqaWebView to function correctly

tsx
{
  "expo": {
    "name": "LiqaReactNativeIntegration",
    "slug": "liqa-react-native-integration",
    "version": "0.0.0",
    "orientation": "portrait",
    "userInterfaceStyle": "light",
    "assetBundlePatterns": ["**/*"],
    "ios": {},
    "android": {},
    "web": {},
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera"
        }
      ]
    ]
  }
}
{
  "expo": {
    "name": "LiqaReactNativeIntegration",
    "slug": "liqa-react-native-integration",
    "version": "0.0.0",
    "orientation": "portrait",
    "userInterfaceStyle": "light",
    "assetBundlePatterns": ["**/*"],
    "ios": {},
    "android": {},
    "web": {},
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera"
        }
      ]
    ]
  }
}

Before running your app with LiqaWebView integrated, please, ensure that:

Need Assistance? ​

If you have any questions regarding the integration or need further assistance, please contact Haut.AI Support Team with this request via the Support Desk.