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 -

Published On June 6, 2020 6:23 PM

Last Updated October 9, 2020 6:43 AM