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 |