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
• signal
• 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

Installation with Expo

If you are using Expo, the Expo client app already includes the necessary native code for react-native-svg.

Install the JavaScript dependency with:

npx expo install react-native-svg

See the Expo docs for more information.

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, Signal} from '@brightlayer-ui/react-native-progress-icons';
...
<Battery percent={100} size={36} color={'green'} charging={true} outlined={true}/>
<Heart percent={50} size={18} color={'pink'} outlined={true}/>
<Pie percent={50} size={48} color={'blue'} ring={4} outlined={true}/>
<Signal percent={75} size={48} color={'teal'} 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 |