Rebuild a Lovable App in Expo / React Native

What transfers from a Lovable app to Expo without rewriting?

Your Supabase client setup, all data-fetching logic, authentication flows, API calls to third-party services, form validation logic, and state management code transfer almost unchanged. These are JavaScript/TypeScript modules with no DOM dependency — React Native runs them identically. What does not transfer is anything that renders HTML: every JSX component, all Tailwind/CSS classes, and any browser API calls.

Concretely: your `supabase.ts` client file, your Zustand or React Query stores, your API utility functions, your type definitions, and your server-side logic (Supabase Edge Functions) all copy over with no changes. These typically represent 30–50% of a Lovable project's codebase by file count.

What must be rebuilt: every `<div>`, `<p>`, `<button>`, `<input>`, `<form>`, and `<img>` tag must become a React Native equivalent — `<View>`, `<Text>`, `<Pressable>`, `<TextInput>`, `<ScrollView>`, `<Image>`. Every Tailwind class must become a StyleSheet object or a NativeWind class. Navigation (React Router in Lovable) must be replaced with Expo Router or React Navigation.

When is an Expo rebuild actually worth the cost over Capacitor?

An Expo rebuild is worth the cost when your app's value depends on native-feel interactions that a WebView cannot deliver: 60fps gesture-driven animations, complex navigation transitions between screens, continuous background location or audio, Bluetooth peripheral communication, or AR features via ARKit/ARCore. For dashboards, booking flows, forms, and data displays, Capacitor delivers a satisfactory experience at a fraction of the rebuild cost.

The honest test: open your Lovable app on a real iPhone. If it feels responsive and smooth on mobile Safari, a Capacitor wrapper will feel the same in the App Store. If scrolling lags, animations stutter, or the user experience obviously needs native touch handling, that is the signal to consider Expo.

Consumer-facing social apps, fitness trackers, real-time collaboration tools, and games benefit most from native rendering. B2B SaaS, internal tools, booking platforms, and content dashboards almost never need it. The cost difference is significant: Capacitor integration runs $2k–$8k, while an Expo rebuild of the same Lovable app runs $8k–$30k+.

How does the Expo managed workflow simplify the build pipeline?

Expo's managed workflow abstracts iOS and Android build toolchains through EAS Build — a cloud service that compiles your React Native code into a signed binary without requiring Xcode or Android Studio locally. You push your code to EAS, receive a download link for the .ipa or .apk, and submit it directly from the CLI. This removes one of the highest-friction parts of mobile development for engineers without iOS/Android experience.

1. Install the Expo CLI: `npm install -g eas-cli`.
2. Create a new Expo project: `npx create-expo-app MyApp --template blank-typescript`.
3. Install Expo Router for file-based navigation: `npx expo install expo-router`.
4. Copy your Supabase client setup, data hooks, and business logic from your Lovable project.
5. Rebuild each screen using React Native primitives. Use NativeWind (`npm install nativewind`) to apply Tailwind classes to React Native components if your team prefers Tailwind syntax.
6. Run the app locally with `npx expo start` and test on iOS Simulator and Android Emulator.
7. Configure EAS Build: `eas build:configure` to set up `eas.json`.
8. Build for iOS: `eas build --platform ios --profile production`.
9. Build for Android: `eas build --platform android --profile production`.
10. Submit directly to App Store Connect: `eas submit --platform ios`.

How do I migrate Supabase auth from Lovable to Expo?

Supabase authentication in React Native requires the AsyncStorage adapter instead of the browser's localStorage. The Supabase JS v2 client accepts a custom storage adapter — swap the default browser storage for `@react-native-async-storage/async-storage` and your existing auth logic works without further changes. OAuth providers require Expo's `expo-auth-session` package for the redirect flow.

1. Install dependencies: `npx expo install @supabase/supabase-js @react-native-async-storage/async-storage`.
2. Create your Supabase client with the AsyncStorage adapter: pass `storage: AsyncStorage` in the auth options.
3. For OAuth (Google, GitHub): install `expo-auth-session` and `expo-web-browser`. Use `makeRedirectUri` to generate a redirect URI that opens your app after the OAuth flow.
4. Register the redirect URI in your Supabase Auth settings under Allowed Redirect URLs.
5. Test email/password login and confirm the session persists across app restarts — AsyncStorage survives app closure, unlike in-memory storage.
6. Test OAuth by triggering a sign-in and confirming the browser redirect returns to the app with a valid session.

What does a realistic Expo rebuild timeline look like?

A Lovable app with 8–12 screens, Supabase auth, and basic CRUD operations realistically takes 6–10 weeks to rebuild in Expo by an engineer experienced with React Native. The majority of time goes into screen-by-screen UI translation, navigation setup, and device testing — not into data layer work, which is largely a copy-over. Complex apps with real-time features, maps, or in-app payments add 2–6 weeks.

Week 1–2: Project setup, Expo Router navigation structure, Supabase auth integration, design system setup with NativeWind or a native component library.

Week 3–6: Screen-by-screen UI rebuild. A single complex screen (dashboard with charts, a multi-step form, a feed with infinite scroll) takes 2–5 days. Simple list screens take half a day.

Week 7–8: Native API integrations — push notifications via `expo-notifications`, camera if needed, device storage, deep linking.

Week 9–10: End-to-end testing on real devices, fixing platform-specific layout differences between iOS and Android, EAS Build configuration, App Store submission preparation.