KrikoriosandClaude Opus 5
59e336c23d
The Android map never drew because mapType was "mutedStandard", an Apple Maps value. Android's MapManager looks the name up in a fixed table and unboxes the result into an int, so an unrecognised value threw a NullPointerException in the native view manager before any tile rendered. Android now gets "standard" plus a customMapStyle that mutes POI and transit labels, since showsPointsOfInterest is iOS-only too. Location hung indefinitely: getCurrentPositionAsync was called with no accuracy and no timeout, so it waited for a GPS fix that never arrives indoors or on an emulator with no mock location. useUserLocation now takes a cached fix first for an immediate render, caps the precise reading at 15 seconds, and checks device location services separately from app permission. Reverse geocoding moved off the critical path so a failed lookup costs the address label rather than the coordinates. The single boolean became five states, each with its own notice and either a retry or a settings shortcut, since retrying a hard denial does nothing. Map also no longer deletes itself when the driver fetch fails or the location is still pending: drivers are an overlay, and calculateRegion already falls back to Beirut. Adds a four-tile service selector above Recent Rides - Car, Moto, Courier, My Car - with the choice held in useServiceStore for the booking flow to read. English only for now; the intended Arabic names are recorded in constants/services.ts for the language pass. Selection styling matches the role picker on sign-up so the two read as one control. app.config.js layers the Google Maps key and expo-location permission strings onto app.json. No effect under Expo Go, which ignores native config, but required for the first EAS build. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Ryde - A Full Stack Uber clone using React Native and Expo
📔 Table of Contents
‼️ Folder Structure
Here is the folder structure of Ryde.
uber-clone/
|- .eas/
|-- workflows/
|- app/
|-- (api)/
|-- (auth)/
|-- (root)/
|-- _layout.tsx
|-- +html.tsx
|-- index.tsx
|- assets/
|- components/
|-- custom-button.tsx
|-- driver-card.tsx
|-- google-text-input.tsx
|-- input-field.tsx
|-- map.tsx
|-- oauth.tsx
|-- payment.tsx
|-- ride-card.tsx
|-- ride-layout.tsx
|- config/
|-- index.ts
|- constants/
|-- index.ts
|- lib/
|-- auth.ts
|-- fetch.ts
|-- map.ts
|-- utils.ts
|- scripts/
|-- reset-project.js
|- store/
|-- index.ts
|- types/
|-- image.d.ts
|-- type.d.ts
|- .env.example
|- .env/.env.local
|- .eslintrc.js
|- .gitignore
|- app.json
|- babel.config.js
|- bun.lockb
|- eas.json
|- environment.d.ts
|- nativewind-env.d.ts
|- package.json
|- tailwind.config.js
|- tsconfig.json
🧰 Getting Started
- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Create
.envfile in root folder. - Contents of
.env:
# .env
# clerk publishable key
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE
# postgres db url (neon db)
DATABASE_URL="postgresql://username:password@hostname:port/uber-clone?sslmode=require"
# expo api server url (you can set it to any random url for development)
EXPO_PUBLIC_SERVER_URL="https://example.com/"
# geoapify api key
EXPO_PUBLIC_GEOAPIFY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# google api key
EXPO_PUBLIC_GOOGLE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# areeba payment gateway (credentials issued after merchant onboarding)
AREEBA_API_BASE_URL="https://your-gateway-host.areeba.com"
AREEBA_MERCHANT_ID=your_merchant_id
AREEBA_API_PASSWORD=your_api_password
AREEBA_API_VERSION=100
-
Open terminal in root directory. Run
npm install --legacy-peer-depsoryarn install --legacy-peer-deps. -
Install Expo Cli using
npm i -g expo-clioryarn global add expo-clito run your Expo app.
7. Clerk Publishable Key
- Go to the Clerk Dashboard.
- Sign in or sign up if you don’t have an account.
- Create a new application (or select your existing project).
- Navigate to the "API Keys" section.
- Copy the Publishable Key that starts with
pk_test_. - Add it to your
.envfile:
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE
8. PostgreSQL Database URL (Neon Database)
- Go to the Neon Dashboard.
- Sign in or create an account.
- Create a new project.
- Once the project is created, go to the "Connection Details" section.
- Copy the connection string and replace the placeholder values with your actual database credentials.
- The URL will look something like this:
DATABASE_URL="postgresql://username:password@hostname:port/uber-clone?sslmode=require"
Replace username, password, hostname, and port accordingly.
9. Expo API Server URL
- This can be any URL during development.
- Set it to a random URL for local testing:
EXPO_PUBLIC_SERVER_URL="https://example.com/"
10. Geoapify API Key
- Go to the Geoapify Dashboard.
- Sign up or log in to your account.
- Navigate to the "API Keys" section under your profile.
- Generate a new API key.
- Copy the key and add it to your
.envfile:
EXPO_PUBLIC_GEOAPIFY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
11. Google API Key
- Go to the Google Cloud Console.
- Create a new project (or use an existing one).
- Navigate to the "APIs & Services" section and enable the required APIs (Places API, Directions API).
- Go to the "Credentials" tab and click on "Create Credentials."
- Select "API Key."
- Copy the generated API Key and add it to your
.envfile:
EXPO_PUBLIC_GOOGLE_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
12. Areeba Payment Gateway
- Contact Areeba to open a merchant account (Lebanon).
- After onboarding, Areeba provides your gateway host, merchant ID, API password, and integration docs.
- Add them to your
.envfile:
AREEBA_API_BASE_URL="https://your-gateway-host.areeba.com"
AREEBA_MERCHANT_ID=your_merchant_id
AREEBA_API_PASSWORD=your_api_password
AREEBA_API_VERSION=100
- Now app is fully configured 👍 and you can start using this app using
expo start.
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
📷 Screenshots:
⚙️ Tech Stack
🙌 Contribute
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
💎 Acknowledgements
Useful resources and libraries that are used in Ryde:
- @babel/core: ^7.20.0
- @clerk/clerk-expo: ^2.2.5
- @expo/metro-runtime: ~3.2.3
- @expo/vector-icons: ^14.0.2
- @gorhom/bottom-sheet: ^4.6.4
- @neondatabase/serverless: ^0.9.4
- @react-navigation/native: ^6.0.2
- @stripe/stripe-react-native: ^0.38.4
- @types/jest: ^29.5.12
- @types/react: ~18.2.45
- @types/react-test-renderer: ^18.0.7
- eslint: ^8.57.0
- eslint-config-expo: ^7.1.2
- eslint-config-prettier: ^9.1.0
- eslint-plugin-prettier: ^5.2.1
- expo: ~51.0.28
- expo-constants: ~16.0.2
- expo-font: ~12.0.9
- expo-linking: ^6.3.1
- expo-location: ^17.0.1
- expo-router: ~3.5.23
- expo-secure-store: ^13.0.2
- expo-splash-screen: ~0.27.5
- expo-status-bar: ~1.12.1
- expo-system-ui: ~3.0.7
- expo-web-browser: ~13.0.3
- jest: ^29.2.1
- jest-expo: ~51.0.3
- nativewind: ^2.0.11
- prettier: ^3.3.3
- react: 18.2.0
- react-dom: 18.2.0
- react-native: 0.74.5
- react-native-gesture-handler: ^2.19.0
- react-native-google-places-autocomplete: ^2.5.6
- react-native-maps: ^1.18.0
- react-native-maps-directions: ^1.9.0
- react-native-modal: ^13.0.1
- react-native-reanimated: ~3.10.1
- react-native-safe-area-context: 4.10.5
- react-native-screens: 3.31.1
- react-native-swiper: ^1.6.0
- react-native-web: ~0.19.10
- react-test-renderer: 18.2.0
- stripe: ^16.9.0
- tailwindcss: 3.3.2
- typescript: ~5.3.3
- zustand: ^4.5.5
☕ Buy Me a Coffee
🚀 Follow Me
📚 Learn more
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
⭐ Give A Star
You can also give this repository a star to show more people and they can use this repository.