RN Progress Button

Awesome progress button made in React Native.

Installation

yarn add rn-progress-button or npm install rn-progress-button

How to use

First of all, you should import this package into your file.

import RNProgressButton from "rn-progress-button"

After this, you only need to use it :)

<RNProgressButton />

Screenshot

Props

Prop	Default	Type	Description
completed	85%	string	How much of the process is already completed.
onPress	() => {}	func	Function that will be executed by clicking the main button (next).
secondaryOption	{}	object	If we are in 100% of the process and there is a value for this props, a new secondary button will be rendered.
renderLabel	(labelColor, label) => {...}	func	Method used to render the button label.
renderIcon	(isActive) => {...}	bool	Method used to render the button icon.
finishLabel	Finish	string	Label button when the process is at 100%
nextLabel	Next Step	string	Label button when the process is not yet at 100%
completedColor	#7E1FB7	string	Background and label color of the completed part
incompletedColor	#EDEFEF	string	Background and label color of the incompleted part

Example:

<RNProgressButton
    completed="40%"
    completedColor="red"
    incompletedColor="white"
    renderLabel={(labelColor, label) => {
        return <Text style={{ color: labelColor }}>{label}</Text>;
    }}
    renderIcon={isActive => {
        const isActiveImage = isActive
        ? require('@assets/images/icons/icContinueOff.png')
        : require('@assets/images/icons/icContinue.png');

        return <Image source={isActiveImage};
    }}
    onPress={() => {}}
/>