React Native Skeleton with Suspense | Moti Tutorial 2022

In this video, I show you how to build an animated skeleton loader in React Native with Moti for smooth, performant animations. We also integrate Suspense to handle data loading gracefully with a placeholder while content loads.

If you want to avoid blank screens and jarring loads, this tutorial walks from installing dependencies to custom skeleton components that adapt to light and dark mode.

What's inside

• Skeleton loaders and why apps use them
• Installing and configuring Moti and react-native-reanimated with Expo
• Building the Fallback component with Moti Skeleton
• Style tweaks: width, height, color, and radius
• Spacer component to separate skeletons
• Light and dark mode support for skeletons
• State to toggle light/dark mode with a button
• Basic Suspense integration for loading fallback

Skeleton loaders and why apps use them

A skeleton loader is an animated placeholder that mirrors loading content structure. Apps like Facebook, Twitter, and LinkedIn use them to avoid empty screens and feel faster. I explain what skeletons are and why they help while waiting on APIs or databases.

Our skeleton uses a moving gradient animation and adapts to light and dark themes.

Installing and configuring Moti and react-native-reanimated with Expo

We use Moti by Fernando Rojo, built on Reanimated 2. Create an Expo blank project, then install:

• yarn add moti
• expo install react-native-reanimated

Add the Reanimated plugin in babel.config.js:

plugins: ['react-native-reanimated/plugin']

Restart the Expo server after config changes.

Building the Fallback component with Moti Skeleton

Create a Fallback component with Moti's Skeleton for an animated placeholder. Start simple to see the base effect.

Skeleton accepts width, height, and colorMode for size and light/dark styling, reusable across the app.

Style tweaks: width, height, color, and radius

Adjust width, height, and radius for circles (e.g. radius={999} for avatars) or rectangles.

Use a Spacer component with a height prop to add vertical gap between skeleton rows.

Spacer component to separate skeletons visually

Spacer takes height and renders an empty view with that height to keep skeletons from stacking too tightly.

Simple pattern for cleaner loading layouts.

Light and dark mode support for skeletons

colorMode switches skeleton colors for light or dark backgrounds.

Light mode uses lighter skeleton tones; dark mode uses darker tones that read well on black backgrounds.

State to toggle light/dark mode with a button

useState tracks a dark boolean. A Pressable button toggles it so you can preview skeleton colors in both themes.

Useful for testing and apps with native dark mode support.

Basic Suspense integration for loading fallback

Suspense renders the Fallback skeleton until real content is ready, avoiding empty screens.

I focus on wiring Suspense with the skeleton rather than a full data-fetch example, but the pattern applies to async UI everywhere.

Resources

CourseReact Native course

Modern React Native patterns including animations and state management.