@rn-components-kit/progress

Progress

English | 中文

Display the current progress of an operation flow. It supports the following features:

• line and circle two types of progress bar
• normal, active, success and fail four status for progress bar
• customized color and linear gradient supporting for line progress bar
• customized percent formatter, even fully control of customization for you to render info area

⚠️ NOTE

As Progress supports linear gradient option, you should add react-native-linear-gradient into your project. If you havn't do this, you can follow the instructions here.

How to use

npm install @rn-components-kit/progress --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code
	Demo5 Code

Props

• style
• type
• percent
• status
• lineWidth
• color
• trackColor
• radius
• showInfo
• lineInfoTextStyle
• circleInfoTextStyle
• percentFormatter
• renderInfo

Reference

Props

style

Allows you to customize style

Type	Required	Default
object	no	-

type

Determine progress bar's type

Type	Required	Default
enum('line', 'circle')	no	'line'

percent

Current completion percentage (must be between 0 and 100)

Type	Required	Default
number	no	0

status

Status of progress

• normal: task is doing (0 <= percent < 100)
• active: an pulse animation (only works for line progress bar)
• success: task 100% completed (default green color)
• fail: task failed (default red color)

Type	Required	Default
enum('normal', 'active', 'success', 'fail')	no	'normal'

lineWidth

Line width of progress bar

Type	Required	Default
number	no	6

color

Highlight color of progress bar

Type	Required	Default
string	no	'#40A9FF'

trackColor

Color of progress track

Type	Required	Default
string	no	'#EFEFEF'

radius

Radius of circle (only works when type is 'circle')

Type	Required	Default
number	no	50

showInfo

Determines whether to display info area (percent tip and icon)

Type	Required	Default
boolean	no	true

lineInfoTextStyle

Allows you to customize percent tip's style (only works when type is 'line')

Type	Required	Default
object	no	-

circleInfoTextStyle

Allows you to customize percent tip's style (only works when type is 'circle')

Type	Required	Default
object	no	-

percentFormatter

(value: number) => string

Progress will pass value to percentFormatter, and display its return value in info area

Type	Required	Default
function	no	value => ${value}%

renderInfo

() => React.ReactElement

Allow you to fully customize info area

Type	Required	Default
function	no	-