Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jm-zion/rn-wave-bottom-bar

🌊 Animated Tab Bottom Bar for react-navigation
https://github.com/jm-zion/rn-wave-bottom-bar

animation bottom-tabs curved react-native react-navigation wave

Last synced: 3 days ago
JSON representation

🌊 Animated Tab Bottom Bar for react-navigation

Host: GitHub
URL: https://github.com/jm-zion/rn-wave-bottom-bar
Owner: Jm-Zion
License: mit
Created: 2020-05-30T19:11:38.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2025-02-08T13:46:01.000Z (6 days ago)
Last Synced: 2025-02-08T14:29:09.299Z (6 days ago)
Topics: animation, bottom-tabs, curved, react-native, react-navigation, wave
Language: TypeScript
Homepage:
Size: 32.4 MB
Stars: 334
Watchers: 4
Forks: 27
Open Issues: 36
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # rn-wave-bottom-bar [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Build Status](https://travis-ci.org/Jm-Zion/rn-wave-bottom-bar.svg?branch=master)](https://travis-ci.org/Jm-Zion/rn-wave-bottom-bar) [![Known Vulnerabilities](https://snyk.io/test/github/Jm-Zion/rn-wave-bottom-bar/badge.svg)](https://snyk.io/test/github/Jm-Zion/rn-wave-bottom-bar) [![CodeFactor](https://www.codefactor.io/repository/github/jm-zion/rn-wave-bottom-bar/badge)](https://www.codefactor.io/repository/github/jm-zion/rn-wave-bottom-bar)

![Sample](./sample.gif)

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

```

or

```

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

```jsx

 (

    

  )}

>

  

  

  

  

  

```

## 🔧 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 [email protected]

```

```typescript

const Tab = createBottomTabNavigator();

const tabBarIcon =

  (name: string) =>

  ({

    focused,

    color,

    size,

  }: {

    focused: boolean;

    color: string; // Defines fab icon color

    size: number;

  }) =>

    ;

   }

  >

    

    

  

;

```

## 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)

## More

📌 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