How to Implement an Animated Tab in React Native

Smooth tab animation with React Native Animated

4 min readJun 29, 2022

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:

Example Repository

Here is the final code base on GitHub

Overview

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

Set Up React Native

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:

Introduce react-native-tab-view

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:

Customize Tab Bar

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:

Opacity Animation

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:

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:

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:

Conclusion

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.

Better Programming