React Native

Documentation Update in Progress

We are currently revisiting and updating this section of our documentation to ensure it provides the most accurate and helpful information. Some content may be incomplete or outdated during this process.

Thank you for your patience! If you have any immediate questions, please don’t hesitate to contact our support team.

---

This guide explains how to embed the LiSA Player in a React Native WebView, with Android-specific safe-area adjustments.

Setting Up the WebView

Install the react-native-webview and react-native-safe-area-context packages:

npm install --save react-native-webview react-native-safe-area-context

Create a WebView component:

import { WebView } from 'react-native-webview';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function SimpleWebView() {
  const insets = useSafeAreaInsets();

  const injectedCSS = `
    :root {
      --lsc-safe-area-inset-top: ${insets.top}px;
      --lsc-safe-area-inset-bottom: ${insets.bottom}px;
      --lsc-safe-area-inset-left: ${insets.left}px;
      --lsc-safe-area-inset-right: ${insets.right}px;
    }
  `;

  const injectedJavaScript = `
    (function() {
      const style = document.createElement('style');
      style.innerHTML = \`${injectedCSS}\`;
      document.head.appendChild(style);
    })();
  `;

  return (
    <WebView
      source={{ uri: 'https://{clientId}.loveslisa.tech/s/{showId}' }}
      injectedJavaScript={injectedJavaScript}
      javaScriptEnabled={true}
      allowsInlineMediaPlayback={true}
      mediaPlaybackRequiresUserAction={false}
    />
  );
}

export default SimpleWebView;

Safe-Area Insets: Safe-area insets only need to be passed for Android, as iOS WebViews support safe-area-insets natively.