react-native-curved-bottom-tabbar

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