Can this be done in React Native? Building the Chrome iOS TabBar
After upgrading to the latest version of Google Chrome on iOS, I noticed that the app has a cool animation when switching from one tab to the other. And I wondered: can this be done in React Native?
If you have examples of app animations and effects where you are wondering: “can it be done in React Native? 🤔”, please send me submissions.
The full snack for the implementation is available here. To implement this example, we add two identical tab bars (except for colors) on top of each other. And we mask the one on top using MaskedViewIOS.
On top of these two layers, we had a transparent ScrollView that will drive the sliding of the maskElement.
From there, we need to interpolate the translation of the masked cursor. When the scrolling value is 0, the mask is on the right and on the left when we scrolled the width of the tab bar.
That’s all Folks!
Hope that you enjoyed this story. Looking forward to reading your thoughts on this. If you are looking to start a cool React Native project, Don’t forget to checkout React Native Sketch Elements, the most comprehensive React Native starter kit.
