Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/numandev1/react-native-curved-bottom-tabbar
Curved Bottom Tabbar React Native
https://github.com/numandev1/react-native-curved-bottom-tabbar
curved curved-bottom-sheet tabbar
Last synced: about 2 months ago
JSON representation
Curved Bottom Tabbar React Native
- Host: GitHub
- URL: https://github.com/numandev1/react-native-curved-bottom-tabbar
- Owner: numandev1
- Created: 2020-08-06T05:49:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-02T19:28:15.000Z (about 2 years ago)
- Last Synced: 2024-10-24T21:38:35.130Z (2 months ago)
- Topics: curved, curved-bottom-sheet, tabbar
- Language: JavaScript
- Homepage:
- Size: 2.31 MB
- Stars: 26
- Watchers: 3
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
### Would you like to support me?
---
# react-native-reanimated-curved-tab-bar
###
### react-native-reanimated, react-native-gesture-handler ARE peerDependencies
###
Built with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
Fully native 60 FPS animations.
|  |  |  |
| :-------------: | :-------------: | :-------------: |
## Getting started
`$ npm install react-native-curved-bottom-tabbar --save`
or
`$ yarn add react-native-curved-bottom-tabbar`
Requierd Dependencies: [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
## Basic Usage
```javascript
import ReanimatedCurvedTabBar from "react-native-curved-bottom-tabbar";
// TODO:
(
{index + 1}
))}
// Return icon number
onPress={(btnNum) => console.log(btnNum)}
allowDropAnime={true}
/>
;
```
##
## With Screens Navigation
```javascript
(
{index + 1}
))}
onPress={(btnNum) => console.log(btnNum)}
// Array of Screens
screensArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
{index + 1}
))}
allowDropAnime={true}
/>
```
##
## As react-navigation/bottom-tabs's "tabBar"
```javascript
(
(
{index + 1}
))}
allowDropAnime={true}
/>
)}
>
// Your Screens Here // ** Screens name property must be 1 - screens /
iconsArray length // ** Screens number equal to iconsArray length // For
more info look in Example
```
##
## Advanced Usage
```javascript
(
{index + 1}
)
)}
onPress={(btnNum) => console.log(btnNum)}
topGap={15}
tabColor={'white'}
backgroundColor={'firebrick'}
duration={300}
sidesRadius={1}
marginBottom={23}
scaleYCircle={1.4}
iconTranslateY={-5}
lockTranslateYAnime={true}
iconScale={1.4}
lockScaleAnime={true}
iconDropY={30}
allowDropAnime={true}
dropWithFirst={false}
/>
```
## Props
| name | required | default | description | type |
| ------------------- | -------- | ------------ | ----------------------------------------------------------------------------------------- | ------- |
| height | yes | 15 | Nav bar height | Number |
| iconsArray | yes | 0 | [, ...] // MAX iS 7! | Array |
| screensArray | no | 0 | [, ...] // MAX iS 7! | Array |
| onPress | no | | Return the number of the pressed icon (1-7) | Method |
| reactNaviagtionBar | no | | Use as react-navigation/bottom-tabs's "tabBar" property | Boolean |
| topGap | no | 0 | Top Gap height | Number |
| tabColor | no | 'white' | Tabs color | Color |
| backgroundColor | no | 'dodgerblue' | Background color | Color |
| duration | no | 300 | Animation duration | Number |
| sidesRadius | no | 1 | multipling the default sides radius 0.1 - 1 | Number |
| marginBottom | no | 23 | Icons marginBottom (distance from ground). recommended values depends on component height | Number |
| scaleYCircle | no | 1.4 | Glich animation in the bottom of picked icon. Recommended values: 0.7 - 1.4 | Number |
| iconTranslateY | no | -10 | Picked icon translateY Animation. - => top ; + => bottom | Number |
| lockTranslateYAnime | no | | Active icon translateY animation | Boolean |
| iconScale | no | 1.4 | Picked icon scaling animation | Number |
| lockScaleAnime | no | | Active icon scaling animation | Boolean |
| iconDropY | no | 30 | Icons drop down animation | Number |
| allowDropAnime | no | | Active Icons drop down animation | Boolean |
| allowDropAnime | no | | First icon will also drop down | Boolean |
