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 reanimated-curved-tabs-bar --save

or

$ yarn add reanimated-curved-tabs-bar

Requierd Dependencies: react-native-gesture-handler and react-native-reanimated.

Basic Usage

import ReanimatedCurvedTabBar from 'reanimated-curved-tabs-bar';

// 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