@rn-components-kit/progress v1.0.1

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

Props

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

Reference

Props

style

Allows you to customize style

type

Determine progress bar's type

percent

Current completion percentage (must be between 0 and 100)

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)

lineWidth

Line width of progress bar

color

Highlight color of progress bar

trackColor

Color of progress track

radius

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

showInfo

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

lineInfoTextStyle

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

circleInfoTextStyle

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

percentFormatter

(value: number) => string

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

renderInfo

() => React.ReactElement

Allow you to fully customize info area