{"id":13406826,"url":"https://github.com/gorhom/react-native-animated-tabbar","last_synced_at":"2025-05-15T03:05:15.382Z","repository":{"id":41061369,"uuid":"245689543","full_name":"gorhom/react-native-animated-tabbar","owner":"gorhom","description":"A 60FPS animated tab bar with a variety of cool animation presets 😎","archived":false,"fork":false,"pushed_at":"2022-12-27T19:03:29.000Z","size":4807,"stargazers_count":1753,"open_issues_count":39,"forks_count":132,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-15T03:04:58.304Z","etag":null,"topics":["animated","react-native","react-navigation","reanimated","ta","tabbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gorhom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gorhom"}},"created_at":"2020-03-07T19:05:26.000Z","updated_at":"2025-05-13T09:08:08.000Z","dependencies_parsed_at":"2023-01-31T05:15:42.412Z","dependency_job_id":null,"html_url":"https://github.com/gorhom/react-native-animated-tabbar","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-native-animated-tabbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-native-animated-tabbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-native-animated-tabbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-native-animated-tabbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gorhom","download_url":"https://codeload.github.com/gorhom/react-native-animated-tabbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","react-native","react-navigation","reanimated","ta","tabbar"],"created_at":"2024-07-30T19:02:40.311Z","updated_at":"2025-05-15T03:05:15.355Z","avatar_url":"https://github.com/gorhom.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gorhom"],"categories":["TypeScript","Stale"],"sub_categories":["React Native \u0026 Expo"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eAnimated TabBar\u003c/h1\u003e\n\n[![npm](https://img.shields.io/npm/v/@gorhom/animated-tabbar?style=flat-square)](https://www.npmjs.com/package/@gorhom/animated-tabbar) [![npm](https://img.shields.io/npm/l/@gorhom/animated-tabbar?style=flat-square)](https://www.npmjs.com/package/@gorhom/animated-tabbar) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@gorhom/animated-tabbar)\n\n\u003cimg src=\"./preview.gif\"\u003e\n\nA **60FPS** animated tab bar with a variety of cool animation presets 😎\n\n\u003c/div\u003e\n\n---\n\n## Table of Contents\n\n1. [Features](#features)\n2. [Installation](#installation)\n3. [Usage](#usage)\n   1. [Animated Icons](./docs/animated-icons.md)\n4. [Props](#props)\n5. [Presets](#presets)\n   1. [Bubble Preset](./docs/bubble-preset.md)\n   2. [Flashy Preset](./docs/flashy-preset.md)\n   3. [Material Preset](./docs/material-preset.md)\n6. [Migration](#migration)\n7. [To Do](#to-do)\n8. [Credits](#built-with)\n9. [License](#license)\n\n## Features\n\n- `60FPS` smooth animation for all presets.\n- Fully integrated with `React Navigation` v4 \u0026 v5.\n- Standalone usage.\n- Right-to-left layout support.\n- Accessibility support.\n- Written in `TypeScript`.\n\n## Installation\n\n```sh\nyarn add @gorhom/animated-tabbar\n# or\nnpm install @gorhom/animated-tabbar\n```\n\n\u003e Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) \u0026 [react-native-svg](https://github.com/react-native-community/react-native-svg), and follow their installation instructions.\n\n## Usage\n\nOriginally `Animated TabBar` worked only with `React Navigation`, but I notice that it could be use as a standalone component and be more useful for the community.\n\nNow the library export two main components:\n\n- `AnimatedTabBar` ( **default** ) : the `React Navigation` integrated tab bar.\n- `AnimatedTabBarView`: the standalone tab bar.\n\n\u003cdetails\u003e\n  \u003csummary\u003eStandalone Component\u003c/summary\u003e\n\n```tsx\nimport React, { useState } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';\n\nconst tabs: TabsConfig\u003cBubbleTabBarItemConfig\u003e = {\n  Home: {\n    labelStyle: {\n      color: '#5B37B7',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(91,55,183,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(223,215,243,1)',\n      inactiveColor: 'rgba(223,215,243,0)',\n    },\n  },\n  Profile: {\n    labelStyle: {\n      color: '#1194AA',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(17,148,170,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(207,235,239,1)',\n      inactiveColor: 'rgba(207,235,239,0)',\n    },\n  },\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#999',\n  },\n  tabBarContainer: {\n    borderRadius: 25,\n  },\n});\n\nexport default function App() {\n  const [index, setIndex] = useState(0);\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText\u003e{index}\u003c/Text\u003e\n      \u003cAnimatedTabBarView\n        tabs={tabs}\n        itemOuterSpace={{\n          horizontal: 6,\n          vertical: 12,\n        }}\n        itemInnerSpace={12}\n        iconSize={20}\n        style={styles.tabBarContainer}\n        index={index}\n        onIndexChange={setIndex}\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eReact Navigation v5 (TypeScript)\u003c/summary\u003e\n\n```tsx\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';\n\nconst tabs: TabsConfig\u003cBubbleTabBarItemConfig\u003e = {\n  Home: {\n    labelStyle: {\n      color: '#5B37B7',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(91,55,183,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(223,215,243,1)',\n      inactiveColor: 'rgba(223,215,243,0)',\n    },\n  },\n  Profile: {\n    labelStyle: {\n      color: '#1194AA',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(17,148,170,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(207,235,239,1)',\n      inactiveColor: 'rgba(207,235,239,0)',\n    },\n  },\n};\n\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n  return (\n    \u003cNavigationContainer\u003e\n      \u003cTab.Navigator\n        tabBar={props =\u003e (\n          \u003cAnimatedTabBar tabs={tabs} {...props} /\u003e\n        )}\n      \u003e\n        \u003cTab.Screen\n          name=\"Home\"\n          component={HomeScreen}\n        /\u003e\n        \u003cTab.Screen\n          name=\"Profile\"\n          component={ProfileScreen}\n        /\u003e\n      \u003c/Tab.Navigator\u003e\n    \u003c/NavigationContainer\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eReact Navigation v5 (JavaScript)\u003c/summary\u003e\n\n```jsx\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport AnimatedTabBar from '@gorhom/animated-tabbar';\n\nconst tabs = {\n  Home: { // \u003c Screen name\n    labelStyle: {\n      color: '#5B37B7',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(91,55,183,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(223,215,243,1)',\n      inactiveColor: 'rgba(223,215,243,0)',\n    },\n  },\n  Profile: { // \u003c Screen name\n    labelStyle: {\n      color: '#1194AA',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(17,148,170,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(207,235,239,1)',\n      inactiveColor: 'rgba(207,235,239,0)',\n    },\n  },\n};\n\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n  return (\n    \u003cNavigationContainer\u003e\n      \u003cTab.Navigator\n        tabBar={props =\u003e (\n          \u003cAnimatedTabBar tabs={tabs} {...props} /\u003e\n        )}\n      \u003e\n        \u003cTab.Screen\n          name=\"Home\"\n          component={HomeScreen}\n        /\u003e\n        \u003cTab.Screen\n          name=\"Profile\"\n          component={ProfileScreen}\n        /\u003e\n      \u003c/Tab.Navigator\u003e\n    \u003c/NavigationContainer\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eReact Navigation v4\u003c/summary\u003e\n\n```tsx\nimport React from 'react';\nimport {createAppContainer} from 'react-navigation';\nimport {createBottomTabNavigator} from 'react-navigation-tabs';\nimport {SafeAreaProvider} from 'react-native-safe-area-context';\nimport AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';\n\nconst tabs: TabsConfig\u003cBubbleTabConfig\u003e = {\n  Home: {\n    labelStyle: {\n      color: '#5B37B7',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(91,55,183,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(223,215,243,1)',\n      inactiveColor: 'rgba(223,215,243,0)',\n    },\n  },\n  Profile: {\n    labelStyle: {\n      color: '#1194AA',\n    },\n    icon: {\n      component: /* ICON COMPONENT */,\n      activeColor: 'rgba(17,148,170,1)',\n      inactiveColor: 'rgba(0,0,0,1)',\n    },\n    background: {\n      activeColor: 'rgba(207,235,239,1)',\n      inactiveColor: 'rgba(207,235,239,0)',\n    },\n  },\n};\n\nconst TabNavigator = createBottomTabNavigator(\n  {\n    Home: HomeScreen,\n    Profile: ProfileScreen,\n  },\n  {\n    tabBarComponent: props =\u003e \u003cAnimatedTabBar tabs={tabs} {...props} /\u003e,\n  },\n);\n\nconst AppContainer = createAppContainer(TabNavigator);\n\nexport default () =\u003e (\n  \u003cSafeAreaProvider\u003e\n    \u003cAppContainer /\u003e\n  \u003c/SafeAreaProvider\u003e\n);\n```\n\n\u003c/details\u003e\n\n\u003e To configure animated icons, please have a look at [Animated Icons](./docs/animated-icons.md).\n\n## Props\n\n| name                 | description                                                                                         | required | type                                                                                                      | default  |\n| -------------------- | --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------- |\n| `preset`             | Animation preset, currently options are `['bubble', 'flashy', 'material']`.                         | NO       | [`PresetEnum`](./src/presets.ts#L8)                                                                       | 'bubble' |\n| `tabs`               | Tabs configurations. A generic dictionary of selected preset tab config.                            | YES      | [`TabsConfig\u003cT\u003e`](./src/types.ts#L5)                                                                      |          |\n| `style`              | View style to be applied to tab bar container, `default value will be based on selected preset`.    | NO       | StyleProp\u003cViewStyle\u003e                                                                                      |          |\n| `duration`           | Animation duration, `default value will be based on selected preset`.                               | NO       | number                                                                                                    |          |\n| `easing`             | Animation easing function, `default value will be based on selected preset`.                        | NO       | [`EasingFunction`](https://github.com/software-mansion/react-native-reanimated/blob/master/src/Easing.js) |          |\n| `itemInnerSpace`     | Tab item inner space to be added to the tab item, `default value will be based on selected preset`. | NO       | number \\| [`Space`](./src/types.ts#L29)                                                                   |          |\n| `itemOuterSpace`     | Tab item outer space to be added to the tab item, `default value will be based on selected preset`. | NO       | number \\| [`Space`](./src/types.ts#L34)                                                                   |          |\n| `itemContainerWidth` | Tab item width stretch strategy, `default value will be based on selected preset`.                  | NO       | 'auto' \\| 'fill'                                                                                          |          |\n| `iconSize`           | Tab item icon size, `default value will be based on selected preset`.                               | NO       | number                                                                                                    |          |\n| `isRTL`              | Tab bar layout and animation direction.                                                             | NO       | boolean                                                                                                   | false    |\n| `onLongPress`        | Callback on item long press, `by default it is integrated with React Navigation`.                   | NO       | (index: number) =\u003e void                                                                                   | noop     |\n\n### Preset Configurations\n\nSome presets will have its own configurations - like `material` - which they will be added the root view props.\n\n\u003cdetails\u003e\n\n  \u003csummary\u003eMaterial Preset Example\u003c/summary\u003e\n\nnotice here we added `animation`, `inactiveOpacity` \u0026 `inactiveScale` to the root view.\n\n```tsx\n\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport AnimatedTabBar, {TabsConfig, MaterialTabBarItemConfig} from '@gorhom/animated-tabbar';\n\nconst tabs: TabsConfig\u003cMaterialTabBarItemConfig\u003e = {\nHome: {\n  icon: {\n    component: /* ICON COMPONENT */,\n    color: 'rgba(255,255,255,1)',\n  },\n  ripple: {\n    color: '#5B37B7',\n  },\n},\nProfile: {\n  icon: {\n    component: /* ICON COMPONENT */,\n    color: 'rgba(255,255,255,1)',\n  },\n  ripple: {\n    color: '#1194AA',\n  },\n},\n};\n\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\nreturn (\n  \u003cNavigationContainer\u003e\n    \u003cTab.Navigator\n      tabBar={props =\u003e (\n        \u003cAnimatedTabBar\n          preset='material'\n          tabs={tabs}\n          animation=\"iconWithLabelOnFocus\"\n          inactiveOpacity={0.25}\n          inactiveScale={0.5}\n          {...props}\n        /\u003e\n      )}\n    \u003e\n      \u003cTab.Screen\n        name=\"Home\"\n        component={HomeScreen}\n      /\u003e\n      \u003cTab.Screen\n        name=\"Profile\"\n        component={ProfileScreen}\n      /\u003e\n    \u003c/Tab.Navigator\u003e\n  \u003c/NavigationContainer\u003e\n)\n}\n```\n\n\u003c/details\u003e\n\n## Presets\n\nOriginally `Animated TabBar` started with `Bubble` as the only animation preset embedded. However, I felt the library structure could include many other variety of animation presets.\n\n### [Bubble Preset](./docs/bubble-preset.md)\n\n\u003ca href=\"./docs/bubble-preset.md\"\u003e\u003cimg height=\"200\" src=\"./docs/previews/bubble.gif\" /\u003e\u003c/a\u003e\n\n### [Flashy Preset](./docs/flashy-preset.md)\n\n\u003ca href=\"./docs/flashy-preset.md\"\u003e\u003cimg height=\"200\" src=\"./docs/previews/flashy.gif\" /\u003e\u003c/a\u003e\n\n### [Material Preset](./docs/material-preset.md)\n\n\u003ca href=\"./docs/material-preset.md\"\u003e\u003cimg height=\"200\" src=\"./docs/previews/material-1.gif\" /\u003e\u003c/a\u003e\n\n## Migration\n\n\u003cdetails\u003e\n\n  \u003csummary\u003eV1 to V2\u003c/summary\u003e\n\nDue to extend the library functionality, I had to rename existing interfaces as following:\n\n- `BubbleTabConfig` to `BubbleTabBarItemConfig`\n- `BubbleTabIconProps` to `BubbleTabBarIconProps`\n- `FlashyTabConfig` to `FlashyTabBarItemConfig`\n- `FlashyTabIconProps` to `FlashyTabBarIconProps`\n\n\u003c/details\u003e\n\n## Author\n\n- [Mo Gorhom](https://gorhom.dev/)\n\n## Sponsor \u0026 Support\n\nTo keep this library maintained and up-to-date please consider [sponsoring it on GitHub](https://github.com/sponsors/gorhom). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter [@gorhom](https://twitter.com/gorhom).\n\n## License\n\n[MIT](./LICENSE)\n\n\u003ch2 id=\"built-with\"\u003eBuilt With ❤️\u003c/h2\u003e\n\n- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)\n- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)\n- [react-native-redash](https://github.com/wcandillon/react-native-redash)\n- [react-native-svg](https://github.com/react-native-community/react-native-svg)\n- [@react-native-community/bob](https://github.com/react-native-community/bob)\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://gorhom.dev\" target=\"_blank\"\u003e\u003cimg height=\"18\" alt=\"Mo Gorhom\" src=\"./logo.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorhom%2Freact-native-animated-tabbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgorhom%2Freact-native-animated-tabbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorhom%2Freact-native-animated-tabbar/lists"}