1

I'm trying to make a simple animation that indicates the progress of the upload. For that I use the great react-native-fetch-blob library in order to upload and track the progress of the upload. I'm updating the state as you can see below but I'm having a hard time animating the width of my view. 

.uploadProgress({ interval : 50 },(written, total) => {
  this.setState({progressBarValue:  parseInt((written / total) * 100)});
  console.log("State Progress Value", this.state.progressBarValue);
})

I tried with Animated.View and the interpolate function to map the values but It did not work. With the method below it is animating but I can't the values to match my screen size. 

<View style={{position: 'absolute', top:0, right:0, left:0, height: 2}}>
      <Animated.View style={[
        { backgroundColor: 'red', height: 2},
        {
          width: this.state.progressBarValue
        }
      ]} />
</View>

I know there are already built components to display progress but I want to animate during the time I'm uploading the photo with the progress value that I get from the callback.

Do you have any ideas ?

e_netr
  • 563
  • 1
  • 6
  • 22

1 Answers1

0

I guess you would want to get the width of your device first using

const { Dimensions } = React; 
Dimensions.get('window').width

and then calculating 1% of your screen width in pixels

Stefan
  • 25
  • 5
  • Hi ! I already get the width of the screen and wanted to use the convenient interpolate function from `Animated` but then I have to use Animated.timing and this is not what I want since I need to use my progressBarValue – e_netr Jun 15 '17 at 13:52