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.

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.