npm package: @muhammetbalikci/react-native-step-indicator
Description: StepIndicator is a React Native component used to visually represent a sequence of steps in your application. It supports only vertical orientations for now and offers a range of customization options for the step indicators.
Author: muhammetbalikci
Latest version: 1.0.4


# Step-Indicator

StepIndicator is a React Native component used to visually represent a sequence of steps in your application. It supports only vertical orientations for now and offers a range of customization options for the step indicators.


## Features

- **Vertical Orientation:** There is only vertical orientation for now.
- **Customization:** Customize step indicators, step texts, separator colors, and more.
- **Dynamic Step Display:** Different styles and colors for active, completed, and inactive steps.

## Installation

To add the package to your project:

```bash
npm install step-indicator
```
or
```bash
yarn add step-indicator
```

## Usage
You can use the StepIndicator component in your project like this:


```import React from 'react';
import { View, StyleSheet } from 'react-native';
import ProgressStepper from 'progress-stepper';

const steps = [
  { label: 'Step 1', time: '10:00 AM' },
  { label: 'Step 2', time: '11:00 AM' },
  { label: 'Step 3', time: '12:00 PM' },
  { label: 'Step 4', time: '01:00 PM' },
];

const App = () => {
  return (
    <View style={styles.container}>
      <StepIndicator
        currentStep={1}
        steps={steps}
        stepLabelColor='#000'
        stepTimeColor='#666'
        stepTextColor='#fff'
        separatorColor='#aaaaaa'
        activeSeparatorColor='#fe7013'
        circleColor='#007bff'
        inactiveCircleColor='#aaaaaa'
        completedCircleColor='#007bff'
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

```

## Props

| Prop                     | Type     | Default     | Description                                                        |
|--------------------------|----------|-------------|--------------------------------------------------------------------|
| `currentStep`            | number   | `0`         | The index of the current step.                                    |
| `steps`                  | array    | -           | An array of step objects, each containing a `label` and `time`.   |
| `stepLabelColor`         | string   | `'#000'`    | The color of the step labels.                                     |
| `stepTimeColor`          | string   | `'#666'`    | The color of the step time labels.                                |
| `stepTextColor`          | string   | `'#fff'`    | The color of the step text.                                       |
| `separatorColor`         | string   | `'#aaaaaa'` | The color of the separator.                                       |
| `activeSeparatorColor`   | string   | `'#fe7013'` | The color of the active separator.                                |
| `circleColor`            | string   | `'#007bff'` | The color of the active step circle.                              |
| `inactiveCircleColor`    | string   | `'#aaaaaa'` | The color of the inactive step circle.                            |
| `completedCircleColor`   | string   | `'#007bff'` | The color of the completed step circle.                           |

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)