Measuring progress

The downside of merely indicating that progress is being made is that there's no end in sight for the user. This leads to a feeling of unease, like when waiting for food in a microwave with no timer. When we know how much progress has been made, and how much is left to go, we feel better. This is why it's always better to use a deterministic progress bar whenever possible.

Unlike the ActivityIndicator component, there's no platform agnostic component in React Native for progress bars. So, we'll have to make one ourselves. We'll create a component that uses <ProgressViewIOS> on iOS and <ProgressBarAndroid> on Android.

Let's handle the cross-platform issues first. Remember, React Native knows to import the correct module based on its extension. So here's what our ProgressBarComponent.ios.js module looks like:

// Exports the "ProgressViewIOS" as the 
// "ProgressBarComponent" component that 
// our "ProgressBar...