Smooth Animated Tab Bar For React Native

An animated, accessible, super-smooth (60 fps) component for React Native.

Supports both React Navigation V5 and V4.

Installation:

# Yarn
$ yarn add @gorhom/animated-tabbar

# NPM
$ npm install @gorhom/animated-tabbar --save

Basic usage:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar';

const tabs: TabsConfig = {
  Home: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: /* ICON COMPONENT */,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: /* ICON COMPONENT */,
      activeColor: 'rgba(17,148,170,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(207,235,239,1)',
      inactiveColor: 'rgba(207,235,239,0)',
    },
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#999',
  },
  tabBarContainer: {
    borderRadius: 25,
  },
});

export default function App() {
  const [index, setIndex] = useState(0);
  return (
    
      {index}
      
    
  )
}

Preview:

Download Details:

Author: gorhom

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/gorhom/react-native-animated-tabbar

License: MIT