react-native-arc-progress
v0.0.6
Published
React Native component for creating animated, arc progress with ReactART
Downloads
21
Maintainers
Readme
react-native-arc-progress
React Native component for creating animated, arc progress with ReactART. Useful for displaying users points for example.
ChangLog
- fix weird diplay when fill is less that 0.01;
Example app
Installation
- Install library
npm i --save react-native-arc-progress
- Link ART library to your ReactNative project (how to link a library?). You'll find ReactART library in
node_modules/react-native/Libraries/ART/ART.xcodeproj
Usage
Import ArcProgress or AnimatedArcProgress.
import { AnimatedArcProgress } from 'react-native-arc-progress';
Use as follows:
<AnimatedArcProgress
size={120}
width={15}
fill={100}
missingDegree={90}
tintColor="#00e0ff"
backgroundColor="#3d5875" />
You can also define a function, that'll receive current progress and for example display it inside the circle:
<AnimatedArcProgress
size={200}
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
missingDegree={90}
backgroundColor="#3d5875">
{
(fill) => (
<Text style={styles.points}>
{ this.state.fill }
</Text>
)
}
</AnimatedArcProgress>
Configuration
You can configure the passing by following props:
- size – width and height of the circle
- width - thickness of the line
- fill - current, percentage fill (from 0 to 100)
- prefill - percentage fill before the animation (from 0 to 100)
- missingDegree - missing part of arc, unit is degree (0-360)
- tintColor - color of a progress line
- backgroundColor - color of a background for progress line
- rotation - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
- children(fill) - you can pass function as a child to receive current fill
Special thanks
Special thanks to Chalk+Chisel for creating working environment where people grow. This component was created for one of the projects we're working on.