Maybe you’ve seen my other post, Lazy Loading Images in React Native, or maybe you haven’t. Either way, check that post out for some back-story on how I ended up resulting in me creating a package for a component that I find myself using on every project. That package, of course, is rn-progressive-image.
Hey there 👋
Maybe you’ve seen my other post, Lazy Loading Images in React Native, or maybe you haven’t. Either way, check that post out for some back-story on how I ended up resulting in me creating a package for a component that I find myself using on every project. That package, of course, is rn-progressive-image.
If you’re like me, you find yourself putting an emphasis on user experience. Part of that process, especially for mobile users, is finding out how we can help show some placeholder that represents what will eventually fill that place. With lazy loading, we can load a smaller image that is stretched over the canvas, and blur it so that users can perceive a photo loading in that place. Below you’ll find a small demonstration video of the package being used.
Tell me about the package! 📦
Sure! This package is one that I created somewhat recently (at the time of writing). Within the package, I made it so that the users can specify which animation library they’d like to use react-native-reanimated or React Native’s built-in Animated API (more on that next).
I have used some derivative of this exact component in almost every single project that I’ve created and I just got tired of copying it from project to project. With that, I found it would be most beneficial to not only share my work with the community but also just to make things easier for myself. The package is OSS and can be added to at any point by any contributors seeking to advance the package.
It would be great to be able to allow users to override the styles/animations provided with their own specified animation props, however, I’ve not had the time to really build that functionality out (nor have I really had a desire to since the package was created with my own spec/for my own use).
What is reanimated?! 🥴
Reanimated is another animation library that helps streamline animations by offloading the processes to the UI thread by way of worklets.
Why?
Well, when it comes down to it, React Native’s Animated API is good, but it’s not great. It lacks in some performance areas, often causing clutter on the thread your app is running on. React Native Reanimated by Software Mansion does a fantastic job at offloading that animation process onto the UI thread that runs parallel to the thread your JS is running on.
What does this mean?
This means your app stays performant while animations are running and actions, business logic, renders, etc. are not being blocked by animations on your thread.
Why does that matter for image loading?
Let’s consider that you are rendering a large list of cells that contain photos within a FlatList. In each of those cells of the FlatList, if we are animating the image’s opacity from zero to one, that can take a large toll on your thread depending on how many children are animating. Utilizing react-native-reanimated, we are able to offload those processes using the worklets that reanimated 2 makes use of.