Restaurant Floor Plan UI in React Native Skia — Neon Glow + GPU Canvas

Restaurant Floor Plan UI in React Native Skia 🍽️

Stop building boring grid layouts. Move your architecture to the GPU canvas.

Why Skia

Standard React Native components hit their ceiling fast when you need pixel-perfect spatial layouts with animated neon glows. Skia gives you a hardware-accelerated canvas where every draw call runs on the GPU.

Neon ambient glow

// Skia BlurMask + Group opacity for the neon table glow
<Group opacity={glowOpacity}>
  <Circle cx={table.x * FLOOR_W} cy={table.y * FLOOR_H} r={TABLE_R + 12}>
    <Paint>
      <BlurMask blur={18} style="outer" />
    </Paint>
  </Circle>
</Group>

Responsive coordinate mapping

// table.x and table.y are percentages (0–1)
// multiply by canvas dimensions at render time
const cx = table.x * FLOOR_W;
const cy = table.y * FLOOR_H;

This makes the layout scale flawlessly on any screen size without a single pixel value hardcoded.

60fps pulse via Reanimated shared value

The glow opacity pulses using a Reanimated shared value driven by withRepeat(withSequence(...)). Skia reads the shared value directly via useDerivedValue — no bridge calls, no JS thread.

Stack: React Native · @shopify/react-native-skia · Reanimated 3 · TypeScript