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