rnc

react-native-curved-bottom-tabbar

Curved Bottom Tabbar React Native

Showing:

Popularity

Downloads/wk

10

GitHub Stars

18

Maintenance

Last Commit

1yr ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

namerequireddefaultdescriptiontype
heightyes15Nav bar heightNumber
iconsArrayyes0[, ...] // MAX iS 7!Array
screensArrayno0[, ...] // MAX iS 7!Array
onPressnoReturn the number of the pressed icon (1-7)Method
reactNaviagtionBarnoUse as react-navigation/bottom-tabs's "tabBar" propertyBoolean
topGapno0Top Gap heightNumber
tabColorno'white'Tabs colorColor
backgroundColorno'dodgerblue'Background colorColor
durationno300Animation durationNumber
sidesRadiusno1multipling the default sides radius 0.1 - 1Number
marginBottomno23Icons marginBottom (distance from ground). recommended values depends on component heightNumber
scaleYCircleno1.4Glich animation in the bottom of picked icon. Recommended values: 0.7 - 1.4Number
iconTranslateYno-10Picked icon translateY Animation. - => top ; + => bottomNumber
lockTranslateYAnimenoActive icon translateY animationBoolean
iconScaleno1.4Picked icon scaling animationNumber
lockScaleAnimenoActive icon scaling animationBoolean
iconDropYno30Icons drop down animationNumber
allowDropAnimenoActive Icons drop down animationBoolean
allowDropAnimenoFirst icon will also drop downBoolean

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100