Code cleaning Tab

timomeh · Feb 26, 2017 · 72b4ea1 · 72b4ea1
1 parent a40a93d
commit 72b4ea1
Showing 1 changed file with 30 additions and 28 deletions.
diff --git a/lib/Tab.js b/lib/Tab.js
@@ -19,49 +19,50 @@ import { easeInOut } from './utils/easing'
 
 const useNativeDriver = Platform.OS === 'android'
 
-type Props = {
+type TabProps = {
   active: boolean,
   shifting: boolean,
   tabIndex: number,
-  barBackgroundColor?: string,
+  barBackgroundColor: string,
   icon: ReactElement<*>,
   activeIcon?: ReactElement<*>,
   label: string,
-  labelColor?: string,
+  labelColor: string,
   activeLabelColor?: string,
   onTabPress: () => void
 }
 
-export default class Tab extends Component {
-  props: Props
-
-  state: {
-    fixed: {
-      labelScale: Animated.Value,
-      labelY: Animated.Value,
-      iconY: Animated.Value,
-      iconOpacity: Animated.Value
-    },
-    shifting: {
-      labelOpacity: Animated.Value,
-      labelScale: Animated.Value,
-      iconY: Animated.Value,
-      iconOpacity: Animated.Value
-    }
+type TabState = {
+  fixed: {
+    labelScale: Animated.Value,
+    labelY: Animated.Value,
+    iconY: Animated.Value,
+    iconOpacity: Animated.Value
+  },
+  shifting: {
+    labelOpacity: Animated.Value,
+    labelScale: Animated.Value,
+    iconY: Animated.Value,
+    iconOpacity: Animated.Value
   }
+}
 
-  // HACK: In shifting mode, after the first animation from active to inactive,
-  //   the icon jumps down before animating to the active state again.
-  //   In order to fix this, we need to store, if it already was active. Then we
-  //   can catch that case and manually move it up before animating.
-  //   This only happens in Android, not iOS.
-  //   Is this a bug in react-native or somewhere here?
+export default class Tab extends Component {
+
+  props: TabProps
+  state: TabState
   didOnceBecameActive: boolean
 
-  constructor(props: Props) {
+  constructor(props: TabProps) {
     super(props)
     const { active } = props
 
+    // HACK: In shifting mode, after the first animation from active to
+    //   inactive, the icon jumps down before animating to the active state
+    //   again. In order to fix this, we need to store, if it already was
+    //   active. Then we can catch that case and manually move it up before
+    //   animating. This only happens in Android, not iOS.
+    //   Is this a bug in react-native or somewhere here?
     this.didOnceBecameActive = props.active ? true : false
 
     this.state = {
@@ -81,7 +82,7 @@ export default class Tab extends Component {
   }
 
   // Animations will start as soon as new props are passed through
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: TabProps) {
     const { props } = this
 
     const fixedMode = !props.shifting
@@ -234,7 +235,7 @@ export default class Tab extends Component {
   }
 
   setTabActive = () => {
-    // setting the tab active is job of the BottomNavigation Component,
+    // Setting the tab active is job of the BottomNavigation Component,
     // so call it's function to handle that.
     this.props.onTabPress({
       tabIndex: this.props.tabIndex,
@@ -261,6 +262,7 @@ export default class Tab extends Component {
   }
 }
 
+
 const styles = StyleSheet.create({
   container: {
     height: 56,