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 📦

1. Install the necessary dependencies:

npm install react-native-multistep

or

yarn add react-native-multistep

2. 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 🌟