React Native Neumorphic Design with Skia | Tutorial 2022

Soft shadows, raised surfaces, that clean neumorphic look: standard React Native styles can't really pull it off. Skia can, because it draws native graphics at full performance. In the video I build a neumorphic clock with scrollable alarms, shadow by shadow.

If you want your UI to feel designed instead of assembled, this is a fun place to start.

What's inside

• Why Skia needs the Expo bare workflow and how to set it up
• Canvas, Box, BoxShadow, and Fill from @shopify/react-native-skia
• Sizing the canvas with device dimensions so it renders anywhere
• Centering the main clock circle with simple math
• Real shadow values (dx 19, dy 25, blur 92) that sell the depth
• Color and position tweaks that make it look professional

Resources

CourseReact Native course

The Style & Design section covers 80 minutes on Figma workflow, design systems, and dark mode.