Awesome Open Source
Awesome Open Source

🧼 react-native-bubble-tabbar

cover with mockup
npm version weekly downloads npm bundle size license
NPM

Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript

🚀 Action

showcase about how it works

📦 Installation

npm install react react-native styled-components
# Or using yarn
yarn add react react-native styled-components

First, you should install peerdependencies as the command above. You might already installed react and react-native. If you're using TypeScript, it is recommended to install the typings for the each package, too.

npm install react-native-bubble-tabbar
# Or using yarn
yarn add react-native-bubble-tabbar

Finally, install this module and you're ready to go! 🎉

🐋 Usage

import {
  faHome,
  faHeart,
  faCommentAlt,
  faBars,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import React from 'react';
import BubbleTabBar, {
  IBubbleTabConfig,
  IIconRenderer,
} from 'react-native-bubble-tabbar';

const tabs: IBubbleTabConfig[] = [
  {
    activeColor: '#cc0066',
    activeBackgroundColor: '#f76a8c',
    activeIcon: faHome,
  },
  {
    activeColor: '#ff6f5e',
    activeBackgroundColor: '#f8dc88',
    activeIcon: faHeart,
  },
  {
    activeColor: '#1eb2a6',
    activeBackgroundColor: '#ccf0e1',
    activeIcon: faCommentAlt,
  },
  {
    activeColor: '#4d80e4',
    activeBackgroundColor: '#9aceff',
    activeIcon: faBars,
    name: 'Last',
  },
];

const fontAwesomeIconRenderer = ({ icon, color }: IIconRenderer) =>
  <FontAwesomeIcon
    icon={icon}
    color={color}
    size={18}
  />;

const CustomTabBar: React.FC<BottomTabBarProps> = ({
  state, descriptors, navigation,
}) => {
  return (
    <BubbleTabBar
      state={state}
      descriptors={descriptors}
      navigation={navigation}
      tabs={tabs}
      iconRenderer={fontAwesomeIconRenderer}
    />
  );
};

const Tab = createBottomTabNavigator();

const MainNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      tabBar={({ state, descriptors, navigation }) =>
        <CustomTabBar
          state={state}
          descriptors={descriptors}
          navigation={navigation}
        />
      }
    >
      <Tab.Screen name="One" component={ScreenOne} />
      <Tab.Screen name="Two" component={ScreenTwo} />
      <Tab.Screen name="Three" component={ScreenThree} />
      <Tab.Screen name="Four" component={ScreenFour} />
      <Tab.Screen
        name="ThisRouteDoesNotShowBecauseOnlyFourObjectsAreInTabs"
        component={ScreenHiddenFromTabBar}
      />
    </Tab.Navigator>
  );
};

✔️ tabs Props

name

Override prop name on <Tab.Screen /> component

Type Required
string No

activeColor

Color for active tab text and icon

Type Required
string Yes

activeBackgroundColor

BackgroundColor for active tab

Type Required
string Yes

inactiveColor

Color & background color for inactive tab

Type Required
string No

activeIcon

Icon name for active tab

Type Required
string No

disabledIcon

Icon name for inactive tab

Type Required
string No

✔️ iconRenderer Props

Function with params

icon

Icon name to pass on Icon Component


color

Icon color to pass on Icon Component


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (252,241) 
Hacktoberfest (33,878) 
React Native (11,789) 
React Native Component (210) 
Tabbar (163) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194