React Native Neumorphic Design with Skia | Tutorial 2022

Learn how to create neumorphic design in React Native with Skia, which draws high-performance native graphics. It is ideal if you want modern, soft UI effects beyond standard styles or static images.

You will see how to configure a React Native Expo bare workflow project for Skia, build clock and alarm components with light and shadow, and handle dimensions so the layout adapts to any device.

What's inside

• Introduction and neumorphic design demo with Skia
• Project setup with Expo bare workflow
• Installing and using Skia in React Native
• Component organization: clock and alarm folders
• Canvas creation and device dimensions
• Drawing background and main circle with Skia
• Shadows and effects for neumorphic style
• Position and color tweaks to polish the design

Introduction and neumorphic design demo with Skia

I start with the neumorphic design we will build: a clock with scrollable alarms. The focus is design, with basic functionality so it feels realistic. Neumorphism uses soft light and shadow for a raised, modern look.

This style works well for clean interfaces. Skia renders these effects with high performance in React Native, avoiding limits of native styles or bitmaps.

Project setup with Expo bare workflow

Skia does not work in Expo managed workflow, so we create the app with Expo bare workflow via expo init and the minimal template. That allows native dependencies like Skia.

Install Skia with npm or yarn, open the project in Visual Studio Code, and run with yarn ios or yarn android. That prepares the environment for Skia.

Installing and using Skia in React Native

After installation, import Canvas, Box, BoxShadow, and Fill from @shopify/react-native-skia. Canvas is the drawing surface.

Size the canvas with Dimensions.get('window') for device width and height so it fills the screen or your target area.

Component organization: clock and alarm folders

I organize code in a components folder with alarm and clock subfolders. Alarms live at the bottom; the main clock at the top.

That keeps the project tidy and lets you work on each part separately.

Canvas creation and device dimensions

In ClockBack I export a canvas sized to the full device width and height so background and elements render correctly.

Dimensions.get('window') supplies width and height. Without explicit dimensions the canvas may not render properly.

Drawing background and main circle with Skia

Fill sets a light gray background for the neumorphic base. A Box with equal width and height and borderRadius forms the main circle.

The circle is centered horizontally and offset 70px from the top, adjusting X by half the circle width for perfect centering.

Shadows and effects for neumorphic style

Neumorphism relies on soft shadows. BoxShadow adds offset, blur, and semi-transparent gray color.

Example values: dx=19, dy=25, blur=92, with a gray color at reduced opacity to simulate light and depth.

Position and color tweaks to polish the design

Fine-tune position with calculated values and light hex colors for background and shadows.

Use zIndex and absolute positioning so the background sits behind the circle. These details make the neumorphic look professional and clean.

Resources

CourseReact Native course

React Native fundamentals and practical patterns for professional apps.

YouTubeReact Native Neumorphic Design with Skia | Tutorial 2022

Official video to follow this neumorphic Skia tutorial step by step.