Building a React Native App with Expo, Supabase, and TypeScript: A Comprehensive Native Project
by Danger Ro, Senior Developer
Earlier this year, I embarked on a project to build a React Native application from scratch. The result was a comprehensive, bespoke native solution: a Race Entry Platform for marathons and similar events. The app was designed with a robust feature set that allowed users to browse races, register and pay for entries, favorite events, schedule them on a personal calendar, and connect with other users through messaging.
Drawing on prior experience in event platforms, the goal was to create a polished, flexible, and scalable application tailored to the needs of both event organizers and participants. Here’s how the development unfolded.
EXPO: The Ideal Starting Point for React Native
React Native’s flexibility is a key strength, and EXPO serves as an excellent foundation for any project. EXPO simplifies the initial setup and handles much of the heavy lifting, including device compatibility, over-the-air updates, and the ever-dreaded build errors.
What EXPO Handles Well
- Fast Initialization: With
expo init
, I was writing functional code within minutes. - Testing on Devices: Using Expo Go, I could instantly test the app on real devices, speeding up the iteration process.
- Rich Ecosystem: EXPO provides built-in libraries for push notifications, image pickers, and more, reducing the need to install third-party dependencies.
However, as the project progressed, the limitations of EXPO became evident. Advanced native functionality required ejecting from EXPO’s managed workflow, bringing Xcode and Android Studio into play. While this added complexity, it was essential to deliver the level of customization needed for this platform.
Handling State: Balancing Server-Side and Local Needs
State management is the backbone of any app. For the Race Entry Platform, this meant carefully distributing state between server-side data and device-specific storage.
Server-Side vs. Device-Specific State
In mobile development, determining what stays on the server and what resides locally is crucial for both performance and user experience. For this app, I chose to store user-specific activities—like favorites and offline functionality—on the device using Async Storage. This ensured that users could access their activities and interact with core features even without an internet connection.
This approach aligns with industry best practices for building resilient apps that maintain functionality in low-connectivity scenarios. Async Storage remains a trusted option for lightweight, device-specific data.
Redux and RTK Query
For global state management, Redux proved its enduring value. Redux’s structured approach made it easier to handle complex state transitions, while RTK Query offered powerful server-state management features, such as caching and streamlined API integrations.
However, I ultimately chose the classic Redux approach—action creators, reducers, and custom services—because it provided a simpler, more maintainable solution for this particular application. Offline functionality and local storage requirements made this setup a better fit than RTK Query’s server-heavy focus.
TypeScript: A Modern Essential
TypeScript was a natural choice for this project. It has become the industry standard for modern JavaScript development, offering built-in type safety, enhanced developer tooling, and long-term maintainability.
Why TypeScript Matters
- Type Safety: Prevents runtime errors by catching issues during development.
- Improved Tooling: IDE features like intelligent autocomplete, refactoring, and inline documentation significantly speed up development.
- Future-Proofing: Well-defined types make the codebase easier to maintain and understand, particularly in collaborative environments.
In this project, TypeScript streamlined everything from integrating Supabase APIs to managing Redux state. It made debugging and refactoring a smoother process and reduced the likelihood of hidden bugs.
Supabase: The Backend Engine
When building a backend, Supabase stood out as the ideal choice. As an open-source alternative to Firebase, Supabase combines scalability, ease of use, and ethical practices, avoiding vendor lock-in and opaque ecosystems.
Core Features of Supabase
- Authentication: Google, GitHub, email/password, and magic links are supported out of the box, simplifying user management.
- PostgreSQL Database: A robust, scalable database with a modern dashboard that’s easy to navigate.
- Real-Time Updates: Enables live data updates, perfect for features like registration status and chat messaging.
- Edge Functions: Allows for serverless functionality without the complexity of managing infrastructure.
Why Supabase Over Firebase?
While Firebase is popular, its proprietary nature and lack of flexibility can be limiting. Supabase provides an open-source, infinitely customizable alternative. It integrates seamlessly with TypeScript and scales effortlessly, making it a solid choice for modern app development.
Supabase allowed me to focus on app features rather than backend configurations, providing a smooth developer experience from start to finish.
What I Built: A Comprehensive Race Entry Platform
The Race Entry Platform wasn’t just functional—it was tailored to the needs of its users. Here’s what it offered:
- Event Listings: Users could browse marathons and races with detailed descriptions.
- Favorites: Events could be saved for quick access later.
- Registration and Payments: Stripe integration allowed seamless ticket purchases.
- Personal Calendar: Events could be scheduled and synced to personal calendars.
- Messaging: A chat feature enabled participants to connect and share information.
The app leveraged Supabase for backend services and Redux for state management, ensuring both performance and reliability.
Lessons Learned
- EXPO Is a Great Starting Point: While EXPO simplifies initial development, advanced features require diving into native tooling. Be prepared to transition when the time comes.
- Balance Server and Local State: Carefully plan what data resides locally and what syncs with the server. This decision has a significant impact on performance and offline capabilities.
- TypeScript Is Non-Negotiable: Its benefits—type safety, better tooling, and maintainability—are indispensable for modern development.
- Supabase Delivers: It offers an ethical, scalable, and developer-friendly backend solution, standing out as a compelling alternative to Firebase.
- Mobile Development Is Rewarding: Creating something tangible and useful for users is uniquely satisfying, and modern tools make it more accessible than ever.
Final Thoughts: Why React Native Stands Out
This project began as a technical refresher and evolved into a fully realized platform. React Native, paired with EXPO, Supabase, and TypeScript, offered the perfect combination of flexibility, performance, and developer experience.
While I explored other platforms, including Swift and Flutter, neither impressed me enough to switch. Swift felt limiting for cross-platform use, and Dart, despite its efficiency, didn’t resonate as a language. React Native hit the sweet spot, providing the tools I needed to deliver a polished, functional application.
For developers considering mobile development in 2025, React Native remains a top choice. With a strong ecosystem and modern tooling, it’s easier than ever to bring ideas to life. With the right approach and tools, creating something impactful is well within reach.