Throughout the world, internet speeds are different; especially so with mobile devices. As a mobile developer, something I commonly run into is the concern of some users not having consistently good internet access. Because of this, I develop around those problems and often times run into unique challenges. While this has been done before, I wanted to provide my solution to the problem in case anyone else is looking for a unique solution that makes use of react-native-animatable.
Preface
Throughout the world, internet speeds are different; especially so with mobile devices. As a mobile developer, something I commonly run into is the concern of some users not having consistently good internet access. Because of this, I develop around those problems and often times run into unique challenges. While this has been done before, I wanted to provide my solution to the problem in case anyone else is looking for a unique solution that makes use of react-native-animatable.
Benefit:
If you’re like some of the other people who have seen this, you might be asking yourself. What is the difference between doing this and showing an activity indicator? Well, it comes down to personal preference and a sense of professionalism I suppose.
Personally, I feel that seeing that an image is loading in the background rather than seeing a spinning wheel feels a bit more professional. It makes me realize that there is an image loading, and allows me to conceptualize what the user interface will look like after the image is finished loading.
Preview:
Comparison
Curious what the difference really is? The example on the left is on an extremely fast connection. The example in the middle is on a 3G connection downloading a medium-large sized image. The example on the right is what happens when just making use of the basic <Image /> component on a 3G connection.
Where do you use this?
You can use this anywhere that you are loading images. While it might not necessarily be extremely useful to use it on a single image that has a very small size ( less than 100kb or so ), it could be useful when loading a large number of images that have a smaller size.
For example, if you are using a FlatList that has two columns of items, it could give a positive UX for users who are viewing that screen. Seeing a bunch of loading indicators just feels tacky to me (personally), and I would much rather see some blurry versions of an image as placeholders.
Ready to see the code?
You can see the source code and download a running example of this application on my Github.
Have any questions? Feel free to reach out to me on Instagram or Twitter and I’d be more than happy to chat.
Cheers! 🍻