Najeeb Said

SwipeTech · 2024 – present

Dubai Daily Deals

Consumer mobile application for Dubai deal-seekers, offering geo-fenced deals, event ticketing, and interactive merchant maps.

deep link
auth gate
intent replay
React Native·TypeScript·TanStack Query·Zustand·Reanimated

Problem

A React Native 0.73 codebase with thirty native dependencies, several abandoned upstream. The interactive map dropped frames when rendering ~1,800 native markers, and pins vanished on Android screen focus. Unauthenticated deep links redirected users to the sign-in screen without persisting their destination.

Approach

Planned the React Native 0.84 upgrade across four revert-friendly sessions: built a native dependency compatibility matrix, applied mechanical commits, resolved ten distinct runtime issues under Fabric and TurboModules, and updated the iOS AppDelegate from Objective-C to Swift.

Offloaded map rendering bottlenecks from native views to JavaScript using supercluster for pin clustering, derived zoom levels via Mercator projections, and separated viewport state from marker state. Rendered map pins as native Image children to eliminate Android pin-drop bugs.

Implemented a navigation intent middleware that gates deep-link targets against authentication rules, stashes destination routes during guest sessions, and replays navigation post-login. Established an OTA deployment pipeline via Stallion/EAS with sourcemap and Sentry debug ID chaining.

Technical Decisions

  1. Four-phase upgrade over monolithic migration

    Splitting the RN 0.73 to 0.84 migration across four sessions isolated native regressions to single causes. Identified and documented a Fabric hazard where negative z-index gradient layers break silently under the new renderer.

  2. JavaScript-side marker clustering with supercluster

    Replaced per-marker native view creation with supercluster aggregation, collapsing thousands of map markers into a few dozen visible cluster nodes. Handled one-frame tracksViewChanges warm-up to prevent empty bubble snapshots.

  3. Intent stashing and replay middleware for auth gates

    Intercepted unauthenticated deep links targeting restricted routes, stashed the resolved navigation state, and replayed the intent upon successful session creation.

  4. Hermes sourcemap chaining with Sentry debug IDs

    Automated OTA bundle publishing scripts to compose Hermes sourcemaps with Sentry debug IDs, keeping stack traces symbolicated across over-the-air releases.

Key Achievements

  • Upgraded React Native from 0.73.6 to 0.84.1 with Fabric and TurboModules enabled.
  • Reduced perceived application latency by ~40% by migrating state management to TanStack Query and Zustand.
  • Engineered 22 deep-linking routes with intent-stashing middleware that survives auth walls.
  • Clustered ~1,800 native map markers into ~20–50 viewport bubbles with supercluster and Mercator zoom derivation.
  • Implemented client-side 5-minute event deduplication window for GA4, reducing Firebase Analytics ingestion costs.

Outcome

The app operates on React Native 0.84 with the New Architecture enabled, rendering clustered map pins without frame drops, preserving deep-link intents through auth gates, and outputting symbolicated crash reports on OTA updates.