warn example import * as React from 'react' ; import { View , Text , Animated , Easing , } from 'react-native' ; import styles from './styles' ; import { ProgressProps , ProgressState } from './PropsType' ; export default class _Progress extends React . Component < ProgressProps , ProgressState > { static defaultProps = { percent : 0 , strokeWidth : 6 , activeColor : '#09BB07' , backgroundColor : '#EBEBEB' , activeMode : 'backwards' , borderRadius : 0 , } ; static getDerivedStateFromProps ( props , state ) { return props . percent !== state . percent ? { percent : props . percent , prevPercent : state . percent , valve : state . valve } : null ; } state : ProgressState = { percent : 0 , prevPercent : 0 , valve : new Animated . Value ( 0 ) } ; animate = ( ) : void => { const { active , activeMode } = this . props ; const { percent , prevPercent , valve } = this . state ; const toValve = percent / 100 ; if ( ! active || ( activeMode !== 'backwards' && activeMode !== 'forwards' ) ) { Animated . timing ( valve , { toValue : toValve , duration : 0 , useNativeDriver : false } ) . start ( ) ; return ; } const sequence = [ ] ; const duration = ( activeMode === 'forwards' ? Math . abs ( percent - prevPercent ) : percent ) / 100 * 1000 ; if ( activeMode === 'backwards' ) { sequence . push ( Animated . timing ( valve , { toValue : 0 , duration : 0 , useNativeDriver : false } ) ) ; } sequence . push ( Animated . timing ( valve , { toValue : toValve , easing : Easing . linear , duration , useNativeDriver : false } ) ) ; Animated . sequence ( sequence ) . start ( ) ; } ; componentDidMount ( ) { this . animate ( ) ; } getSnapshotBeforeUpdate ( prevProps , prevState ) { return prevState . percent !== this . state . percent ; } componentDidUpdate ( prevProps , prevState , snapshot ) { if ( snapshot ) { this . animate ( ) ; } } render ( ) { const { style , percent , showInfo , borderRadius , strokeWidth , activeColor , backgroundColor , } = this . props ; const width = this . state . valve . interpolate ( { inputRange : [ 0 , 1 ] , outputRange : [ '0%' , '100%' ] } ) ; return ( < View style = { [ styles . wrapper , style ] } > < View style = { [ styles . bar , { height : strokeWidth , backgroundColor } ] } > < Animated . View style = { [ styles . barThumb , { width , height : '100%' , backgroundColor : activeColor , borderBottomRightRadius : Number ( borderRadius ) , borderTopRightRadius : Number ( borderRadius ) , } ] } /> < /View> { showInfo && < Text style = { styles . info } > { percent } % < /Text>} < /View>); } }