How To: Embed in a React Native app

Embedding your embeddable in a React Native app involves using the WebView component that comes as part of the react-native-webview library.

We use WebView to embed an Embeddables preview URL, since we can’t pass HTML directly into the WebView.

Looking for other ways to publish your Embeddable? Check out the Publish to your site guide.

Install the react-native-webview library

If you don’t already have it installed, run:

npm i react-native-webview

Import WebView into your React file

import { WebView } from "react-native-webview";

Insert a WebView

<WebView
  source={{
    uri: "https://preview.embeddables.com/flow_abcdefhijklm",
  }}
/>

Optional: Give it dimensions

If you can’t see it initially, make sure to give it some styles to ensure that it has non-zero zero dimensions:

<WebView
  style={{
    width: 400,
  }}
  source={{
    uri: "https://preview.embeddables.com/flow_abcdefhijklm",
  }}
/>

Optional: Pass properties into User Data

To pass User Data properties into the embeddable, include them in the URL as URL params.

In the Builder, make sure to add those keys into the Embed URL settings of the embeddable.

<WebView
  source={{
    uri: "https://preview.embeddables.com/flow_abcdefhijklm?my_key=my_value",
  }}
/>

Embedding in a website or React app?

How to publish your embeddable to your wesite

How to publish your embeddable inside a React app

Typescript samples will be added to this page soon

Was this page helpful?

On this page