react-native-curved-bottom-tabbar
Version:
React Native Reanimated Curve Tab Bar
198 lines (155 loc) • 7.49 kB
Markdown
### Would you like to support me?
<div align="center">
<a href="https://github.com/numandev1?tab=followers">
<img src="https://img.shields.io/github/followers/numandev1?label=Follow%20%40numandev1&style=social" height="36" />
</a>
<a href="https://www.youtube.com/channel/UCYCUspfN7ZevgCj3W5GlFAw"><img src="https://img.shields.io/youtube/channel/subscribers/UCYCUspfN7ZevgCj3W5GlFAw?style=social" height="36" /><a/>
</br>
<a href="https://www.buymeacoffee.com/numan.dev" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
</div>
---
# 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:
<View style={styles.con}>
<ReanimatedCurveTabBar
// ** Required
height={230}
// Array of components (icons) []
// ** Required
iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
<View style={styles.icon}>
<Text>{index + 1}</Text>
</View>
))}
// Return icon number
onPress={(btnNum) => console.log(btnNum)}
allowDropAnime={true}
/>
</View>;
```
##
## With Screens Navigation
```javascript
<View style={styles.con}>
<ReanimatedCurveTabBar
// ** Required
height={230}
// ** Required
iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
<View style={styles.icon}>
<Text>{index + 1}</Text>
</View>
))}
onPress={(btnNum) => console.log(btnNum)}
// Array of Screens
screensArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
<View
style={{
width,
height,
backgroundColor: "eee",
alignItems: "center",
justifyContent: "center",
}}
>
<Text>{index + 1}</Text>
</View>
))}
allowDropAnime={true}
/>
</View>
```
##
## As react-navigation/bottom-tabs's "tabBar"
```javascript
<NavigationContainer>
<Tab.Navigator
tabBar={(props) => (
<ReanimatedCurveTabBar
// ** Required
{...props}
// ** Required
reactNaviagtionBar={true}
// ** Required
height={200}
// ** Required
iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
<View style={styles.icon}>
<Text>{index + 1}</Text>
</View>
))}
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
</Tab.Navigator>
</NavigationContainer>
```
##
## Advanced Usage
```javascript
<ReanimatedCurveTabBar
height={230}
iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =>
(<View style={styles.icon}>
<Text>{index + 1}</Text>
</View>)
)}
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}
/>
</View>
```
## Props
| name | required | default | description | type |
| ------------------- | -------- | ------------ | ----------------------------------------------------------------------------------------- | ------- |
| height | yes | 15 | Nav bar height | Number |
| iconsArray | yes | 0 | [<Component1>, ...<Component7>] // MAX iS 7! | Array |
| screensArray | no | 0 | [<Component1>, ...<Component7>] // 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 |