[MOBILE] Interactive Vector Seating Chart Engine & Real-Time Spatial Canvas Renderer

[Yunusabdul38]

Target Location

apps/mobile/components/seating/SeatingCanvas.tsx, apps/mobile/components/seating/SeatNode.tsx, apps/mobile/hooks/useSeatingLayout.ts

Problem Statement

Reserved seating events require rendering complex venue maps with thousands of interactive seats (stages, sections, rows, individual seats) while maintaining a fluid 60 FPS mobile UI during panning, zooming, and seat selection.

Technical Requirements

1. High-Performance Vector Graphics Engine:
   • Implement a venue chart renderer using React Native Skia (@shopify/react-native-skia) or React Native SVG with native Gesture Handler & Reanimated v3.
   • Render up to 10,000 seats with dynamic spatial indexing (QuadTree / R-Tree) for viewport frustum culling.
2. Interactive Selection & Viewport Control:
   • Smooth 2D pinch-to-zoom (0.5x to 8x scale) and two-finger pan with momentum decay physics.
   • Real-time seat state rendering (Available = Accent, Reserved = Muted Gray, Selected = Vibrant Blue, VIP = Gold gradient).
3. WebSocket Real-Time Seat Locking:
   • Integrate WebSocket room subscriptions for live seat lock updates. When another user selects a seat, it locks instantly with a visual countdown timer across all mobile clients.
4. Accessibility Focus Traversal:
   • Build a screen-reader (TalkBack / VoiceOver) grid navigation layer allowing directional traversal across sections, rows, and seat numbers.

[guptakumarranjeet150]

Hi maintainers,

I would love to take this on. My planned approach:

• Deliver a clean, modular solution for [MOBILE] Interactive Vector Seating Chart Engine & Real-Time Spatial Canvas Renderer strictly following Agora-Events/agora conventions.
• Cover changes with automated tests ensuring CI passes smoothly.

Looking forward to contributing—please feel free to assign!