Introduction

Why React Native?

We chose React Native to build a truly native mobile experience while maintaining a shared codebase with our web application. This approach allows us to:

• Share Logic: Reuse hooks, utilities, and business logic across web and mobile.
• Fast Iteration: Leverage Hot Module Replacement (HMR) and the vast React ecosystem.
• Native Performance: Render native UI components backed by platform-specific primitives on iOS and Android.

The Stack

Our native application is built on a robust foundation designed for scalability and user experience:

Expo

We utilize Expo for its world-class developer tooling.

• EAS (Expo Application Services): Handles our build and submission pipelines.
• Expo Router: Provides file-based routing similar to Next.js, making navigation intuitive.
• Prebuild: Allows us to use custom native code when necessary while staying in the managed workflow.

Privy

Authentication and wallet management are handled by Privy.

• Embedded Wallets: Seamlessly create and manage wallets for users without complex seed phrase management.
• Social Login: Easy onboarding with email, Google, Apple, and more.
• Security: Enterprise-grade security for user assets and data.

Biometric Authentication

Device-level security is provided through biometric authentication.

• Touch ID / Face ID: Secure authentication using device biometrics.
• Local Authentication: Uses Expo's LocalAuthentication API for platform-optimized security.
• State Management: Integrated with Zustand stores for persistent configuration and easy access.
• Privacy-First: Optional feature that users can enable/disable with granular controls.

Push Notifications

Real-time notifications keep users engaged and informed.

• Expo Notifications: Cross-platform push notification support.
• Backend Integration: Push tokens registered with the unified backend for targeted messaging.
• Rich Notifications: Support for custom titles, bodies, and data payloads.
• Permission Management: Transparent permission handling with user consent.
• Activity Tracking: Notifications can be sent based on user actions and system events.

Centralized Theming System

Our UI uses a centralized theming system that provides consistent styling across the app.

• Light & Dark Mode: Automatic device theme detection with manual override support.
• Type-Safe Colors: Access theme colors via useThemeColors() and theme selector hooks.
• Design Tokens: Consistent spacing, radius, typography, and color scales.
• Synchronized: Colors extracted from packages/ui/src/styles/globals.css for consistency with web apps.