Make <Progress /> in React Native

Posted Sunday, 04/26/2015

Where ActivityIndicatorIOS falls short for your UX, there come custom Components.

Here are two alternatives for your <ProgressBar /> Component.

react-native-progress

A simple progress bar component

<ProgressBar  
    completePercentage={30}
    color={"#4FB948}
    borderColor={"#007696"} />

Progress Bar

react-native-progress-bar

An animated progress bar for React Native

<ProgressBar  
  fillStyle={{}}
  backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
  style={{marginTop: 10, width: 300}}
  progress={this.state.progress}
/>

Progress Bar