JWE Components

Installation

Install via NPM:

npm i jwe-components --save

Dependencies

You will need to install and configure the react-native-svg npm package in order for this package to work.

npm i react-native-svg

Usage

At this point there are 3 components:

• <JWE.Icon>,
• <JWE.Progress.Circle>
• <JWE.Progress.Line>.

Progress Example

• <JWE.Progress.Circle percentage="20" size="15" color="#000000" bkgdColor="#e8e8e8" lineWidth="2" />
• <JEW.Progress.Line percentage="20" size="15" color="#000000" bkgdColor="#e8e8e8" lineWidth="2" />

Props

| Prop | Default | Description | |------|---------|-------------| | percentage | 0 | The percentage of progress the chart should display. | | size | 60 | The width of the progress indicator in pixels. This sets the height and width. | | color | #000000 | The HEX color value of the fill line. | | bkgdColor | #e8e8e8 | The HEX color value of the background circle. | | lineWidth | 2 | The width of the fill line. |

Icon Example

• <JWE.Icon name="home" type="png" size={18} />
• <JWE.Icon name="home" type="svg" size={18} color="green" />

Props

| Prop | Default | Description | |------|---------|-------------| | name | home | The name of the icon. | | size | 10 | The width of the progress indicator in pixels. This sets the height and width. | | color | black | Can be any one of black, white, gray, or green. Note: Only works with SVG images. | | type | svg | Can be svg or png. Default to svg if left blank. |