Welcome to your Rork app

Project info

This is a native cross-platform mobile app created with Rork

Platform: Native iOS & Android app, exportable to web Framework: Expo Router + React Native

How can I edit this code?

There are several ways of editing your native mobile application.

Use Rork

Simply visit rork.com and prompt to build your app with AI.

Changes made via Rork will be committed automatically to this GitHub repo.

Whenever you make a change in your local code editor and push it to GitHub, it will be also reflected in Rork.

Use your preferred code editor

If you want to work locally using your own code editor, you can clone this repo and push changes. Pushed changes will also be reflected in Rork.

If you are new to coding and unsure which editor to use, we recommend Cursor. If you're familiar with terminals, try Claude Code.

The only requirement is having Node.js & Bun installed - install Node.js with nvm and install Bun

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
bun i

# Step 4: Start the instant web preview of your Rork app in your browser, with auto-reloading of your changes
bun run start-web

# Step 5: Start iOS preview
# Option A (recommended):
bun run start  # then press "i" in the terminal to open iOS Simulator
# Option B (if supported by your environment):
bun run start -- --ios

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

What technologies are used for this project?

This project is built with the most popular native mobile cross-platform technical stack:

• React Native - Cross-platform native mobile development framework created by Meta and used for Instagram, Airbnb, and lots of top apps in the App Store
• Expo - Extension of React Native + platform used by Discord, Shopify, Coinbase, Telsa, Starlink, Eightsleep, and more
• Expo Router - File-based routing system for React Native with support for web, server functions and SSR
• TypeScript - Type-safe JavaScript
• React Query - Server state management
• Lucide React Native - Beautiful icons

How can I test my app?

On your phone (Recommended)

1. iOS: Download the Rork app from the App Store or Expo Go
2. Android: Download the Expo Go app from Google Play
3. Run bun run start and scan the QR code from your development server

In your browser

Run bun start-web to test in a web browser. Note: The browser preview is great for quick testing, but some native features may not be available.

iOS Simulator / Android Emulator

You can test Rork apps in Expo Go or Rork iOS app. You don't need XCode or Android Studio for most features.

When do you need Custom Development Builds?

• Native authentication (Face ID, Touch ID, Apple Sign In)
• In-app purchases and subscriptions
• Push notifications
• Custom native modules

Learn more: Expo Custom Development Builds Guide

If you have XCode (iOS) or Android Studio installed:

# iOS Simulator
bun run start -- --ios

# Android Emulator
bun run start -- --android

How can I deploy this project?

Publish to App Store (iOS)

1. Install EAS CLI:

   bun i -g @expo/eas-cli
   

2. Configure your project:

   eas build:configure
   

3. Build for iOS:

   eas build --platform ios
   

4. Submit to App Store:

   eas submit --platform ios
   

For detailed instructions, visit Expo's App Store deployment guide.

Publish to Google Play (Android)

1. Build for Android:

   eas build --platform android
   

2. Submit to Google Play:

   eas submit --platform android
   

For detailed instructions, visit Expo's Google Play deployment guide.

Publish as a Website

Your React Native app can also run on the web:

1. Build for web:

   eas build --platform web
   

2. Deploy with EAS Hosting:

   eas hosting:configure
   eas hosting:deploy
   

Alternative web deployment options:

• Vercel: Deploy directly from your GitHub repository
• Netlify: Connect your GitHub repo to Netlify for automatic deployments

App Features

This template includes:

• Cross-platform compatibility - Works on iOS, Android, and Web
• File-based routing with Expo Router
• Tab navigation with customizable tabs
• Modal screens for overlays and dialogs
• TypeScript support for better development experience
• Async storage for local data persistence
• Vector icons with Lucide React Native

Project Structure

├── app/                    # App screens (Expo Router)
│   ├── (tabs)/            # Tab navigation screens
│   │   ├── _layout.tsx    # Tab layout configuration
│   │   └── index.tsx      # Home tab screen
│   ├── _layout.tsx        # Root layout
│   ├── modal.tsx          # Modal screen example
│   └── +not-found.tsx     # 404 screen
├── assets/                # Static assets
│   └── images/           # App icons and images
├── constants/            # App constants and configuration
├── app.json             # Expo configuration
├── package.json         # Dependencies and scripts
└── tsconfig.json        # TypeScript configuration

Custom Development Builds

For advanced native features, you'll need to create a Custom Development Build instead of using Expo Go.

When do you need a Custom Development Build?

• Native Authentication: Face ID, Touch ID, Apple Sign In, Google Sign In
• In-App Purchases: App Store and Google Play subscriptions
• Advanced Native Features: Third-party SDKs, platform-specifc features (e.g. Widgets on iOS)
• Background Processing: Background tasks, location tracking

Creating a Custom Development Build

# Install EAS CLI
bun i -g @expo/eas-cli

# Configure your project for development builds
eas build:configure

# Create a development build for your device
eas build --profile development --platform ios
eas build --profile development --platform android

# Install the development build on your device and start developing
bun start --dev-client

Learn more:

• Development Builds Introduction
• Creating Development Builds
• Installing Development Builds

Advanced Features

Add a Database

Integrate with backend services:

• Supabase - PostgreSQL database with real-time features
• Firebase - Google's mobile development platform
• Custom API - Connect to your own backend

Add Authentication

Implement user authentication:

Basic Authentication (works in Expo Go):

• Expo AuthSession - OAuth providers (Google, Facebook, Apple) - Guide
• Supabase Auth - Email/password and social login - Integration Guide
• Firebase Auth - Comprehensive authentication solution - Setup Guide

Native Authentication (requires Custom Development Build):

• Apple Sign In - Native Apple authentication - Implementation Guide
• Google Sign In - Native Google authentication - Setup Guide

Add Push Notifications

Send notifications to your users:

• Expo Notifications - Cross-platform push notifications
• Firebase Cloud Messaging - Advanced notification features

Add Payments

Monetize your app:

Web & Credit Card Payments (works in Expo Go):

• Stripe - Credit card payments and subscriptions - Expo + Stripe Guide
• PayPal - PayPal payments integration - Setup Guide

Native In-App Purchases (requires Custom Development Build):

• RevenueCat - Cross-platform in-app purchases and subscriptions - Expo Integration Guide
• Expo In-App Purchases - Direct App Store/Google Play integration - Implementation Guide

Paywall Optimization:

• Superwall - Paywall A/B testing and optimization - React Native SDK
• Adapty - Mobile subscription analytics and paywalls - Expo Integration

I want to use a custom domain - is that possible?

For web deployments, you can use custom domains with:

• EAS Hosting - Custom domains available on paid plans
• Netlify - Free custom domain support
• Vercel - Custom domains with automatic SSL

For mobile apps, you'll configure your app's deep linking scheme in app.json.

Troubleshooting

App not loading on device?

1. Make sure your phone and computer are on the same WiFi network
2. Try using tunnel mode: bun start -- --tunnel
3. Check if your firewall is blocking the connection

Build failing?

1. Clear your cache: bunx expo start --clear
2. Delete node_modules and reinstall: rm -rf node_modules && bun install
3. Check Expo's troubleshooting guide

Need help with native features?

• Check Expo's documentation for native APIs
• Browse React Native's documentation for core components
• Visit Rork's FAQ for platform-specific questions

About Rork

Rork builds fully native mobile apps using React Native and Expo - the same technology stack used by Discord, Shopify, Coinbase, Instagram, and nearly 30% of the top 100 apps on the App Store.

Your Rork app is production-ready and can be published to both the App Store and Google Play Store. You can also export your app to run on the web, making it truly cross-platform.