> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/react-native.md).

# React Native

{% hint style="warning" %}
**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.
{% endhint %}

***

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:

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

Create a WebView component:

```tsx
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
      allowsInlineMediaPlayback={true}
      cacheEnabeld={true}
      injectedJavaScript={injectedJavaScript}
      javaScriptEnabled={true}
      mediaPlaybackRequiresUserAction={false}
      source={{ uri: 'https://{clientId}.loveslisa.tech/s/{showId}' }}
    />
  );
}

export default SimpleWebView;
```

{% hint style="info" %}
**Safe-Area Insets:** Safe-area insets only need to be passed for **Android**, as iOS WebViews support safe-area-insets natively.
{% endhint %}