# react-native-reanimated-curved-tab-bar
### 
### react-native-reanimated, react-native-gesture-handler ARE peerDependencies 
### 

Built with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).

Fully native 60 FPS animations.

![](gifs/1.gif)  |![](gifs/2.gif)  |![](gifs/3.gif)  |
:---------------:|:---------------:|:---------------:|


## Getting started

`$ npm install reanimated-curved-tabs-bar --save`

or

`$ yarn add reanimated-curved-tabs-bar`

Requierd Dependencies: [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).

## Basic Usage
```javascript
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  
```javascript
      <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"  
```javascript

      <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
```javascript

        <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    | [<Component1>, ...<Component7>] // MAX iS 7! | Array |
| screensArray              | no       |    0    | [<Component1>, ...<Component7>] // 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 |