Skip to content

numandev1/react-native-curved-bottom-tabbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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