Progress
A progress component can be used to show a user how far along he/she is in a process.
Usage
import React from 'react'
import styles from './styles'
import {View} from 'react-native'
import Progress from '../index'
import {Colors} from 'arivaa-basic/styles'
var view = function () {
return (
<View style={[styles.container]}>
<Progress
type="circle"
percent={60}
radius={50}
borderWidth={4}
color={Colors.brandGrey}
shadowColor="#ddd"
bgColor="#fff"
>
<Text>60%</Text>
</Progress>
<Progress
type="bar"
percent={30}
style={{height: 4}}
barStyle={{borderColor: Colors.brandGrey}}
/>
</View>
)
}
module.exports = view
Supported properties
Properties | Descrition | Type | Default |
---|---|---|---|
type | circle | bar | string | bar |
percent | it represents progress of task | number | - |
radius | it sets radius of circular component ( applies to circular component only ) | number | - |
borderWidth | sets the width of border of Progress component ( width of circumference ( in case of circular component ) and width of perimeter ( in case of progress component ) . | number | - |
color | sets the colour of finished region of progress component. | string | - |
shadowColor | sets the colour of unfinished region of progress component. | string | - |
bgColor | sets the background colour of progress component. | string | - |