@muhammetbalikci/react-native-step-indicator
v1.0.4
Published
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.
Downloads
28
Maintainers
Readme
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:
npm install step-indicator
or
yarn add step-indicator
Usage
You can use the StepIndicator component in your project like this:
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.