Animating Content Placeholders in React Native with Moti
Content placeholders, sometimes called “skeletons” are ubiquitous in mobile apps and on the web today. They give your user something to see other than a blank screen or a generic spinner icon while they wait for your app’s content to load, and they prevent the transition from loading to loaded from being too jarring.
This type of component is fairly easy to create no matter which platform you’re using. The most time consuming part is creating the animation. Lucky for us React Native developers, Moti makes this step a breeze! The approach is slightly different depending on which style you want to create.
The “Sweeping Gradient” Style
We animate this type of content placeholder by translating the position of a gradient across our placeholder element.
This effect is very easy to achieve with Moti. We simply nest an SVG gradient in a MotiView component and create a looped timing animation to translate its position across the screen.
Here’s the full code for this screen:
You’re probably curious about how I came up with the gradient stops in this example. They’re generated by a bezier easing curve function to create a smooth gradient. You can read more about that process in my article Exploring Easing Gradients in React Native.
The “Color Pulse” style
Another popular animation style for content placeholders is what I call the “color pulse” style, where the elements animate in a loop from one color to another. Again, Moti makes this very simple to implement in React Native. It’s actually simpler than the gradient style.
Here, we can use an animated MotiView for our placeholder component itself.
And here’s the full code for this screen:
I hope this post has inspired you to create your own React Native content placeholders with Moti. As always, questions and comments are welcome on Twitter @useRNRocket. Follow me there and here on Medium for more React Native and Moti content!
