Brightlayer UI React Native Progress Icons
This is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.
Currently, we have icons available for:
- battery
- heart
- pie
- ups
Installation
To install the Brightlayer UI progress icons from NPM as a dependency for your project, you can run the following command in your project root:
yarn add @brightlayer-ui/react-native-progress-icons
Peer Dependencies
In order to use this library, you must also have react-native-svg
installed in your project. You can add it by running:
yarn add react-native-svg
Using the progress icons in your application
The progress icon components can be imported and used like you would use any other component.
import {Battery, Heart, Pie} from '@brightlayer-ui/react-native-progress-icons';
...
<Battery color={'blue'} percent={100} size={36} color={'green'} charging={true} outlined={true}/>
<Heart color={'red'} percent={50} size={18} color={'pink'} outlined={true}/>
<Pie color={'green'} percent={50} size={48} color={'blue'} ring={4} outlined={true}/>
API
Shared Properties
These props are available on all of the progress icons in this package.
Prop Name | Description | Type | Required | Default |
---|---|---|---|---|
backgroundColor | Background color for the unfilled area | string |
no | |
color | The color used for the icon fill | string |
yes | |
labelColor | Label text color | string |
no | |
labelPosition | Where to display the text label |
'top' | 'bottom' | 'center' | 'right' | 'left'
|
no | center |
labelSize | Size of the label in px | number |
no | size/4 |
outlined | Whether to use the outlined style | boolean |
no | false |
percent | The amount to fill the icon (0-100) | number |
no | 100 |
showPercentLabel | Option to show percentage overlay | boolean |
no | false |
size | The size of the icon (in px) | number |
no | 24 |
Any other props supplied will be provided to the root element (Svg
).
Battery Properties
The battery supports all of the shared properties above and the following additional properties:
Prop Name | Description | Type | Required | Default |
---|---|---|---|---|
charging | Whether to show the charging indicator | boolean |
no | false |
Pie Properties
The pie supports all of the shared properties above and the following additional properties:
Prop Name | Description | Type | Required | Default |
---|---|---|---|---|
ring | The thickness of the outer ring (1 = thin ring, 10 = full circle ) | number |
no | 10 |