import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const FacebookTabBar = React.createClass({
  tabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  },

  componentDidMount() {
    this.setAnimationValue({ value: this.props.activeTab, });
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue({ value, }) {
    this.tabIcons.forEach((icon, i) => {
      const progress = (value - i >= 0 && value - i <= 1) ? value - i : 1;
      icon.setNativeProps({
        style: {
          color: this.iconColor(progress),
        },
      });
    });
  },

  //color between rgb(59,89,152) and rgb(204,204,204)
  iconColor(progress) {
    const red = 59 + (204 - 59) * progress;
    const green = 89 + (204 - 89) * progress;
    const blue = 152 + (204 - 152) * progress;
    return `rgb(${red}, ${green}, ${blue})`;
  },

  render() {
    const tabWidth = this.props.containerWidth / this.props.tabs.length;
    const left = this.props.scrollValue.interpolate({
      inputRange: [0, 1, ], outputRange: [0, tabWidth, ],
    });

    return <View>
      <View style={[styles.tabs, this.props.style, ]}>
        {this.props.tabs.map((tab, i) => {
          return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
            <Icon
              name={tab}
              size={30}
              color={this.props.activeTab == i ? 'rgb(59,89,152)' : 'rgb(204,204,204)'}
              ref={(icon) => { this.tabIcons[i] = icon; }}
            />
          </TouchableOpacity>;
        })}
      </View>
      <Animated.View style={[styles.tabUnderlineStyle, { width: tabWidth }, { left, }, ]} />
    </View>;
  },
});

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 45,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
  tabUnderlineStyle: {
    position: 'absolute',
    height: 3,
    backgroundColor: '#3b5998',
    bottom: 0,
  },
});

export default FacebookTabBar;

@@ -83,20 +83,8 @@
 ty,%0A
-  Animated,%0A
 %7D fr
@@ -375,70 +375,8 @@
 ) %7B%0A
-    this.setAnimationValue(%7B value: this.props.activeTab, %7D);%0A
     
@@ -1018,221 +1018,14 @@
     
-const tabWidth = this.props.containerWidth / this.props.tabs.length;%0A    const left = this.props.scrollValue.interpolate(%7B%0A      inputRange: %5B0, 1, %5D, outputRange: %5B0, tabWidth, %5D,%0A    %7D);%0A%0A    return %3CView%3E%0A     
+return
  %3CVi
@@ -1076,18 +1076,16 @@
 %3E%0A      
-  
 %7Bthis.pr
@@ -1119,18 +1119,16 @@
         
- 
- 
 return %3C
@@ -1227,18 +1227,14 @@
     
-  
 %3CIcon%0A
-  
     
@@ -1264,18 +1264,16 @@
         
- 
- 
 size=%7B30
@@ -1274,18 +1274,16 @@
 ze=%7B30%7D%0A
-  
         
@@ -1316,16 +1316,17 @@
 veTab ==
+=
  i ? 'rg
@@ -1373,18 +1373,16 @@
         
- 
- 
 ref=%7B(ic
@@ -1432,15 +1432,11 @@
     
-  
 /%3E%0A
-  
     
@@ -1470,121 +1470,12 @@
     
-  
 %7D)%7D%0A
-      %3C/View%3E%0A      %3CAnimated.View style=%7B%5Bstyles.tabUnderlineStyle, %7B width: tabWidth %7D, %7B left, %7D, %5D%7D /%3E%0A
     
@@ -1789,32 +1789,32 @@
 rRightWidth: 0,%0A
+
     borderBottom
@@ -1849,124 +1849,8 @@
  %7D,%0A
-  tabUnderlineStyle: %7B%0A    position: 'absolute',%0A    height: 3,%0A    backgroundColor: '#3b5998',%0A    bottom: 0,%0A  %7D,%0A
 %7D);%0A

remove underline animation from FacebookTabBar