react-native-segmented-progress

Simple segmented progress component for React Native that mimics the look of the Instagram Story-UI.

Installation

The easiest way to use react-native-segmented-progress is to install it from NPM.

npm install react-native-segmented-progress --save

Usage

Using SegmentedProgress is as easy as including it into your component hierarchy and passing in the props. If you pass a style to the indicator it's passed on to the root view that is being rendered. Use this to layout your indicator on screen.

<SteppedProgressIndicator style={styles.progressIndicator}
					      numberOfSteps={this.props.quotes.length} 
					      activeStep={this.state.currentIndex} />

Properties

• numberOfSteps: The total number of steps you want to display. (int, required)
• activeStep: Which step should be highlighted as the currently active one. Steps before the active one are reduced by one opacity level, steps behind the active one by two opacity levels. (int, required)
• tintColor: The color which should be used to tint the steps. Defaults to 'white'. (string)
• segmentMargin: How much margin the steps should have to each other. Defaults to 4. (int)

Notes

If you should find a bug in this very minimalistic component or want to extend it with more features (touchability, more styling options, ...) please feel free to open up a pull request!

License

Copyright (c) 2017 Tim Specht.