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:

``sh
yarn add @brightlayer-ui/react-native-progress-icons
`

$3

In order to use this library, you must also have react-native-svg installed in your project. You can add it by running:

`sh
yarn add react-native-svg
`

$3

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

Install the JavaScript dependency with:

`sh
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.

`tsx
import {Battery, Heart, Pie} from '@brightlayer-ui/react-native-progress-icons';
...



`

API

$3

These props are available on all of the progress icons in this package.

Any other props supplied will be provided to the root element (Svg).

$3

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 |

$3

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 |