Case Study

RexVet iOS & Android App

React Native Mobile Application

Executive Summary

The RexVet mobile app delivers a complete pet telehealth experience across iOS and Android from a single React Native codebase. This case study focuses specifically on the mobile application layer — navigation architecture, native module integration, cross-platform optimizations, and the decisions that made a single codebase feel native on both platforms.

iOS + Android

Platforms

Single RN

Codebase

< 35 MB

App Size

iOS 14 / API 29

Min OS

Mobile Architecture

The app follows a feature-first architecture where each domain (auth, consultations, chat, profile) is an independent module with its own screens, components, state, and native bridge code. A shared core handles navigation, theming, API clients, and platform abstractions.

  • Feature Modules: Each domain (Auth, Consultations, Chat, Profile) encapsulated with screens, components, hooks, and API slices. Modules are lazy-loaded where possible to keep initial bundle size under 35 MB.
  • Native Bridge Layer: Platform-specific native modules for WebRTC, camera, microphone, and push notifications are abstracted behind a TypeScript interface. Feature modules call the abstraction; platform code handles the implementation.
  • State Management: Zustand for client state (UI, navigation, form state) and React Query/TanStack Query for server state (consultations, messages, user data). This separation keeps optimistic updates and cache invalidation predictable.
  • Offline-First Data: SQLite for local persistence with a sync queue. Messages composed offline are stored locally and sent when connectivity resumes. Consultation history is available offline for reference.

Core Features & Implementation

Unified Navigation System

React Navigation with a custom tab bar and deep linking configuration. The app uses a stack+tab hybrid: authentication flow sits outside the tab navigator, while the main experience (home, consultations, profile) lives in a bottom tab layout with nested stacks for each section.

WebRTC Video Integration

Native WebRTC module integration for peer-to-peer video calls. Platform-specific implementations handle camera permissions, microphone access, and background audio. Adaptive bitrate streaming adjusts quality based on network conditions.

Real-Time Chat

Socket-based messaging system with 48-hour follow-up windows per consultation. Supports text, image sharing from gallery/camera, and document attachments. Messages are persisted locally with SQLite for offline access and synced when connectivity returns.

Express Async Video Submission

An alternative to live calls: users record and submit a video of their pet with structured symptom selection. The video is compressed on-device before upload, and a push notification alerts the user when a vet responds (typically within 15 minutes).

Cross-Platform Animations

Framer Motion and Reanimated-powered transitions for a native feel on both platforms. Shared element transitions between list views and detail screens, skeleton loading states, and gesture-driven interactions (swipe to dismiss, pull to refresh).

Push Notification Architecture

APNs for iOS and FCM for Android, unified through a single abstraction layer. Notifications cover: new chat messages, vet assignment, prescription ready, appointment reminders, and Express video responses. Notification deep linking navigates users to the exact screen.

Key Technical Decisions

React Native (CLI)

Chosen over Expo for full native module access — WebRTC, camera, microphone, and background audio all require native bridge code. The trade-off of manual build configuration was worth it for the control over platform-specific features.

React Navigation (v6+)

Deep linking configuration maps every notification type to a specific screen path. The linking config is shared between both platforms and tested with physical devices to ensure correct routing from cold start, background, and foreground notification taps.

WebRTC Native Module

react-native-webrtc with a thin platform abstraction layer. iOS uses native AVFoundation capture, Android uses CameraX. A STUN/TURN server handles NAT traversal, and connection state is surfaced to JS via an event emitter for UI feedback.

Reanimated + Gesture Handler

UI thread animations for 60fps transitions. Shared element transitions, swipe gestures, and animated tab bar indicators run on the UI thread to avoid JS bridge bottlenecks on low-end devices.

SQLite Local Storage

Chat messages and consultation history persisted locally with react-native-sqlite-storage. The app works offline for reading past consultations and queued messages sync when connectivity is restored via NetInfo listeners.

Fastlane + CodePush

Fastlane handles beta distribution via TestFlight (iOS) and internal track (Android). CodePush enables over-the-air JS bundle updates for critical fixes without going through app store review cycles.

01

Navigation & Routing Foundation

Set up React Navigation with deep linking configuration. Auth flow (sign-up, login, onboarding) sits outside the main tab navigator. Each tab (Home, Consultations, Profile) has its own nested stack for screen-level navigation within sections.

02

Core Feature Modules

Implemented WebRTC video calling, real-time chat, and Express video submission as independent feature modules. Each module handles its own state management, native bridge calls, and platform-specific configuration (permissions, background modes, push notification categories).

03

Cross-Platform Polish

Platform-specific gesture handling, safe area insets, keyboard avoidance, and navigation bar styling. iOS gets native large titles and haptic feedback; Android gets Material ripple effects and back button handling. Framer Motion animations bridge the feel between platforms.

Outcome

The RexVet mobile app ships to both App Store and Google Play from a single React Native codebase while maintaining platform-native look and feel. The feature-module architecture keeps the codebase maintainable as new capabilities are added, and the native bridge abstraction layer enables platform-specific WebRTC, camera, and notification implementations without leaking platform concerns into shared code.

Deep linking from push notifications, offline message support, and adaptive video streaming make the app reliable across varying network conditions and device capabilities. The combination of Fastlane for CI/CD distribution and CodePush for hotfixes keeps the release cycle fast without compromising on app store compliance.