content: 
  import React, { Component } from 'react';
  import { Animated, TouchableOpacity,Dimensions, PropTypes,StyleSheet, TouchableHighlight } from 'react-native';
  import { View, Content, Text} from 'native-base';
  import styles from './styles';
  
  class CategoryBarChart extends Component {
      
     constructor(props) {
           super(props)
  
           const sumAllCategories = this.props.SumAll //////////////////i need this data
           const category = this.props.Sum; //////////////////i need this data
  
  
           const categoryWidth = this.getWidth(sumAllCategories, category);
           const width = {
               categoryItem: categoryWidth
           }
           this.state = {
               categoryItem: new Animated.Value(width.categoryItem)
           }
       }
       
      getWidth(sumAllCategories, category) {
          const oneCategory = category * (Dimensions.get('window').width - this.props.Window);
          return oneCategory / sumAllCategories;
      }
  
      handeleAnimation () {
          const timing = Animated.timing
          const width = {categoryItem: Dimensions.get('window').width - this.props.Window}
          const indicators = ['categoryItem']
          Animated.parallel(indicators.map(item => {
            return timing(this.state[item], {toValue: width[item]})
          })).start()
        }
  
  render() {
   const {categoryItem} = this.state
      return (
  
         <View style={styles.budgetWrap }>
                 {categoryItem &&
                    <Animated.View style={[styles.barWrapper, {width: Dimensions.get('window').width - this.props.Window + 2}]} >
                      <Animated.View style={[styles.bar, {width: categoryItem }]} >
                      </Animated.View>
                  </Animated.View>
                  }
              <Text style={styles.budgetValue} onPress={this.handeleAnimation.bind(this)}>{this.props.Name} </Text>
          </View>
  
      );
    }
  }
  
  export default CategoryBarChart;
  
          