React Native Skeleton with Suspense | Moti Tutorial 2022

A blank screen while data loads makes your app feel broken. Skeleton loaders are how Facebook, Twitter, and LinkedIn make waiting feel fast, and Moti makes them easy in React Native. In the video I build an animated skeleton with a moving gradient, adapt it to light and dark mode, and wire it into Suspense as the loading fallback.

What's inside

• Install Moti and react-native-reanimated in an Expo project
• Build a reusable Fallback component with Moti's Skeleton
• Shape skeletons with width, height, and radius={999} for avatars
• Add a Spacer component to keep skeleton rows breathing
• Switch skeleton tones for light and dark mode with colorMode
• Use Suspense to show the skeleton until content is ready

Resources

CourseReact Native course

Go deeper in the Animations & Gestures section: 62 minutes on Reanimated and gestures.