react-native-curved-bottom-tabbar v0.0.6

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