Transition Animation in React Native. Use Case: Dark mode

Ayelegun Michael Kayode

·

Follow

Published in

Backticks & Tildes

·

5 min read

·

Jun 5, 2020

--

Listen

Share

The transition animation is one of the easiest ways to easily animate a React Native application. It provides a way to create a seamless change between various states in your application. In this tutorial, we will be exploring the Transition API and a use-case where the transition animation can be employed; Dark mode.

Note: This tutorial assumes you already have the dependencies required to build React Native applications. If you don’t already have your development environment configured, head over to the React Native docs and have that setup

Ready, set? Let’s go! 🚀

First of all, we set-up our React Native application using the React Native CLI (you can use Expo as well). I’ll also be using TypeScript (this is optional, and you can scaffold your application without it. Run the following command to get started:

npx react-native init darkModeApp --template react-native-template-typescript

This will set-up a React Native application with TypeScript automatically included for us. Next, we need to install react-native-vector-icons and link it.

yarn add react-native-vector-icons
npx react-native link react-native-vector-icons

This will install react-native-vector-icons as a dependency. For iOS, open your Info.plist file and add the following lines of code:

<key>UIAppFonts</key><array><string>AntDesign.ttf</string><string>Entypo.ttf</string><string>EvilIcons.ttf</string><string>Feather.ttf</string><string>FontAwesome.ttf</string><string>FontAwesome5_Brands.ttf</string><string>FontAwesome5_Regular.ttf</string><string>FontAwesome5_Solid.ttf</string><string>Foundation.ttf</string><string>Ionicons.ttf</string><string>MaterialIcons.ttf</string><string>MaterialCommunityIcons.ttf</string><string>SimpleLineIcons.ttf</string><string>Octicons.ttf</string><string>Zocial.ttf</string><string>Fontisto.ttf</string></array>

This adds a couple of vector icons to our project for use. If you are having issues with linking or setting up react-native-vector-icons, head over to their docs here for a detailed guide on manually linking this dependency.

Once you have the icons added, replace the content of your App.tsx (App.jsx if you are not using TypeScript) with the following code:

This creates the Skeleton of our application, and should give the following output:

Next, we are going to add some logic to make a toggle between dark mode and light mode. Update your App.tsx to look like the following:

A quick walkthrough:

• On line 2, we create an isDarkMode variable in state with a default value of false.
• On line 12, we pass the setDarkMode function to the onValueChange prop of our Switch component. This simply toggles the value of isDarkMode each time our Switch is clicked.

On lines 13, we conditionally render two icons depending on the value of isDarkMode. You may be thinking why not just use one icon, and conditionally change the name depending on the value of isDarkMode. The reason for using two icons is so the Transition effect can happen when we unmount and mount these icons during their conditional render and re-render.

• On lines 19 and 31, we conditionally set the colors of the text depending on the value of isDarkMode. In an ideal scenario, you’d want to manage these colors using the context API but our current setup works for our use-case in this article.

If you’ve updated your code to look like mine, you should have the following result below:

Our switch from Dark mode to Light mode and back works fine, but we can make this transition appear seamless. Right now, the transition between modes is a bit abrupt. Let’s improve that. Time for some Animations!

First, let’s install the Library we’d be using. It’s called react-native-reanimated. It’s a reimplementation of the default Animated library in React Native to achieve smoother animations that run on the UI thread to achieve the 60fps frame rate for animations.

yarn add react-native-reanimated
npx react-native link react-native-reanimated
cd ios && pod install

The above command installs react-native-reanimated and links the library in our project.

Now, we are ready to animate our profile. Update your codebase to look like mine, and then we can walk through it:

A quick walkthrough:

• On line 12, we imported Three components from react-native-reanimated: Transitioning, Transition, and TransitioningView.
• On line 23, we created a ref with a type of TransitioningView.
• On line 25, we created our Animation. The Transition API provides various methods for creating transitions. Here, because we want to animate items when they are mounted and unmounted, we used the Transition.Together API. This takes some children, which are Transistion.In (which declares our animation when mounting) and Transition.Out (which declares our animation when unmounting). We then set the type of animation to fade. You can check out the docs here for more information on the different types of transition animation.
• On line 34, we wrapped our entire component in a Transitioning.View component. This component lets us add a transition prop, whose value is the transition we declared already on line 25. We also passed the ref created on line 23 as a prop as well.
• On line 41, we added a conditional statement to our onValueChange prop on the Switch component. We checked if we have a current value on the ref, and called the animateNextTransition method. This applied our defined transition to the component.

Okay! Now let’s see what we have as our result

Our animation here is exaggerated for effect (feel free to tweak the values of durationMS prop), but you can see how the UX of transitioning from one state to another can be greatly improved using this simple animation technique.

And that’s it, folks. A simple introduction to the Transition API along with a real-world usage.

Happy hacking!!