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.

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

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

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

Allows you to customize style

Determine progress bar's type

Current completion percentage (must be between 0 and 100)

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)

Line width of progress bar

Highlight color of progress bar

Color of progress track

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

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

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

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

(value: number) => string

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

() => React.ReactElement

Allow you to fully customize info area