React Native MultiStep 🚀

A flexible and animated multi-step form component for React Native, allowing you to easily create forms with multiple steps. 📝 The component provides step indicators, transition animations, and customizable buttons. 🎨

🌟 Features ✨

✅ Step Indicator: Displays a dynamic indicator to show the current step and progress. 📅
✅ Animations: Includes an animated scale effect on the active step indicator. 🔄
✅ Customizable Buttons: Custom labels and styles for the back, next, and done buttons. 🔘
✅ Customizable Styles: Easily customize every part of the form, including content container, step indicators, buttons, etc. 🎨

🔧 Installation 📦

Install the necessary dependencies:

npm install react-native-multistep

yarn add react-native-multistep

Import the MultiStepForm component into your app: 📜

import { MultiStepForm } from 'react-native-multistep';

⚛️ Props

Prop	Type	Default	Description
`stepsContent` (required)	`React.ReactNode[]`	-	An array of React nodes, where each node represents the content for each step. 🗂️
`onStepChange` (optional)	`(currentStep: number) => void`	-	A callback triggered whenever the step changes. 🔄
`onStepForward` (optional)	`(currentStep: number) => void`	-	A callback triggered when navigating to the next step. ⏭️
`onStepBackward` (optional)	`(currentStep: number) => void`	-	A callback triggered when navigating to the previous step. 🔙
`backButtonLabel` (optional)	`string`	`Back`	Label for the Back button 🔙
`nextButtonLabel` (optional)	`string`	`Next`	Label for the Next button ▶️
`doneButtonLabel` (optional)	`string`	`Done`	Label for the Done button ✅
`onComplete` (optional)	`() => void`	-	A callback triggered when the form is completed. 🎉
`style` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the root container. 🖌️
`nextButtonStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the Next button 🔹
`previousButtonStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the Previous button 🔙
`doneButtonStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the Done button ✅
`stepsContainerStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the step indicators container 🔢
`activeStepStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for active step indicators 🔥
`inactiveStepStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for inactive step indicators ❄️
`contentContainerStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the content container 📝
`buttonsContainerStyle` (optional)	`StyleProp<ViewStyle>`	-	Custom style for the footer buttons container ⚙️
`lineColor` (optional)	`string`	-	Custom color for the line between indicators ✅
`activeLineColor` (optional)	`string`	-	Custom color for the active line between indicators ✅

📖 Usage Example 🧵

import React from 'react';
import { MultiStepForm } from 'react-native-multistep';
import { Text, View } from 'react-native';

const App = () => {
  const stepsContent = [
    <Text>Step 1: Personal Information 👤</Text>,
    <Text>Step 2: Address 📍</Text>,
    <Text>Step 3: Review ✅</Text>,
  ];

  const handleStepChange = (currentStep: number) => {
    console.log(`Current Step: ${currentStep}`);
  };

  const handleComplete = () => {
    console.log('Form Completed! 🎉');
  };

  return (
    <MultiStepForm
      stepsContent={stepsContent}
      onStepChange={handleStepChange}
      onComplete={handleComplete}
      backButtonLabel="Go Back 🔙"
      nextButtonLabel="Next Step ▶️"
      doneButtonLabel="Finish ✅"
      style={{ padding: 20 }}
      nextButtonStyle={{ backgroundColor: 'blue' }}
      previousButtonStyle={{ backgroundColor: 'gray' }}
      doneButtonStyle={{ backgroundColor: 'green' }}
      activeStepStyle={{ backgroundColor: 'blue' }}
      inactiveStepStyle={{ backgroundColor: 'lightgray' }}
    />
  );
};

export default App;

🎨 Styling

The component uses StyleSheet.create for default styles. Customize your form by passing the relevant props:

Root Container: style 🖌️
Step Indicator Container: stepsContainerStyle 🔢
Active/Inactive Step Indicators: activeStepStyle, inactiveStepStyle 🔥
Content Area: contentContainerStyle 📝
Footer Buttons Container: buttonsContainerStyle ⚙️
Back Button: previousButtonStyle 🔙
Next Button: nextButtonStyle ▶️
Done Button: doneButtonStyle ✅

🔄 Animations

Step Indicator Animation 🎥: The active step indicator includes a scale effect when selected, providing a quick visual cue to the user. 🔄

🤝 Contributing

See the contributing guide to learn how to contribute to the project. 🛠️

📜 License

MIT 📝

Made with ❤️ by Aziz Becha 🌟

Package detail

react-native-multistep

readme