timothyjaveni/react-native-curved-bottom-tabbar

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