react-native-reanimated-curved-tab-bar

react-native-reanimated, react-native-gesture-handler ARE peerDependencies

Getting started

Basic Usage

importReanimatedCurvedTabBarfrom"react-native-curved-bottom-tabbar";// TODO:<Viewstyle={styles.con}><ReanimatedCurveTabBar// ** Requiredheight={230}// Array of components (icons) []// ** RequirediconsArray={[...Array(ARRAY_LENGTH)].map((item,index)=>(<Viewstyle={styles.icon}><Text>{index+1}</Text></View>))}// Return icon numberonPress={(btnNum)=>console.log(btnNum)}allowDropAnime={true}/></View>;

With Screens Navigation

<Viewstyle={styles.con}><ReanimatedCurveTabBar// ** Requiredheight={230}// ** RequirediconsArray={[...Array(ARRAY_LENGTH)].map((item,index)=>(<Viewstyle={styles.icon}><Text>{index+1}</Text></View>))}onPress={(btnNum)=>console.log(btnNum)}// Array of ScreensscreensArray={[...Array(ARRAY_LENGTH)].map((item,index)=>(<Viewstyle={{          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.NavigatortabBar={(props)=>(<ReanimatedCurveTabBar// ** Required{...props}// ** RequiredreactNaviagtionBar={true}// ** Requiredheight={200}// ** RequirediconsArray={[...Array(ARRAY_LENGTH)].map((item,index)=>(<Viewstyle={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

<ReanimatedCurveTabBarheight={230}iconsArray={[...Array(ARRAY_LENGTH)].map((item,index)=>(<Viewstyle={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