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 and 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 and react-native-reanimated.
Basic Usage
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
<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"
<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
<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 | [, ...] // 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 |