React-Native has a pretty ordinary progressbar which does not allow a lot of customizations,
but creating your own with animations is fairly simple.
First create a
state object ‘progress’ which will contain a progress value between 0 and 100 in your constructor
render function you can go ahead and design your Progress bar like this
This will basically create a progress bar where
progressBar_left style will flex the
progress colour(generally filled colour) to your progressState variable and
progressBar_right will flex for 100 - your progress
Now go ahead and give it this styling
overflow: 'hidden' in progressBar styles prevents the color from ever going out of progressbar.
To achieve spring animation you need to update your
componentWillUpdate to this
You can mess around with the time out and progress variable to suite your requirements. To achieve animation on updating your state variable ‘progress’ you need to add