Refining React Native Touch Events and Data Models

TL;DR

• Tackling layered touch events in React Native, issues arise when views aren’t strictly hierarchical.
• Deployed an event-driven architecture to handle non-parental modals without causing re-renders.
• Combined program and user data in complex UI cards, needing efficient API calls and data payloads.
• Refinement of architecture from last year focuses on efficient UI rendering and data management.

In preparation for my meeting, I decided to review last year’s challenges and how we’ve built upon them with our current model. Last year was all about managing touch gesture events within React Native for Android and iOS, particularly when dealing with nested touch events. This complexity arises when two views are layered, and the touch gets captured by one, preventing it from reaching the underlying view. The hierarchy wasn’t strictly parent-child but involved modals, which exist outside the main hierarchy in React, complicating event propagation.

Initially, we attempted to manage this by embedding modals within the React hierarchy to leverage context, but this approach proved inefficient. Every state update triggered re-renders across the hierarchy, causing performance degradation. Documentation didn’t offer much help, so we pivoted towards an event-driven architecture. This paradigm allowed us to manage data flow imperatively via a unified context, minimizing re-renders.

Fast forward to this year, our focus has shifted slightly yet remained rooted in the same architectural philosophy. We’ve extended our data model, now supporting educational programs and related user cohorts. The challenge lies in presenting this expanded data efficiently on screen, requiring predictable ordering and performance optimization due to its sheer volume.

Our current architecture builds upon last year’s groundwork, integrating both program and user data into the UI cards. Each card can launch a modal, presenting independently managed content. To achieve this, the modals call APIs that fetch specific program and user data—a task complicated by the need to handle payloads and references efficiently.

We’ve refined our event-driven solution. The architecture allows us to pass data seamlessly to non-hierarchical modals without triggering hierarchy-wide re-renders. It’s not standard in React but suits our needs perfectly. This single-context approach supports our need to manage modal data and interface cohesively.

With these refinements, we’re better equipped to handle complex UI challenges without sacrificing performance or clarity in our application’s UI. Stay tuned for how these developments continue to unfold.