npmpackage.info

Gathering detailed insights and metrics for rn-wave-bottom-bar

Other packages similar to rn-wave-bottom-bar

rn-wave-bottom-bar-rtl-support

0.1.4

🌊 Animated bottom bar for react-navigation, react-native.

rn-animated-wave-bottom-navigation

1.0.3

An animated floating wave in a bottom tab bar navigation

Gathering detailed insights and metrics for rn-wave-bottom-bar

rn-wave-bottom-bar - 2.2.36 | npmpackage.info

rn-wave-bottom-bar

🌊 Animated Tab Bottom Bar for react-navigation

2.2.36

334

MIT

TypeScript

209.33 kB

2.4

Installations

npm install rn-wave-bottom-bar

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.15.0

NPM Version

9.6.2 Score

43.2

Supply Chain

Quality

66.4

Maintenance

Vulnerability

94.1

License

Pull Requests

Open

31

Total

563

Closed

49

Merged

483

Issues

Open

5

Total

18

Closed

13

Releases

2.2.1

v2.2.1

Updated on Dec 17, 2022

View All 1 releases

Languages

TypeScript

Java

Objective-C

JavaScript

Ruby

Starlark

Shell

TypeScript (65%)

Java (13.67%)

Objective-C (9.96%)

JavaScript (8.13%)

Ruby (1.76%)

Starlark (1.31%)

Shell (0.16%)

Developer

Jm-Zion

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

334 Stars

540 Commits

27 Forks

3 Watchers

40 Branches

5 Contributors

Updated on Jun 11, 2025

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

2.2.36

Package Id

rn-wave-bottom-bar@2.2.36

Unpacked Size

209.33 kB

Size

28.72 kB

File Count

NPM Version

9.6.2

Node Version

18.15.0

Published on

Apr 17, 2023

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

Dependencies

d3-shape

Peer Dependencies

@react-navigation/bottom-tabs @react-navigation/native react react-native react-native-safe-area-context react-native-vector-icons

Dev Dependencies

rn-wave-bottom-bar

Sample

Custom animated bottom-tab-bar for react-native.

💾 Installation

Make sure you installed react-native-safe-area-context before installing the library

yarn add rn-wave-bottom-bar

npm install rn-wave-bottom-bar --save

📋 Requirements

React-Navigation v6 installed : https://reactnavigation.org/
React-native reanimated 2.+ installed : https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

⚒️ Usage

1<Tab.Navigator
2  screenOptions={{
3    tabBarActiveTintColor: '#5F0B65',
4    tabBarActiveBackgroundColor: '#5F0B65',
5    tabBarInactiveBackgroundColor: 'red',
6  }}
7  tabBar={(props) => (
8    <BottomFabBar
9      mode={'square' | 'default'}
10      isRtl={false}
11      // Add Shadow for active tab bar button
12      focusedButtonStyle={{
13        shadowColor: '#000',
14        shadowOffset: {
15          width: 0,
16          height: 7,
17        },
18        shadowOpacity: 0.41,
19        shadowRadius: 9.11,
20        elevation: 14,
21      }}
22      // - You can add the style below to show screen content under the tab-bar
23      // - It will makes the "transparent tab bar" effect.
24      bottomBarContainerStyle={{
25        position: 'absolute',
26        bottom: 0,
27        left: 0,
28        right: 0,
29      }}
30      {...props}
31    />
32  )}
33>
34  <Tab.Screen
35    options={{
36      tabBarIcon: tabBarIcon('aliwangwang-o1'),
37    }}
38    name="Home"
39    component={generateScreen('Home')}
40  />
41  <Tab.Screen
42    name="Meh"
43    options={{ tabBarIcon: tabBarIcon('meh') }}
44    component={generateScreen('Meh')}
45  />
46  <Tab.Screen
47    options={{
48      tabBarIcon: tabBarIcon('rocket1'),
49      tabBarActiveBackgroundColor: '#45014A',
50      tabBarActiveTintColor: 'purple',
51    }}
52    name="Settings"
53    component={SettingsScreen}
54  />
55  <Tab.Screen
56    options={{ tabBarIcon: tabBarIcon('Trophy') }}
57    name="Trophy"
58    component={generateScreen('Trophy')}
59  />
60  <Tab.Screen
61    options={{ tabBarIcon: tabBarIcon('wallet') }}
62    name="Wallet"
63    component={generateScreen('Wallet')}
64  />
65</Tab.Navigator>

🔧 Props

Prop	Type	Description
springConfig	`Animated.SpringConfig`	Spring config for the animation

⚒️ Usage with react-navigation v5

Install the version 1.0.3 :

yarn add rn-wave-bottom-bar@1.0.3

1const Tab = createBottomTabNavigator();
2
3const tabBarIcon =
4  (name: string) =>
5  ({
6    focused,
7    color,
8    size,
9  }: {
10    focused: boolean;
11    color: string; // Defines fab icon color
12    size: number;
13  }) =>
14    <Icon name={name} size={28} color={focused ? 'white' : 'white'} />;
15
16<NavigationContainer>
17  <Tab.Navigator
18    tabBarOptions={{
19      activeTintColor: 'purple', // Used for the FAB background Color
20    }}
21    tabBar={(props) => <BottomFabBar color="purple" {...props} />}
22  >
23    <Tab.Screen
24      options={{ tabBarIcon: tabBarIcon('aliwangwang-o1') }}
25      name="Home"
26      component={generateScreen('Home')}
27    />
28    <Tab.Screen
29      name="Account"
30      options={{ tabBarIcon: tabBarIcon('meh') }}
31      component={generateScreen('Meh')}
32    />
33  </Tab.Navigator>
34</NavigationContainer>;

Migration

TabBar:

tabBarOptions.activeTintColor -> screenOptions.tabBarActiveBackgroundColor

BottomFabBar :

color -> focusedButtonStyle

📄 Credits

Thanks to W.Candillon for the tuto : https://www.youtube.com/watch?v=6LsLgHeX500

Initial Design : https://uimovement.com/design/tab-bar-3/

Compatibility

✅ Works well with mosts Devices and tested on iPad, IPhones, Android Devices.

✅ Support device orientation.

✅ RTL support. (thanks darkhorse-coder)

📌 Checkout our other libraries :

rn-gauge : https://github.com/Winzana/rn-gauge
rn-exclude-system-gesture-area: https://github.com/Winzana/rn-exclude-system-gesture-area

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

Binary-Artifacts

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

0

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

CII-Best-Practices

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

0

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/Jm-Zion/rn-wave-bottom-bar/ci.yml/master?enable=pin
Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned

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

2.4

/10

Last Scanned on 2025-07-14

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