Toolbar Animation in React Native (2/2)

Last time, we were talking about how to animate components that are displayed on toolbar (left and right icons and title). Now, we’re going to talk about how to animate the background.

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

It’s simple. And if there wasn’t this issue in React Native it would be even simpler.

We need two rounded Views that are displayed as a background of the Toolbar component. Let’s say we have Green one and White one (as we can see on the picture above). The Green one is scaled to 1 by default. And the White one is scaled to zero by default.

It would be great, if we could render them under left icon (Green one) and under search icon (White one). But we can’t. Because that issue in React Native. We can’t set scale to zero. Workaround is set scale to 0.01. But there would still be Green or White dot under the icon, because these rounded Views are pretty big. And that’s what we don’t want.

Here’s a workaround. We will put these rounded Views outside the bounds. It doesn’t follow the material design’s pattern, because it should start from the icon where a user presses, but it’s still good looking, isn’t it?

Let’s code

Here’s a code what you need to approach that animation.

If you are interested in LeftElement, CenterElement and RightElement components, we were talking about them last time.

In this code, there is onLayout callback, because we need to calculate how big should the rounded Views be. It depends on size of Toolbar, because we need to cover whole Toolbar component. Moreover, we need to cover it by only half of rounded View. Because it starts from side of Toolbar, not from center. And also we calculate with size of point that I mentioned above, in Idea part.

Now, we need to call onSearchOpenRequested method to animate scale value of the White background. After that animation, we set scale value of Green background to zero, because we want it to be ready to next animation. Note that the Green background is under the White background and user can’t see it. But when we set scale value of Green background to zero, we can switch zIndexes of Green and White backgrounds, so the Green one is above the White one now. But its scale value is set to zero, so user still can’t see the Green one.

When we call onSearchCloseRequested, we repeat the process for Green background. We animate its scale value from zero to 1. When the animation is completed (user sees the Green one), we can set scale value of White background to zero and move it above the Green background. Now we have everything ready to call onSearchOpenRequested again.

Conclusion

If you like this article, please share it. You can also follow React Native Motion publication where I publish. If you need any advice or help with your React or React Native project, feel free to contact me.

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.