Nougat Predominant Middleware

    react-native-curved-bottom-tabbar

    0.0.5 • Public • Published

    Would you like to support me?

    Buy Me A Coffee


    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

    Install

    npm i react-native-curved-bottom-tabbar

    DownloadsWeekly Downloads

    9

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    21.9 kB

    Total Files

    3

    Last publish

    Collaborators

    • nomi9995