The Challenge: Massive Point Clouds on Mobile Devices
Chronica wanted to build a visual memory and life-tracking app where an individual can visualize every day of their lifespan (representing over 29,000 days or nodes) on an infinite zoomable 2D canvas.
Rendering 29,000 individual native DOM/UI views in React Native immediately exhausts mobile memory and causes severe frame drops down to 10 FPS during pinch-to-zoom gestures. The challenge was to deliver fluid 60 FPS gesture responsiveness across both budget Android handsets and modern iPhone displays without draining the battery.
Technical Architecture: GPU Batching with Shopify Skia
To bypass the standard React Native view tree bottleneck, we bypassed standard components and wrote a high-performance 2D canvas engine using Shopify React Native Skia.
By computing camera matrices on the native thread with React Native Reanimated 3 and executing spatial bounding-box culling, the engine renders only the nodes currently inside the active viewport. All 29,000 nodes are transformed into GPU vertex arrays, achieving silky smooth 60 FPS transitions.
Key Systems Engineered
-
Gesture Physics & Smooth Zooming:
Inertial pan and pinch gestures running entirely on the UI thread with zero bridge serialization overhead.
-
Django REST Framework Backend:
High-throughput Python/Django backend handling JWT authentication, daily streak tracking, and automated milestone reminders.
-
Firebase FCM Push Notifications:
Timezone-aware habit reminders dispatched at user-configured evening reflections with rich interactive alerts.