Connect to deployed/production react native application

[vishnu.r]

Builder content link

Builder.io: Visual Development Platform

I want to connect to an already deployed/ production build of a react native application.

Code stack: React Native, Expo

Hi so I am using react native sdk to connect with builder and have created a custom component. It is working perfectly how I want it, so this was done while running the web build with a react native, Expo application .
The content page is rendering while we have the local running and the target is set to the local url which the expo application is exposing.

But Is there any way we can connect to the deployed application in playstore/appstore – OR --Like maybe atleast running the production build apk file in the emulator, and we can see the UI loaded in.

Please let me know if u have ay more questions on this.
Thank you.

[ParthSharma]

Hi Vishnu​,

To connect your deployed website with the Builder editor, you’ll need to set your URL in the Preview URL field.

I’ve attached two screenshots to guide you through the steps on how to correctly enter your URL in the Preview URL field.

For more detailed instructions, you can also refer to our documentation here:

Preview URL Setup Guide

Let me know if you need any further assistance!

Thanks,

[vishnu.r]

Hi,
Thank you for the reply. But I am raising this issue for a react native app .
So the build would would be a native application.
Either an android/ios application. Not a website with end urls.

[ParthSharma]

Hi Vishnu,

Yes, you can connect a production or deployed version of your React Native + Expo app with Builder.io content.

However, please note that Builder.io doesn’t currently offer official documentation specifically for React Native integration. You may need to explore community resources or perform some custom setup on the React Native side to make it work smoothly.

If you run into any specific issues or need guidance along the way, feel free to reach out—I’m happy to help where I can.

Best regards,

[vishnu.r]

Hi so yeah, I am connecting to the builder from my production app and am able to see the custom component populated with the data from builder..

But I want to open up the Content NativeApp US- Home page and see the app screen rendered there.
As far as I know, the production app for both android/ios does not have urls to be used as the target.
When we are developing using react-native, while running the dev server locally we are able to access the localhost:8081 which is exposed by expo.

But standalone android/ios apps have apk/ipa files deployed in playstore/appstore.
So I am not sure about the url to access, which our business team can use in the target entry for editing the custom component..
Ideally we don’t want to run the dev server in the business team system so as to render the screen in the content..

[ParthSharma]

Hi Vishnu,

Their is no perfect answer for your query but you can try this

Use a Web Preview Environment

To allow non-developer team members to edit and preview Builder content, you can create a web-based preview environment that mimics the mobile UI using the same React Native components via React Native for Web, or any approximate mock version of the screen.

1. Set up a React (or Next.js) web app that renders your custom Builder components.
2. Use Builder’s SDK to render content using the same model used in your mobile app:

// pages/preview.tsx (example using Next.js)
import { BuilderComponent, builder } from '@builder.io/react';
import { useEffect, useState } from 'react';

builder.init('YOUR_PUBLIC_API_KEY');

export default function PreviewPage() {
  const [content, setContent] = useState(null);

  useEffect(() => {
    builder
      .get('page', {
        userAttributes: {
          urlPath: '/native-app-home', // This matches your targeting rule
        },
      })
      .toPromise()
      .then((data) => setContent(data));
  }, []);

  return (
    <div>
      {content ? (
        <BuilderComponent model="page" content={content} />
      ) : (
        'Loading preview...'
      )}
    </div>
  );
}

3. Set this web URL as the Preview URL in your “Content Models > Model > Options”.

This allows your team to visually edit and preview NativeApp US - Home screen content from Builder without needing access to a dev environment or mobile build.

Thanks,