Skip to main content
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.
1

Install the react-native-webview library

If you don’t already have it installed, run:
npm i react-native-webview
2

Import WebView into your React file

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

Insert a WebView

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

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://engine.embeddables.com/preview/flow_abcdefhijklm",
  }}
/>
5

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://engine.embeddables.com/preview/flow_abcdefhijklm?my_key=my_value",
  }}
/>

​
Embedding in a website or React app?

How To: Embed in your site

How to publish your Embeddable to your site

How To: Embed in a Webflow site

How to publish your Embeddable to your Webflow site

How To: Embed in a WordPress site

How to publish your Embeddable to your WordPress site

How To: Embed in a Framer site

How to publish your Embeddable to your Framer site

How To: Embed in a React app

How to publish your Embeddable inside a React app
Typescript samples will be added to this page soon