@joaosousa/react-native-progress-steps

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

Table of Contents

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

Installation

Using yarn:

1yarn add @joaosousa/react-native-progress-steps

Using npm:

1npm install @joaosousa/react-native-progress-steps

Usage

You can use it as is, using default components:

1import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';
2
3const [step, setStep] = useState(0);
4
5<ProgressSteps
6  currentStep={step}
7  steps={[
8    {
9      id: /* Your id */,
10      title: <Title>{/* Your title */}</Title>,
11      content: <Content>{/* Your content */}</Content>,
12    },
13    {
14      id: /* Your id */,
15      title: <Title>{/* Your title */}</Title>,
16      content: <Content>{/* Your content */}</Content>,
17    },
18  ]}
19/>;
20

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

1import ProgressSteps, { Title, Content } from '@joaosousa/react-native-progress-steps';
2
3const [step, setStep] = useState(0);
4
5<ProgressSteps
6  currentStep={step}
7  steps={[
8    {
9      id: /* Your id */,
10      title: <Title>{/* Your title */}</Title>,
11      content: <Content>{/* Your content */}</Content>,
12    },
13    {
14      id: /* Your id */,
15      title: <Title>{/* Your title */}</Title>,
16      content: <Content>{/* Your content */}</Content>,
17    },
18  ]}
19  colors={{
20    title: {
21      text: {
22        normal: '#94d2bd',
23        active: '#005f73',
24        completed: '#005f73',
25      },
26    },
27    marker: {
28      text: {
29        normal: '#94d2bd',
30        active: '#005f73',
31        completed: '#f4f3ee',
32      },
33      line: {
34        normal: '#94d2bd',
35        active: '#005f73',
36        completed: '#005f73',
37      },
38    },
39  }}
40/>

Or, alternatively, with your own custom components:

1import ProgressSteps from '@joaosousa/react-native-progress-steps';
2import YourMarker from './YourMarker';
3import YourTitle from './YourTitle';
4import YourContent from './YourContent';
5
6const [step, setStep] = useState(0);
7
8<ProgressSteps
9  marker={<YourMarker />}
10  currentStep={step}
11  steps={[
12    {
13      id: /*Your id*/,
14      title: <YourTitle>{/*Your title*/}</YourTitle>,
15      content: <YourContent>{/* Your content */}</YourContent>,
16    },
17    {
18      id: /*Your id*/,
19      title: <YourTitle>{/*Your title*/}</YourTitle>,
20      content: <YourContent>{/* Your content */}</YourContent>,
21    },
22  ]}
23/>;
24

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

1{
2  stepIndex: number;
3  isActive: boolean;
4  isCompleted: boolean;
5  isFirst: boolean;
6  isFirstInteraction: boolean;
7  isLast: boolean;
8}

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

1import { Text } from 'react-native';
2
3const CustomTitle = ({ children, stepState: { isCompleted } }) => {
4  if (isCompleted) {
5    return <Text>Well done! This step was completed.</Text>;
6  }
7
8  return <Text>{children}</Text>;
9};
10
11export default CustomTitle;

Properties

ProgressSteps

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

1[
2  {
3    id?: string | number,
4    title: ReactElement,
5    content?: ReactElement,
6  },
7  ...
8]

Colors customization model

1{
2  title?: {
3    text: {
4      normal: string,
5      active: string,
6      completed: string
7    }
8  },
9  marker?: {
10    text: {
11      normal: string,
12      active: string,
13      completed: string
14    },
15    line: {
16      normal: string,
17      active: string,
18      completed: string
19    }
20  }
21}
22

Demos

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