Mobile App

Flexxy Drive Mobile

Expo and React Native mobility app for passenger ride booking, driver flows, wallets, location services, and incident resolution.

My role

Mobile engineer working on React Native app structure, role-aware navigation, location-powered ride flows, API integration, persisted state, wallet screens, and reusable mobile UI components.

Overview

Flexxy Drive Mobile is a cross-platform mobility app built with Expo, React Native, TypeScript, and native iOS/Android projects. The app supports public authentication screens, social login foundations, passenger and driver onboarding, role-aware post-login routing, map-driven ride flows, wallet screens, profile/settings, notifications, and a separate incident-resolution workflow for users with security or incident roles.

The passenger ride flow includes pickup and destination selection, location history stored locally, geocoding/reverse-geocoding support, fare lookup before booking, map previews, ride mode selection, seat controls, now/later scheduling, and a ride-search request that passes available drivers into the ride-options flow. Driver-facing screens include active/silent ride modes, ride-offer entry points, driver destination selection, document/profile access, non-paying-passenger handling, and an audio-helper entry point.

The app uses Redux Toolkit with redux-persist for auth, theme, localization, and ride-mode state; TanStack React Query for profile/bootstrap queries; API helper layers for authenticated requests and form-data uploads; and Expo Location plus React Native Maps for GPS and map interfaces. Some areas are visibly still being extended, including a sparse home shell and parts of the driver/ride workflow, so the strongest completed work is in the app shell, onboarding/navigation structure, location providers, passenger booking flow, wallet funding foundation, reusable components, theme/localization setup, and incident-resolution module.

Key Features

Authentication and Onboarding

Public screens for onboarding, intro, location permission, sign-in, sign-up, OTP, forgot/reset password, and mobile-number update.
Passenger verification/status screens and driver onboarding steps for driver information, car details, payments, next of kin, emergency contacts, documents, and verification status.
Google, Apple, and Facebook login foundations alongside email/phone signup flows.
Role-aware bootstrap fetches profile data and routes users into passenger, driver, or incident-resolution experiences.

Passenger Ride Flow

Pickup and destination entry with geocoding, reverse geocoding, address suggestions, and saved journey history.
Fare lookup before booking and storage of fare/currency in ride-mode state.
Map preview of pickup/destination, distance display, now/later scheduling, seat selection, and ride-mode constraints.
Ride search request that passes returned drivers into the ride-options screen.

Driver Flow

Driver active screen with map background, active/silent tabs, ride-mode selection, and navigation to driver destination and ride-offer screens.
Driver document/profile access and foundations for non-paying passenger handling and audio assistance.
Driver-specific onboarding routes for car details, payments, next of kin, emergency contacts, documents, and verification status.

Wallet and Payments

Wallet balance and transaction list screens with API-backed refresh behavior.
Fund-wallet flow with amount entry, quick amounts, card entry, Stripe payment-method creation, and top-up request handling.
Withdrawal screen entry point and wallet navigation from the main app.

Shared Mobile Systems

Redux Toolkit store with persisted auth, theme/localization, and ride-mode slices.
React Query profile/bootstrap hooks for user, passenger, verified passenger, and driver profiles.
Theme provider, NativeWind setup, i18n label files, custom font loading, and reusable UI primitives.
Incident-resolution workflow with internal/external navigation, report lists, report details, conversations, empty states, and downloadable report actions.

Technical Highlights

Expo/React Native setup with native iOS and Android projects, EAS config, Metro, TypeScript, and Jest Expo tooling.
React Navigation stack and bottom-tab structure for auth, onboarding, passenger, driver, wallet, settings, notification, chat, and incident-resolution routes.
LocationProvider and geocoding provider wrap the app to request foreground location permission, fetch current position, watch GPS updates, and translate coordinates into addresses.
Authenticated API helper layer handles GET, POST, PATCH, upload/form-data calls, 401 logout behavior, and reusable HTTP client patterns.
Passenger booking screens use maps, bottom sheets, date/time pickers, seat controls, ride-mode rules, fare state, and local journey history.
Wallet screens fetch balances and transactions, support pull-to-refresh, and include a Stripe card-payment top-up foundation.
Reusable UI system includes themed containers, text/input/button components, headers, bottom sheets, map components, loaders, toast config, pickers, badges, cards, and design-library primitives.

Tech Stack

Expo
React Native
TypeScript
React Navigation
Native Stack
Bottom Tabs
TanStack React Query
Redux Toolkit
redux-persist
AsyncStorage
Axios
Expo Location
React Native Maps
Gorhom Bottom Sheet
Stripe React Native
Formik
Yup
i18next
NativeWind
Firebase Auth
React Native Image Crop Picker
Jest Expo
EAS

Architecture

The app is organized around feature screens, React Navigation stacks, shared components, a design-library folder, Redux slices, React Query hooks, API helper modules, providers for location/geocoding, theme providers, i18n labels, and native iOS/Android configuration. App.tsx composes the location, geocoding, safe-area, React Query, Redux Persist, theme, navigation, and toast providers at the root.

Challenges and Solutions

Coordinating passenger, driver, and incident-resolution experiences in one app.

Solution: Used role-aware routing and separate navigator branches so standard users enter the main mobility app while security/incident users enter the incident-resolution workflow.

Making ride booking dependably location-aware.

Solution: Wrapped the app with location/geocoding providers and built booking screens around current position, address lookup, reverse geocoding, local history, fare lookup, and map previews.

Persisting mobile workflow state across app restarts.

Solution: Used Redux Toolkit with redux-persist and AsyncStorage for auth, theme/localization, and ride-mode state while React Query handles profile bootstrap requests.

Impact

Improved maintainability by separating navigation, providers, shared UI, API helpers, Redux slices, and feature screens.
Reduced repeated ride-flow state handling by centralizing fare, currency, route length, and ride mode in a dedicated store slice.
Created a reusable foundation for location-aware passenger and driver workflows that can be extended as the product matures.