React Native & Expo
The mobile half of every Mosayic project is a React Native app, scaffolded with Expo. This is by far the most common choice in the React Native ecosystem today, and for good reason.
What is React Native?
Section titled “What is React Native?”React Native lets you write a single JavaScript codebase that runs as a real, native app on both iOS and Android. It’s not a web view wrapper — your UI components compile down to actual native UIView (iOS) and View (Android) elements. Performance is genuinely close to native.
It’s been used in production by Meta, Discord, Shopify, Coinbase, Microsoft, and tens of thousands of others.
What is Expo?
Section titled “What is Expo?”Expo is a toolkit on top of React Native that fixes the parts that suck:
- Setup. Vanilla React Native requires Xcode, Android Studio, signing certificates, provisioning profiles, and a working Java toolchain just to run “Hello World.” Expo skips all of that for development.
- Native modules. Expo bundles a curated set of native packages (camera, file system, push notifications, secure storage, etc.) that work the same way on iOS and Android.
- Builds. Expo Application Services (EAS) builds your app in the cloud — no Mac required for Android, no Linux required for iOS, no toolchain to manage.
- Updates. Expo’s OTA (over-the-air) update system lets you push JavaScript-only changes without going through app store review.
Mosayic uses Expo’s bare workflow with expo-dev-client — meaning you have full access to native code if you ever need it (you can npx expo prebuild to expose the native iOS/Android folders), but for normal development you don’t have to touch them.
What you get out of the box
Section titled “What you get out of the box”The mobile template includes:
- Expo SDK 52+ with the standard config
- TypeScript with strict settings
- Expo Router for file-based navigation
- Supabase JS client wired up to your local Supabase
- Tab navigation with example Home and Profile screens
- Authentication flow (sign up, sign in, sign out) backed by Supabase Auth
- Theming with light/dark mode support
- Sample API call to your local FastAPI backend
- EAS build profiles for development, preview, and production
This is intentionally minimal. The Blueprint adds features one card at a time so you understand each piece.
Local development
Section titled “Local development”Day-to-day:
- Run
npm startinmobile/(or click Start dev server in the dashboard). - The Expo dev server bundles your code and serves it over your LAN.
- The dev build on your phone connects, downloads the bundle, and runs it.
- You edit files in VS Code; the dev server re-bundles automatically; your phone hot-reloads.
This loop is fast. Most JS-only changes appear in under a second.
When you change something native (e.g. add a new Expo module), you need to rebuild the dev client. EAS makes this a single eas build --profile development command.
Important Expo concepts
Section titled “Important Expo concepts”app.json / app.config.js
Section titled “app.json / app.config.js”Your app’s metadata: name, bundle ID, icon, splash screen, deep link scheme, supported platforms. Mosayic edits this for you when you set values in the dashboard, but you can also edit it directly.
expo-dev-client
Section titled “expo-dev-client”The development client (the build you install on your phone for development). It’s your app, just with a developer-mode JavaScript loader. Production builds don’t have it.
EAS Build
Section titled “EAS Build”Expo’s cloud build service. You run eas build --profile <profile> --platform <platform> and it produces a .ipa or .apk/.aab. Configured via eas.json.
EAS Submit
Section titled “EAS Submit”Optional, but recommended: eas submit uploads a built .ipa to App Store Connect or .aab to Play Console for you, instead of you doing it manually through Apple/Google’s web UIs.
EAS Update
Section titled “EAS Update”OTA updates for your JS bundle. Once your app is shipping, you can push bug fixes without waiting for Apple’s review queue. Configured via eas update --branch production.
Common questions
Section titled “Common questions”Can I use Native Modules that Expo doesn’t include?
Yes. Run npx expo prebuild to generate the native folders, then add the module like a vanilla React Native project. Then build a new dev client.
Can I use Tailwind CSS for styling? Yes — install NativeWind. It’s not in the template by default but is a popular addition.
Can I use a state library other than React’s built-in?
Yes. Zustand, Jotai, Redux Toolkit — anything works. Mosayic doesn’t ship one because most early-stage apps don’t need anything beyond useState + React Context.
What about web?
Expo can build for web too via expo-router and react-native-web. Mosayic doesn’t focus on this — for a marketing website, a separate static site (e.g. Astro, Next.js) is usually better.