Restaurant Floor Plan UI in React Native Skia — Neon Glow + GPU Canvas
A premium restaurant floor plan on a hardware-accelerated Skia GPU canvas — neon ambient glow from BlurMask, responsive coordinate mapping (table.x × FLOOR_W), and 60fps pulse animations via Reanimated shared values. Dark theme.
About this build
Instead of a flexbox grid, this floor plan renders on a Skia canvas: neon table shapes, glow, and smooth pan and zoom. Flexbox runs out of road when a layout is spatial rather than stacked, and this is what the alternative looks like.
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
I’m available for freelance & contract React Native work — apps, features, UI implementation, you name it.
