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

:warning: 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|-|