Toolbar Animation in React Native (1/2)
Second part is here — it is about how to animate the background of toolbar.
Last time, we were talking about how to create Ripple Effect with Animated API in React Native. There was only one Animated View. Today, we will talk about animation of Material Design’s Toolbar. As you can see in the picture above, we need to animate couple of Views together.
We will design the components and animate a text and the icons. There’s going to be another article that describes background animation.
You can also check react-native-material-ui library, which already implements the Toolbar component. I’ve been using it for booking system app by Reservio.
Idea
We will implement LeftElement, CenterElement, and RightElement. Then we have a Toolbar as a wrapper of those three components. It’s clear there are two possible states. The search mode is either active or inactive. So we will animate a transition between them.
We will rotate LeftElement and animate the opacity of CenterElement. We need both of the components to be re-rendered during the animation. LeftElement re-renders from menu icon to arrow icon. CenterElement re-renders from Text component to TextInput component.
Let’s code
First of all, we need to create a simple static View. No state, no animation.
The LeftElement and RightElement components are almost the same. Note that the IconToggle component is included in the react-native-material-ui library. You can also check the first article in React Native Motion if you are interested in how it works.
The CenterElement component is also quite simple.
Let’s add the state
We have to add the state to the Toolbar which will control the animation. We can already use it for searching now but we want it to be more cool, right?
After we press the right icon, we set isSearchActive to true and pass it to all components via props. Then we have to pass a value of TextInput to RightElement and show clear button if it’s needed. Here’s a code for right icon. You can change the left icon in a similar way.
Let’s animate
We start with the left icon, which rotates and changes from menu to arrow. Then we animate the opacity of title. The right icon stays without animation. Sometimes, it’s better to do nothing.
Left element
We start to rotate menu icon to 90 degrees. Then we set leftElement to the arrow. It invokes re-render of the component and renders arrow instead of the menu. Then we can rotate arrow icon from 90 to 180 degrees. It would be better to have kind of micro animation over here but it’s not the goal for this article. Maybe next time?
The animation starts in componentWillReceiveProps where we check isSearchActive in props. We need to know if we animate from zero to 180 degrees or from 180 to zero.
It’s good to know about Animated’s interpolate function (line 40), which maps value to different value. It’s from number to degree in this case.
Center element
We change CenterElement in a similar way. We need to set the state in the half of the animation.
We animate the opacity from 1 to zero. Then we set a state.textInput to true. It invokes re-render and renders TextInput component instead of Text. Note that the opacity is still set to zero. So we need to animate the opacity again. From zero to 1.
That’s all for now. Everything is ready to implement the background animation.
Second part is here — it is about how to animate the background of toolbar.
Last word
If you like this article, please share it. You can also follow React Native Motion publication where I publish. If you have an idea for another animation then leave a comment, please.
Note that code is not ready for production. For this purpose, you can use open source react-native-material-ui library. I’ve been using it for booking system app by Reservio.
