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.