Skip to main content

Mobile Architecture (React Native)

The mobile application GabaiSmart is a React Native app optimized for Android TV and Tablets. It serves as the display unit in the synagogue.

Key Technologies​

  • React Native (CLI workflow, not Expo Go).
  • React Navigation: For screen routing.
  • Redux Toolkit: State management (mirrors Client architecture).
  • Socket.IO Client: For real-time updates from the server.

Android TV Optimization​

The app is designed for "10-foot UI" experiences.

  • Navigation: Supports D-Pad (remote control) navigation.
  • Focus Management: Key elements (cards, buttons) have visible focus states.
  • Orientation: Locked to Landscape mode.
  • Keep Awake: Uses react-native-keep-awake to prevent screen sleep.

Screen Structure (src/screens)​

  • Main: The primary display loop (Tfila times, Messages, Zmanim).
  • Device: Setup screens.
    • DeviceSelectionScreen.tsx: Initial pairing/setup.
    • SmartTVMonitorScreen.tsx: Telemetry and monitoring view.
  • Times: Dedicated screens for viewing schedule tables.

Data Synchronization​

  1. Initial Load: Fetches full configuration (Times, Messages, Settings) via REST API on startup.
  2. Real-time: Listens to Socket.IO events (e.g., refreshData, message:new) to trigger background refreshes without interrupting the display cycle.