@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:

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

Using npm:

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

Usage

You can use it as is, using default components:

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

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

<ProgressSteps
  currentStep={step}
  steps={[
    {
      id: /* Your id */,
      title: <Title>{/* Your title */}</Title>,
      content: <Content>{/* Your content */}</Content>,
    },
    {
      id: /* Your id */,
      title: <Title>{/* Your title */}</Title>,
      content: <Content>{/* Your content */}</Content>,
    },
  ]}
/>;

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

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

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

<ProgressSteps
  currentStep={step}
  steps={[
    {
      id: /* Your id */,
      title: <Title>{/* Your title */}</Title>,
      content: <Content>{/* Your content */}</Content>,
    },
    {
      id: /* Your id */,
      title: <Title>{/* Your title */}</Title>,
      content: <Content>{/* Your content */}</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:

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);

<ProgressSteps
  marker={<YourMarker />}
  currentStep={step}
  steps={[
    {
      id: /*Your id*/,
      title: <YourTitle>{/*Your title*/}</YourTitle>,
      content: <YourContent>{/* Your content */}</YourContent>,
    },
    {
      id: /*Your id*/,
      title: <YourTitle>{/*Your title*/}</YourTitle>,
      content: <YourContent>{/* Your content */}</YourContent>,
    },
  ]}
/>;

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

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

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

import { Text } from 'react-native';

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

  return <Text>{children}</Text>;
};

export 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

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

Colors customization model

{
  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/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