On Animations

ยท

4 min read

Animations are a crucial part of mobile development, not just with React Native in particular. All the more than half-decent mobile applications out there have (more than) a little animated movements going on, either with the loader, or in certain "pop-up screens" or even with some button or form or other type of component.

Now, with React Native, this is one spot where there is already a ton of resources available that anyone who could commit to them in any sort of structured way would immediately be in the top percentile of React Native developers in that area, I believe. This is because (in my experience) very few of us concern ourselves with animations (up to a point) and for some good reason to be fair. Animations are usually seen as "add-ons" and the notable difficulties in implementing them compared to native, and even other cross-platform frameworks like Flutter does give that kind of feeling.

However, I feel that these 4 people (and their respective platforms) that I will highlight with this piece are enough to get one cracking when it comes to animations. These include 3 YouTube channels and 1 with a website (and free online book)

  1. William Candillon - Of course, any discussion about React Native animations would have to start with the brilliant Frenchman from "beautiful Zurich, Switzerland". William's expertise in React Native animations is known to many within the React Native developer community. He is a major maintainer and/or contributor to the major animation libraries we have available including react-native-skia and react-native-redash.

For the beginner, I would recommend this video made for the Free Code Camp YouTube channel where he explains through 4 interesting animation samples. Then, one could go through the 25 episodes of the React Native fashion playlist. It was very helpful for me when I was learning TypeScript, and one picks up some brilliant React coding practices along with the animation techniques you get to learn along the way. After those, it's a matter of picking through the many videos in the "Can it be done in React Native?" series or taking on his course on his website.

  1. Catalin Miron - (channel: catalinmirondev) is another Youtuber with a focus on animations in React Native. An advantage to his platforms is the use of Moti, another powerful animation library I have come to really appreciate as it simplifies animations. For the beginner, I think his channel is slightly more "approachable" than William's even though not as expansive. His series dealing with Shared Elements transitions is also a treat.

For the curious, there is also (a bit old) series he did concerning building an app that, while very long is quite eye-opening into the app development process. He also has a Patreon for access to source code from some videos and other animations not on the channel.

  1. Arnaud Dellinger - (channel: eveningkid) - Arnaud, with the channel eveningkid is the third Youtuber on this list. evening kid's channel has the benefit of being the most explanatory of all mentioned here thus far as he reall breaks down animation concepts really well, building your understanding from the ground up. His GitHub profile (and gists) where he posts source code for videos and other stuff is good reference material as well.

For the beginner, his "You can Animated" series has the benefit of being short, packed with information and well-explained and paced. Check it out in the Links sections below.

  1. Jason Brown (website: codedaily.io) - Jason Brown (aka browniefed according to this GitHub profile) is the creator of the codedaily.io website, where tutorials on React Native animations and other tools like Hasura and Next.js among others.

The one thing I'd like to highlight on his page is the Master React Native Animations course. Here, he has open-sourced a book (with accompanying videos) that take you from the basics to advanced animations. It was the first tool I came across learning animations and was very great and helpful. The code is written in class components for the most part, and features heavy usage with the Animated (and LayoutAnimations) API, rathe than other libraries we have talked about. This is nothing that should hinder the beginner developer in converting to functional components.

I am so appreciative of this course and recommend it to any and everyone (including you, dear reader.)

So you see, there is a collection of useful resources for you to aid in making a dive into the world of React Native animations, leveling you up as a React Native developer overall.

Thanks for reading.

Cheers.

ย