react-native-arc-progress-bar

Customizable progress arc with an animated cursor to modify the progress in it. This project is in continuous development, and new functionalities will be considered if an issue is opened.

Behaviour is consistent in both Android and iOS.

Features

• Easy to use
• Consistent look and feel on iOS and Android
• Customizable font size, colors, and overall components dimensions and behaviour
• Dynamic dropdown size and position
• Configurable styles and views for numbers and texts

Installation

npm install --save react-native-arc-progress-bar react-native-svg

Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import ArcProgressBar, { resolveNewValue } from 'react-native-arc-progress-bar';
 
const Example = () => {
    const [state, setState] = useState(250);
 
    const [scrollableMax, absoluteMax] = [800, 2000];
    const onChange = ([alpha, beta]) => {
        setState(resolveNewValue(alpha, beta, absoluteMax, scrollableMax));
    }
 
    return (
        <>
        <View style={{flex: 1}}>
            <ArcProgressBar
                rectangularSize={250}
                lowerValue={100}
                stackedValue={state}
                maxValue={scrollableMax}
                absoluteMaxValue={absoluteMax}
                showCursor
                showMinMax
                minStyle={{textAlign: "center"}}
                maxStyle={{textAlign: "center"}}
                caption1Text={"MAX\n"}
                caption2Text={"\nMIN"}
                showMin
                showMax
                onChange={onChange}
            />
        </View>
        <View style={{flex: 1}} />
        </>
    );
};
 
export default Example;

Properties

name	description	type	default
rectangularSize*	Size of the component	Number	-
strokeWidth	Width of the bar	Number	-
containerStyle	Styles for container view	Object	-
progressStyle	Styles for arc bar view	Object	-
minMaxStyle	Styles for min	max view	Object
captionStyle	Styles for component caption view	Object	-
cursorStyle	Styles for animated cursor view	Object	-
maxStyle	Styles for inner upper caption view	Object	-
minStyle	Styles for inner lower caption view	Object	-
maxNumberStyle	Styles for inner upper number	Object	-
minNumberStyle	Styles for inner lower number	Object	-
showMinMax	Show full inner caption	Boolean	False
showCursor	Show animated cursor (if false, no onChange function should be added	Boolean	True
showMax	Show max caption	Boolean	False
showMin	Show min caption	Boolean	False
absoluteMaxValue*	Max value of the whole bar	Number	-
lowerValue*	Lower value of the animated bar	Number	-
stackedValue*	Current value of the animated bar	Number	-
maxValue	Max possible value of the animated bar	Number	-
maxText	Text for inner upper caption	String	-
minText	Text for inner lower caption	String	-
primaryColor	Color for animated bar	Hex color	#047FF9
shadowColor	Color for the shadow of the animated bar	Hex color	#BFDEFD
onChange	Callback with new cursor value (args: value)	Function	-

Copyright

Copyright 2019-2020 Alberto Hernandez. All rights reserved.