@joaosousa/react-native-progress-steps

A lightweight and simple React Native component that tracks your progress by steps.

!example 1
!example horizontal

Table of Contents

- Installation
- Usage
- Properties
- ProgressSteps
- Steps array model
- Colors customization model
- Demos
- Contributing
- License

Installation

Using yarn:

``sh
yarn add @joaosousa/react-native-progress-steps
`

Using npm:

`sh
npm install @joaosousa/react-native-progress-steps
`

Usage

You can use it as is, using default components:

`js
import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';

const [step, setStep] = useState(0);

currentStep={step}
steps={[
{
id: / Your id /,
title: ,
content: {/ Your content /},
},
{
id: / Your id /,
title: ,
content: {/ Your content /},
},
]}
/>;

`

If you want to customize, you can use the property colors following the structure on the example below:

`js
import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';

const [step, setStep] = useState(0);

currentStep={step}
steps={[
{
id: / Your id /,
title: ,
content: {/ Your content /},
},
{
id: / Your id /,
title: ,
content: {/ Your content /},
},
]}
colors={{
title: {
text: {
normal: '#94d2bd',
active: '#005f73',
completed: '#005f73',
},
},
marker: {
text: {
normal: '#94d2bd',
active: '#005f73',
completed: '#f4f3ee',
},
line: {
normal: '#94d2bd',
active: '#005f73',
completed: '#005f73',
},
},
}}
/>
`

Or, alternatively, with your own custom components:

`js
import ProgressSteps from '@joaosousa/react-native-progress-steps';
import YourMarker from './YourMarker';
import YourTitle from './YourTitle';
import YourContent from './YourContent';

const [step, setStep] = useState(0);

marker={}
currentStep={step}
steps={[
{
id: /Your id/,
title: {/Your title/},
content: {/ Your content /},
},
{
id: /Your id/,
title: {/Your title/},
content: {/ Your content /},
},
]}
/>;

`

To help you make visual changes, the property stepState will be automatically injected in your custom components with the following data:

`js
{
stepIndex: number;
isActive: boolean;
isCompleted: boolean;
isFirst: boolean;
isFirstInteraction: boolean;
isLast: boolean;
}
`

Here is an example of stepState usage in a custom component:

`js
import { Text } from 'react-native';

const CustomTitle = ({ children, stepState: { isCompleted } }) => {
if (isCompleted) {
return Well done! This step was completed.;
}

return {children};
};

export default CustomTitle;
`

Properties

$3

| Name | Description | Default | Type | Optional |
| ----------- | ---------------------------------------------- | ---------- | ------------------------------------- | -------- |
| currentStep | The index of the currently active step | none | Number | No |
| steps | List of steps | none | Array | No |
| orientation | Support for vertical or horizontal orientation | 'vertical' | String | Yes |
| marker | Custom step identifier | Marker | ReactElement | Yes |
| colors | Property that let you add customization | none | Object | Yes |

#### Steps array model

`js
[
{
id?: string | number,
title: ReactElement,
content?: ReactElement,
},
...
]
`

#### Colors customization model

`js
{
title?: {
text: {
normal: string,
active: string,
completed: string
}
},
marker?: {
text: {
normal: string,
active: string,
completed: string
},
line: {
normal: string,
active: string,
completed: string
}
}
}

``

Demos

| Example 1 | Example 2 | Example 3 |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| !example 1 | !example 2 | !example 3 |
| example/src/examples/Example1 | example/src/examples/Example2 | example/src/examples/Example3 |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT