Animate bar chart issue in React Native - react-native

Question

I'm doing a bar chart and the issue is that it loads to the downside. I just need to make it correct side. How can I solve that issue?
Here I attached a current image of the graph:
Here is the index.js and I used child component AnimatedBar to draw each bar column. I generated random heights and passed them to the child component.
componentDidMount() {
this.generateData();
// this.interval = setInterval(() => {
// this.generateData();
// }, 1000); }
componentWillUnmount() {
clearInterval(this.interval); }
generateData = () => {
const data = [];
for (let i = 0; i < 10; i++) {
data.push(Math.floor(Math.random() * window.width));
}
this.setState({
data,
}); }
render() {
return (
<View style={{ flex: 1,flexDirection:"column", backgroundColor: '#F5FCFF', justifyContent: 'center'}}>
<View style={{flexDirection:"row",justifyContent: 'flex-end'}}>
{this.state.data.map((value, index) => <AnimatedBar value={value} delay={DELAY * index} key={index} />)}
</View>
</View>
); }
Here I added the child component:
class AnimatedBar extends Component {
constructor(props) {
super(props);
this._width = new Animated.Value(0);
this.state = {
color: randomcolor(),
};
}
componentDidMount() {
this.animateTo( this.props.value);
}
componentWillReceiveProps(nextProps) {
this.animateTo( nextProps.value);
}
animateTo = (value) => {
// Animated.sequence([
// Animated.delay(delay),
// Animated.timing(this._width, {
// toValue: value,
// }),
// ]).start();
Animated.timing(this._width, {
toValue: value,
}).start();
}
render() {
const barStyles = {
backgroundColor: this.state.color,
height: this._width,
width:40,
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
};
return (
<Animated.View style={barStyles} />
);
}
}

Answer 1

Animated.timing(this._width, {
toValue: value,
}).start();
If you will pass the positive value to the toValue variable then bar will go downward and if you will pass the negative value toValue variable then bar will go upward.
Try this by passing negative value to the toValue like :
Animated.timing(this._width, {
toValue: -30,
}).start();