SECRET OF CSS

How to Implement an Animated Tab in React Native | by Manato Kuroda | Jun, 2022


Smooth tab animation with React Native Animated

1*eUZSnIjT09CQq5Sj14XkBw
Photo by Milad Fakurianon on Unsplash.

This post will guide you through how to create an animated tab view in React Native using react-native-tab-view and react-native-reanimated. The final example of an animated tab will look like this:

1*fqV4t6P wgr91AXDcpgIgg
Final example

Here is the final code base on GitHub

  • Set up React Native
  • Introduce react-native-tab-view
  • Customize tab bar

First, set up React Native app.

npx react-native init AnimatedTabViewExample --template react-native-template-typescript

And start the iOS app:

yarn ios

The initial page should look like this:

1*fgYScygLOSS7VgO9gL 5lg
ios app in dark mode

Next, install the react-native-tab-view.

yarn add react-native-tab-view@3.1.1 react-native-pager-view@5.4.24

Go to the ios folder and install Cocoapods:

$ cd ios
$ bundle exec pod install

Open up App.tsx and write a tab view like this:

This creates two tabs like so:

Initial tab

Now that we’ve introduced the tab view to our app. Next, let us customize the tab bar.

First, create src/components/TabBar.tsx and write a tab bar component like so:

And create src/components/TabBarItem.tsx like so:

In order to customize the default dab bar, provide a component to the renderTabBar props in App.tsx.

And tweak some styles for the first and second tab in App.tsx. Here’s the code:

Now, the tab view looks like this:

1*FfFfyg4k4WjDvGVJky6h8A

Next, let’s add opacity animation to the tab bar using interpolation. The interpolation allows you to control and connect two animations. You can connect the opacity, and position of the tab page, then have the transitions in the exact same timing and operate in reverse.

In this app, we will add an animation in which the opacity is going from 0 to 1 gradually when switching the tab.

Open up src/components/TabBar.tsxand add the interpolation to the component like so:

The position is an animated node that represents the current position of tabs and has the interpolate function. When the current tab switches to the next, the opacity will go from 0.5 to 1.

Open up src/components/TabBarItem.tsx and add the opacity props like so:

And the animation looks like this:

1*cIgWjTVejl5H61B9fGGSPg
opacity animation

As you switch tabs, you can see that the opacity of the items in the tab bar changes.

Border width animation

Next, we will implement a border width animation using react-native-reanimated. The react-native-reanimated allows native code to animate width on the UI thread instead of the JS thread for better performance. Basically, React Native does not support width animation unless the useNativeDriver is set to true.

Install react-native-reanimated.

yarn react-native-reanimated

Go to the ios folder and install Cocoapods:

$ cd ios
$ bundle exec pod install

Add reanimated’s babel plugin to babel.config.js like so:

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};

Open up src/components/TabBar.tsx and write this code.

The measureLayout allows you to calculate the dimensions of the child view with respect to the parent view’s dimensions dynamically. So the result of measures includes something like this:

[
{
height: 23.333335876464844,
width: 31.666667938232422,
x: 16,
y: 16,
},
{
height: 23.333335876464844,
width: 55.333335876464844,
x: 79.66666793823242,
y: 16,
},
];

And create src/components/TabBarIndicator.tsx and write like this:

This component tracks the position of tabs and connects an animation of width and position according to the dimensions passed from the parent.

So, the animations should look like so:

1*6wtPoJGgzOZVTqZgu8E9WQ

As you can see, swiping the tabs changes the width and position of the border.

Lastly, we add more tab items in App.tsx like so:

So, the final animations should look like so:

1*fqV4t6P wgr91AXDcpgIgg

We’ve covered how to implement an animation of tab view in React Native. The final code base is on GitHub and you can try it out.



News Credit

%d bloggers like this: