can't animate series value (percentage) using Animated, why?

[syampolskiy]

Animation should starts after pressing on TouchableOpacity. any ideas why does not it work?

export default class TimelapseButton extends Component{
  constructor(props) {
    super(props);

    this.state = {
      progress: new Animated.Value(10)
    }
  }

  countTime = () => {
     Animated.timing(this.state.progress, {
        toValue: 100,
        duration: 4000
     }).start();
  }

  render() {
    return (
        <View style={styles2.container}>
            <TouchableOpacity onPress={this.countTime} style={styles2.container}>
              <PieDemo series={this.state.progress._value}/>
            </TouchableOpacity>
        </View>
    );
  }
}

[nihgwu]

what's the PieDemo, is it from Animated.createAnimatedComponent(Pie)

[syampolskiy]

please notice series={[this.props.series]}

class PieDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Pie
            radius={150}
            innerRadius={145}
            series={[this.props.series]}
            colors={['#f00']}
            backgroundColor='#ddd' />
          <View style={styles.gauge}>
            <Text style={styles.gaugeText}>60%</Text>
          </View>
        </View>
      </View>
    )
  }
}

[nihgwu]

const AnimatedPieDemo = Animated.createAnimatedComponent(PieDemo)
...
<AnimatedPieDemo series={this.state.progress}/>
...

[syampolskiy]

thank you so much! one more moment - animation is not smooth. is it the problem of Android SDK Simulator or it will have the same behavior on a real device?

[NotTooReact89]

I am not able to get animation working. Can you please post a sample code here?