Why is this Animated.View not animating? - react-native

Question

I'm trying to animate the width of an Animated.View.
Here's the constructor of the component:
constructor(props) {
super(props);
this.barWidth = new Animated.Value(0);
this.barWidthInterpolate = this.barWidth.interpolate({
inputRange: [0, 1],
outputRange: [0, 100]
});
this.barWidthToValue = 1;
}
Here's the componentDidMount hook:
componentDidMount() {
Animated.timing(
this.barWidth,
{
useNativeDriver: true,
toValue: this.barWidthToValue,
easing: Easing.in(Easing.ease),
duration: 2000,
}
).start();
}
And here's the render method:
render() {
let colorObj = {
"green": [ "#9CFFD5", "#00CC76" ],
"blue": [ "#B0D0FF", "#0066FF" ],
"red": [ "#FF9C9C", "#FF0000" ]
};
let borderRadius = 5;
console.log(this.barWidth._value);
return (
<View style={{ width: "100%", height: 30 }}>
<Animated.View style={{ width: this.barWidthInterpolate, height: "100%" }}>
{ /* Linear gradient from react-native-linear-gradient */ }
<LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={colorObj[this.props.color]} style={{ maxWidth: "100%", minWidth: "100%", height: "100%", borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }}/>
</Animated.View>
</View>
);
}
Instead of animating, the component just skips to the last value.
Please help, I really don't know what to do. Thanks a lot in advance.