Fixed badge animation (#71)

* animation fix

animation fix

* animation fix

animation fix

* updated readme

updated readme

* changed fixed position value to dynamic

changed fixed position value to dynamic

* updated readme with new styles

updated readme with new styles

Author: ShayanJavadi

README.md

@@ -131,7 +131,7 @@ Don't skip this part. You will be happy to know about all the good stuff you can
 | **`onPress`** | Function to be called when the Tab was pressed. **When you use this, the pressed tab won't be active automatically. You need to set it to active by updating `BottomNavigation.activeTab`.** This function will be called with the parameter `(newTabIndex) => {}` | `function` | – |
 | **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - |
 | **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2)  | `number` | 20 |
-| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style  | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, bottom: 10 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` |
+| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style  | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, top: 3, left: "50%", marginLeft: 15 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` |
 | **`isBadgeVisible`** | Determines if the badge is visible or not  | `boolean` | - |
 
 ## Behind the Navigation Bar

lib/Badge.js

@@ -7,7 +7,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  StyleSheet
+  StyleSheet,
+  Animated
 } from 'react-native';
 
 type BProps = {
@@ -16,6 +17,7 @@ type BProps = {
   children: Array<ReactElement<*>>,
   style: any,
   isVisible: boolean,
+  translateY: number,
 }
 
 const defaultProps = {
@@ -42,7 +44,9 @@ export default class Badge extends Component {
         justifyContent: "center",
         backgroundColor: "#F50057",
         zIndex: 9999,
-        bottom: 10,
+        top: 3,
+        left: "50%",
+        marginLeft: 15
       },
       style.container
     );
@@ -64,18 +68,21 @@ export default class Badge extends Component {
   }
 
   render() {
-    const { children, text, isVisible } = this.props;
+    const { children, text, isVisible, translateY } = this.props;
     const styles = this.createStyles();
     if (!isVisible) {
       return null;
     }
 
     return (
-      <View>
-        <View style={styles.container}>
-          <Text style={styles.text}>{text}</Text>
-        </View>
-      </View>
+      <Animated.View
+        style={[
+          styles.container,
+          { transform: [{ translateY: translateY }] },
+        ]}
+      >
+        <Text style={styles.text}>{text}</Text>
+      </Animated.View>
     )
   }
 }

lib/Tab.js

@@ -129,18 +129,20 @@ export default class Tab extends Component {
 
   _renderBadge = () => {
     const { badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props;
+    const mode = this._getModeString();
 
     if (badgeText === undefined && !isBadgeVisible) {
       return null;
     }
 
     return (
-      <Badge
-        text={badgeText}
-        size={badgeSize}
-        style={badgeStyle}
-        isVisible={isBadgeVisible}
-      />
+        <Badge
+          text={badgeText}
+          size={badgeSize}
+          style={badgeStyle}
+          isVisible={isBadgeVisible}
+          translateY={this.state[mode].iconY}
+        />
     )
   }