Building a Customizable Animated Skeleton Loader in React Native
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.
What you'll learn:
- Linear Gradient
- Masked View
- Reanimated 2
- Implement Animated Styles
Credits
Maggie AppletonCourse Content
You might also like these resources:
In this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.
In this series we'll be talking all about React Native. React Native allows you to build native iOS and Android applications in JavaScript and React.js.
You'll gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application