Installations

npm install @freakycoder/animated-tabbar

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.10.0

NPM Version

10.2.3 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

7

TypeScript

Kotlin

Objective-C

Ruby

JavaScript

Objective-C++

Handlebars

TypeScript (77.51%)

Kotlin (6.11%)

Objective-C (5.45%)

Ruby (5.18%)

JavaScript (2.93%)

Objective-C++ (1.92%)

Handlebars (0.91%)

Developer

WrathChaos

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

10 Stars

101 Commits

1 Forks

1 Watchers

1 Branches

1 Contributors

Updated on Oct 24, 2023

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

4.0.2-pre-alpha

Package Id

@freakycoder/animated-tabbar@4.0.2-pre-alpha

Unpacked Size

228.55 kB

Size

42.03 kB

File Count

141

NPM Version

10.2.3

Node Version

20.10.0

Published on

Apr 16, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

lodash.isequal react-native-redash

Peer Dependencies

6

@react-navigation/native @react-native-community/masked-view react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg

Dev Dependencies

22

Animated TabBar

A 60FPS animated tab bar with a variety of cool animation presets 😎

Features

60FPS smooth animation for all presets.
Fully integrated with React Navigation v4 & v5.
Standalone usage.
Right-to-left layout support.
Accessibility support.
Written in TypeScript.

Installation

1yarn add @gorhom/animated-tabbar
2# or
3npm install @gorhom/animated-tabbar

Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg, and follow their installation instructions.

Usage

Originally 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.

Now the library export two main components:

AnimatedTabBar ( default ) : the React Navigation integrated tab bar.
AnimatedTabBarView: the standalone tab bar.

Standalone Component

1import React, { useState } from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
4
5const tabs: TabsConfig<BubbleTabBarItemConfig> = {
6  Home: {
7    labelStyle: {
8      color: '#5B37B7',
9    },
10    icon: {
11      component: /* ICON COMPONENT */,
12      activeColor: 'rgba(91,55,183,1)',
13      inactiveColor: 'rgba(0,0,0,1)',
14    },
15    background: {
16      activeColor: 'rgba(223,215,243,1)',
17      inactiveColor: 'rgba(223,215,243,0)',
18    },
19  },
20  Profile: {
21    labelStyle: {
22      color: '#1194AA',
23    },
24    icon: {
25      component: /* ICON COMPONENT */,
26      activeColor: 'rgba(17,148,170,1)',
27      inactiveColor: 'rgba(0,0,0,1)',
28    },
29    background: {
30      activeColor: 'rgba(207,235,239,1)',
31      inactiveColor: 'rgba(207,235,239,0)',
32    },
33  },
34};
35
36const styles = StyleSheet.create({
37  container: {
38    flex: 1,
39    justifyContent: 'center',
40    alignItems: 'center',
41    backgroundColor: '#999',
42  },
43  tabBarContainer: {
44    borderRadius: 25,
45  },
46});
47
48export default function App() {
49  const [index, setIndex] = useState(0);
50  return (
51    <View style={styles.container}>
52      <Text>{index}</Text>
53      <AnimatedTabBarView
54        tabs={tabs}
55        itemOuterSpace={{
56          horizontal: 6,
57          vertical: 12,
58        }}
59        itemInnerSpace={12}
60        iconSize={20}
61        style={styles.tabBarContainer}
62        index={index}
63        onIndexChange={setIndex}
64      />
65    </View>
66  )
67}

React Navigation v5 (TypeScript)

1import React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
4import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
5
6const tabs: TabsConfig<BubbleTabBarItemConfig> = {
7  Home: {
8    labelStyle: {
9      color: '#5B37B7',
10    },
11    icon: {
12      component: /* ICON COMPONENT */,
13      activeColor: 'rgba(91,55,183,1)',
14      inactiveColor: 'rgba(0,0,0,1)',
15    },
16    background: {
17      activeColor: 'rgba(223,215,243,1)',
18      inactiveColor: 'rgba(223,215,243,0)',
19    },
20  },
21  Profile: {
22    labelStyle: {
23      color: '#1194AA',
24    },
25    icon: {
26      component: /* ICON COMPONENT */,
27      activeColor: 'rgba(17,148,170,1)',
28      inactiveColor: 'rgba(0,0,0,1)',
29    },
30    background: {
31      activeColor: 'rgba(207,235,239,1)',
32      inactiveColor: 'rgba(207,235,239,0)',
33    },
34  },
35};
36
37const Tab = createBottomTabNavigator();
38
39export default function App() {
40  return (
41    <NavigationContainer>
42      <Tab.Navigator
43        tabBar={props => (
44          <AnimatedTabBar tabs={tabs} {...props} />
45        )}
46      >
47        <Tab.Screen
48          name="Home"
49          component={HomeScreen}
50        />
51        <Tab.Screen
52          name="Profile"
53          component={ProfileScreen}
54        />
55      </Tab.Navigator>
56    </NavigationContainer>
57  )
58}

React Navigation v5 (JavaScript)

1import React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
4import AnimatedTabBar from '@gorhom/animated-tabbar';
5
6const tabs = {
7  Home: { // < Screen name
8    labelStyle: {
9      color: '#5B37B7',
10    },
11    icon: {
12      component: /* ICON COMPONENT */,
13      activeColor: 'rgba(91,55,183,1)',
14      inactiveColor: 'rgba(0,0,0,1)',
15    },
16    background: {
17      activeColor: 'rgba(223,215,243,1)',
18      inactiveColor: 'rgba(223,215,243,0)',
19    },
20  },
21  Profile: { // < Screen name
22    labelStyle: {
23      color: '#1194AA',
24    },
25    icon: {
26      component: /* ICON COMPONENT */,
27      activeColor: 'rgba(17,148,170,1)',
28      inactiveColor: 'rgba(0,0,0,1)',
29    },
30    background: {
31      activeColor: 'rgba(207,235,239,1)',
32      inactiveColor: 'rgba(207,235,239,0)',
33    },
34  },
35};
36
37const Tab = createBottomTabNavigator();
38
39export default function App() {
40  return (
41    <NavigationContainer>
42      <Tab.Navigator
43        tabBar={props => (
44          <AnimatedTabBar tabs={tabs} {...props} />
45        )}
46      >
47        <Tab.Screen
48          name="Home"
49          component={HomeScreen}
50        />
51        <Tab.Screen
52          name="Profile"
53          component={ProfileScreen}
54        />
55      </Tab.Navigator>
56    </NavigationContainer>
57  )
58}

React Navigation v4

1import React from 'react';
2import {createAppContainer} from 'react-navigation';
3import {createBottomTabNavigator} from 'react-navigation-tabs';
4import {SafeAreaProvider} from 'react-native-safe-area-context';
5import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
6
7const tabs: TabsConfig<BubbleTabConfig> = {
8  Home: {
9    labelStyle: {
10      color: '#5B37B7',
11    },
12    icon: {
13      component: /* ICON COMPONENT */,
14      activeColor: 'rgba(91,55,183,1)',
15      inactiveColor: 'rgba(0,0,0,1)',
16    },
17    background: {
18      activeColor: 'rgba(223,215,243,1)',
19      inactiveColor: 'rgba(223,215,243,0)',
20    },
21  },
22  Profile: {
23    labelStyle: {
24      color: '#1194AA',
25    },
26    icon: {
27      component: /* ICON COMPONENT */,
28      activeColor: 'rgba(17,148,170,1)',
29      inactiveColor: 'rgba(0,0,0,1)',
30    },
31    background: {
32      activeColor: 'rgba(207,235,239,1)',
33      inactiveColor: 'rgba(207,235,239,0)',
34    },
35  },
36};
37
38const TabNavigator = createBottomTabNavigator(
39  {
40    Home: HomeScreen,
41    Profile: ProfileScreen,
42  },
43  {
44    tabBarComponent: props => <AnimatedTabBar tabs={tabs} {...props} />,
45  },
46);
47
48const AppContainer = createAppContainer(TabNavigator);
49
50export default () => (
51  <SafeAreaProvider>
52    <AppContainer />
53  </SafeAreaProvider>
54);

To configure animated icons, please have a look at Animated Icons.

Props

name	description	required	type	default
`preset`	Animation preset, currently options are `['bubble', 'flashy', 'material']`.	NO	`PresetEnum`	'bubble'
`tabs`	Tabs configurations. A generic dictionary of selected preset tab config.	YES	`TabsConfig<T>`
`style`	View style to be applied to tab bar container, `default value will be based on selected preset`.	NO	StyleProp
`duration`	Animation duration, `default value will be based on selected preset`.	NO	number
`easing`	Animation easing function, `default value will be based on selected preset`.	NO	`EasingFunction`
`itemInnerSpace`	Tab item inner space to be added to the tab item, `default value will be based on selected preset`.	NO	number \| `Space`
`itemOuterSpace`	Tab item outer space to be added to the tab item, `default value will be based on selected preset`.	NO	number \| `Space`
`itemContainerWidth`	Tab item width stretch strategy, `default value will be based on selected preset`.	NO	'auto' \| 'fill'
`iconSize`	Tab item icon size, `default value will be based on selected preset`.	NO	number
`isRTL`	Tab bar layout and animation direction.	NO	boolean	false
`onLongPress`	Callback on item long press, `by default it is integrated with React Navigation`.	NO	(index: number) => void	noop

Preset Configurations

Some presets will have its own configurations - like material - which they will be added the root view props.

Material Preset Example

notice here we added animation, inactiveOpacity & inactiveScale to the root view.

1
2import React from 'react';
3import { NavigationContainer } from '@react-navigation/native';
4import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5import AnimatedTabBar, {TabsConfig, MaterialTabBarItemConfig} from '@gorhom/animated-tabbar';
6
7const tabs: TabsConfig<MaterialTabBarItemConfig> = {
8Home: {
9  icon: {
10    component: /* ICON COMPONENT */,
11    color: 'rgba(255,255,255,1)',
12  },
13  ripple: {
14    color: '#5B37B7',
15  },
16},
17Profile: {
18  icon: {
19    component: /* ICON COMPONENT */,
20    color: 'rgba(255,255,255,1)',
21  },
22  ripple: {
23    color: '#1194AA',
24  },
25},
26};
27
28const Tab = createBottomTabNavigator();
29
30export default function App() {
31return (
32  <NavigationContainer>
33    <Tab.Navigator
34      tabBar={props => (
35        <AnimatedTabBar
36          preset='material'
37          tabs={tabs}
38          animation="iconWithLabelOnFocus"
39          inactiveOpacity={0.25}
40          inactiveScale={0.5}
41          {...props}
42        />
43      )}
44    >
45      <Tab.Screen
46        name="Home"
47        component={HomeScreen}
48      />
49      <Tab.Screen
50        name="Profile"
51        component={ProfileScreen}
52      />
53    </Tab.Navigator>
54  </NavigationContainer>
55)
56}

Presets

Originally 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.

Migration

V1 to V2

Due to extend the library functionality, I had to rename existing interfaces as following:

BubbleTabConfig to BubbleTabBarItemConfig
BubbleTabIconProps to BubbleTabBarIconProps
FlashyTabConfig to FlashyTabBarItemConfig
FlashyTabIconProps to FlashyTabBarIconProps

Author

Mo Gorhom

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.

License

MIT

Built With ❤️

No vulnerabilities found.

No security vulnerabilities found.

@freakycoder/animated-tabbar

Installations

Developer Guide

Yes

CommonJS

20.10.0

10.2.3

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

WrathChaos

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Animated TabBar

Table of Contents

Features

Installation

Usage

Props

Preset Configurations

Presets

Bubble Preset

Flashy Preset

Material Preset

Migration

Author

Sponsor & Support

License

Built With ❤️