Component ProgressBarAndroid has a props indeterminable = {Boolean}, which shows the user an animation of what is happening. I would like to do almost the same thing on ProgressViewIOS. So I tried to revive it with Animated ...
I saw in Animated documents a method called "createAnimatedComponent" that they use to create Animated.View
I tried to create another Animated (Native) component, but it doesn’t work at all. The animation should gradually increase fillValue to 20% and continue the original value from the media download ...
This is my component.
// ProgressBar.ios.js // @flow import { PropTypes } from 'react'; import Component from 'components/base/Component'; import { ProgressViewIOS, Animated } from 'react-native'; const AnimatedProgressViewIOS = Animated.createAnimatedComponent(ProgressViewIOS); class ProgressBarIOS extends Component { static propTypes = { // Percentage (0 - 100) fill: PropTypes.number.isRequired, }; constructor(props, context: any) { super(props, context); this.state = { fillValue: new Animated.Value(props.fill), }; } componentWillReceiveProps(nextProps) { if (nextProps.fill === 0) { Animated.timing(this.state.fillValue, { toValue: 0.2, duration: 500 }).start(); } else if (nextProps.fill > 19) { this.state.fillValue.setValue(nextProps.fill / 100); } } shouldComponentUpdate(nextProps) { return this.props.fill !== nextProps.fill; } render() { return ( <AnimatedProgressViewIOS style={{ alignSelf: 'stretch' }} progress={this.state.fillValue} /> ); } } export default ProgressBarIOS;
EDIT: AnimatedComponent is used only to change the style. Props can be passed as an animated value, but remember that this is not a number!
source share