Building a Customizable Animated Skeleton Loader in React Native
Offered By: egghead.io
Course Description
Overview
A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading.
In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.
Linear Gradient Expo | Pure React Native
Masked View Expo | Pure React Native
Reanimated 2 Expo | Pure React Native
This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).
The finished code for the skeleton loader (last 2 lessons) is available on Expo Snack.
In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.
Linear Gradient Expo | Pure React Native
Masked View Expo | Pure React Native
Reanimated 2 Expo | Pure React Native
This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).
The finished code for the skeleton loader (last 2 lessons) is available on Expo Snack.
Syllabus
- Create Linear Gradients in React Native Using React Native Linear Gradient
- Using React Native Linear Gradient for Making White Text Visible on Light Images
- Mask UI Elements in React Native With React Native Masked View
- Using Animated Style from Reanimated 2 to Animate a View
- Create a Skeleton Placeholder for your App Content
- Animating a Skeleton Loader using Reanimated 2
Taught by
Kadi Kraman
Related Courses
Creative, Serious and Playful Science of Android AppsUniversity of Illinois at Urbana-Champaign via Coursera Creative Programming for Digital Media & Mobile Apps
University of London International Programmes via Coursera Pattern-Oriented Software Architectures: Programming Mobile Services for Android Handheld Systems
Vanderbilt University via Coursera Introduction aux réseaux cellulaires
Institut Mines-Télécom via Independent Mobile Web Development
Google via Udacity