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

1import ReanimatedCurvedTabBar from "react-native-curved-bottom-tabbar";
2
3// TODO:
4<View style={styles.con}>
5  <ReanimatedCurveTabBar
6    // ** Required
7    height={230}
8    // Array of components (icons) []
9    // ** Required
10    iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
11      <View style={styles.icon}>
12        <Text>{index + 1}</Text>
13      </View>
14    ))}
15    // Return icon number
16    onPress={(btnNum) => console.log(btnNum)}
17    allowDropAnime={true}
18  />
19</View>;

With Screens Navigation

1<View style={styles.con}>
2  <ReanimatedCurveTabBar
3    // ** Required
4    height={230}
5    // ** Required
6    iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
7      <View style={styles.icon}>
8        <Text>{index + 1}</Text>
9      </View>
10    ))}
11    onPress={(btnNum) => console.log(btnNum)}
12    // Array of Screens
13    screensArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
14      <View
15        style={{
16          width,
17          height,
18          backgroundColor: "eee",
19          alignItems: "center",
20          justifyContent: "center",
21        }}
22      >
23        <Text>{index + 1}</Text>
24      </View>
25    ))}
26    allowDropAnime={true}
27  />
28</View>

As react-navigation/bottom-tabs's "tabBar"

1<NavigationContainer>
2  <Tab.Navigator
3    tabBar={(props) => (
4      <ReanimatedCurveTabBar
5        // ** Required
6        {...props}
7        // ** Required
8        reactNaviagtionBar={true}
9        // ** Required
10        height={200}
11        // ** Required
12        iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) => (
13          <View style={styles.icon}>
14            <Text>{index + 1}</Text>
15          </View>
16        ))}
17        allowDropAnime={true}
18      />
19    )}
20  >
21    // Your Screens Here // ** Screens name property must be 1 - screens /
22    iconsArray length // ** Screens number equal to iconsArray length // For
23    more info look in Example
24  </Tab.Navigator>
25</NavigationContainer>

Advanced Usage

1
2        <ReanimatedCurveTabBar
3
4          height={230}
5
6          iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =>
7            (<View style={styles.icon}>
8              <Text>{index + 1}</Text>
9            </View>)
10          )}
11
12          onPress={(btnNum) => console.log(btnNum)}
13
14          topGap={15}
15
16          tabColor={'white'}
17          backgroundColor={'firebrick'}
18
19          duration={300}
20
21          sidesRadius={1}
22
23          marginBottom={23}
24
25          scaleYCircle={1.4}
26
27          iconTranslateY={-5}
28          lockTranslateYAnime={true}
29
30          iconScale={1.4}
31          lockScaleAnime={true}
32
33          iconDropY={30}
34          allowDropAnime={true}
35          dropWithFirst={false}
36
37        />
38      </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