Connect to deployed/production react native application

Technical Questions
, , ,
6

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>
  );
}
  1. 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,