npmpackage.info

Gathering detailed insights and metrics for react-native-animated-nav-tab-bar-standalone

react-native-animated-nav-tab-bar-standalone - 3.1.4 | npmpackage.info

react-native-animated-nav-tab-bar-standalone

A simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.

3.1.4

1,026

MIT

TypeScript

54.56 kB

3.7

Installations

npm install react-native-animated-nav-tab-bar-standalone

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.4.0

NPM Version

7.18.1 Pull Requests

Open

5

Total

51

Closed

24

Merged

22

Issues

Open

4

Total

100

Closed

96

Releases

3.1.13

Updated on May 26, 2025

Fix back handler

3.1.12

Updated on May 26, 2025

Lazy prop fix

3.1.11

Updated on Aug 06, 2024

Fixed npm publish with empty dist folder bug

3.1.7

Updated on Dec 23, 2021

Fixed the explicit version for the dependency on react navigation 5.9.0

3.1.6

Updated on Dec 11, 2021

Fix hardware button to go back on android

3.1.4

Updated on Mar 28, 2021

View All 17 releases

Languages

TypeScript

Java

Objective-C

Ruby

JavaScript

Objective-C++

TypeScript (64.05%)

Java (18.62%)

Objective-C (5.89%)

Ruby (5.87%)

JavaScript (3.63%)

Objective-C++ (1.93%)

Developer

torgeadelin

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,026 Stars

147 Commits

113 Forks

8 Watchers

8 Branches

13 Contributors

Updated on Jul 14, 2025

Maintainers

View All 13 Contributors

Package Meta Information

Latest Version

3.1.4

Package Id

react-native-animated-nav-tab-bar-standalone@3.1.4

Unpacked Size

54.56 kB

Size

12.24 kB

File Count

NPM Version

7.18.1

Node Version

16.4.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-native-animated-nav-tab-bar

A simple and customizable React Native component that implements an animated bottom tab bar for React Navigation v5.

60FPS
Support for iPhoneX
Lots of customization
Bottom Tab Bar Floating style

📆 Updates / Changelog

Changelog.md

Animation Preview

Customization Preview

config1.png

Other possible Customizations

Tab Bar Icons

Layout

Let's get to know you!

👋 If your app is deployed to AppStore/GooglePlay and you're using this package, send me a DM on Twitter @torgeadelin

Prerequisites

❗️In order to use the component, you need to have React Navigation v5 installed.

Installation

If using yarn

yarn add react-native-animated-nav-tab-bar

If using npm

npm install react-native-animated-nav-tab-bar

Usage

Notice

If you updated the package to a new version, don't forget to run npm run start -- --reset-cache to have the latest version.

Import

1// Javascript
2import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
3// Typescript
4import {
5  AnimatedTabBarNavigator,
6  DotSize, // optional
7  TabElementDisplayOptions, // optional
8  TabButtonLayout, // optional
9  IAppearanceOptions // optional
10} from 'react-native-animated-nav-tab-bar'
11

Initialize

Then create a navigator using the navigation builder that you imported, and create your navigation! Look at the example below.

1...
2
3const Tabs = AnimatedTabBarNavigator();
4
5export default () => (
6  <Tabs.Navigator
7    // default configuration from React Navigation
8    tabBarOptions={{
9      activeTintColor: "#2F7C6E",
10      inactiveTintColor: "#222222"
11    }}
12  >
13
14    // Home Screen
15    <Tabs.Screen name="Home" component={Home} />
16
17    // Other screens go here.
18    ...
19
20  </Tabs.Navigator>
21)

Add Icons

If you'd like to add icons to your Bottom Navigation you can use react-native-vector-icons. Look at an example of how to add icons to your tab bar.

Example

1import Icon from 'react-native-vector-icons/Feather';
2
3...
4
5export default () =>
6  <Tabs.Navigator
7    tabBarOptions={{
8      activeTintColor: "#2F7C6E",
9      inactiveTintColor: "#222222"
10    }}
11  >
12    <Tabs.Screen
13      name="Home"
14      component={Home}
15      options={{
16        tabBarIcon: ({ focused, color, size }) => (
17            <Icon
18                name="Home"
19                size={size ? size : 24}
20                color={focused ? color : "#222222"}
21                focused={focused}
22                color={color}
23            />
24        )
25      }}
26    />
27    </Tabs.Navigator>
28
29...

Documentation

The navigation component takes two main props which help you customize your navigation. tabBarOptions is the default prop from React Navigation which you can use to specify different tint colors and more (see available options below). for all the details. The second prop is appearance. Here you'll be able to adjust several properties of the tab bar as you wish. See the available properties above.

tabBarOptions
- ✅activeTintColor - Label and icon color of the active tab item.
- ✅inactiveTintColor - Label and icon color of the inactive tab item.
- ✅activeBackgroundColor - Background color of the active tab item.
- ✅tabStyle - Style object for the tab wrapper (Note! it overrides the properties in appearance prop (see below).
- ✅labelStyle - Style object for the tab label text.
appearance
- ✅topPadding (default: 20) - Space between the tab button and the wrapper (top)
- ✅horizontalPadding (default: 20) - Vertical space between for the tab buttons
- ✅tabBarBackground (default: "white") - Background color for the wrapper that contains the navigation tabs
- ✅shadow (default: true) - If set to true, the wrapper has a light shadow
- ✅activeTabBackgrounds - Array of hex colours for the background of each tab when active. (if not specified, falls back to the activeBackgroundColor from tabBarOptions)
- ✅activeColors - Array of hex colours for the tint of each tab when active. (if not specified, falls back to the activeTintColor from tabBarOptions)
- ✅floating (default: false) - If set to true, the nav bar will float on top of the current screen. Look at examples above.
- ✅whenActiveShow (default: "both") Configure the appearance of the active tab. Available values both, label-only, icon-only.
- ✅whenInactiveShow (default: "icon-only") Configure the appearance of the inactive tabs. Available values both, label-only, icon-only.
- ✅tabButtonLayout (default: "horizontal") Configure the layout of the tab button. Available values vertical, horizontal.
- ✅dotCornerRadius (default: 100) Corner radius for the active background / dot.
- ✅dotSize (default: "medium") Size of dot for the active tab. Available values small, medium, large.
Note! Make sure you reload your view after changing the props. The animation might be stuck while changing them dynamically.

Troubleshooting

My tab doesn't reflect the tabStyle object when I set paddingTop. Solution: You must provide the same value for paddingTop in both tabStyle object and topPadding property from appearance. This is due to the fact that the dot / active background uses position absolute, and the parent's padding top does not affect it.
My appearance prop style doesn't apply. Solution: Up until version 3.1.2 there was a typo with the appearance prop. (Instead of appearance it was appearence). It has been fixed in 3.1.3 and you should make sure you're using the right spelling too if you update to 3.1.3.

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

If you raise an issue, please add proper steps to reproduce it and proper logs. Thanks!

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Catalin Torge @torgeadelin

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Maintained

Determines if the project is "actively maintained".

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-native-animated-nav-tab-bar-standalone

Installations

Developer Guide

Yes

CommonJS

16.4.0

7.18.1

Pull Requests

5

51

24

22

Issues

4

100

96

Releases

Languages

Developer

torgeadelin

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

react-native-animated-nav-tab-bar

📆 Updates / Changelog

Animation Preview

Customization Preview

Other possible Customizations

Tab Bar Icons

Layout

Let's get to know you!

Prerequisites

Installation

Usage

Notice

Import

Initialize

Add Icons

Documentation

Troubleshooting

Contributing

Author

License

10

10

9

9

3

2

0

0

0

0

0

0

0

3.7

/10