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:

1npm install react-native-multistep

or

1yarn add react-native-multistep

2. Import the MultiStepForm component into your app: 📜

1import { 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 🧵

1import React from 'react';
2import { MultiStepForm } from 'react-native-multistep';
3import { Text, View } from 'react-native';
4
5const App = () => {
6  const stepsContent = [
7    <Text>Step 1: Personal Information 👤</Text>,
8    <Text>Step 2: Address 📍</Text>,
9    <Text>Step 3: Review ✅</Text>,
10  ];
11
12  const handleStepChange = (currentStep: number) => {
13    console.log(`Current Step: ${currentStep}`);
14  };
15
16  const handleComplete = () => {
17    console.log('Form Completed! 🎉');
18  };
19
20  return (
21    <MultiStepForm
22      stepsContent={stepsContent}
23      onStepChange={handleStepChange}
24      onComplete={handleComplete}
25      backButtonLabel="Go Back 🔙"
26      nextButtonLabel="Next Step ▶️"
27      doneButtonLabel="Finish ✅"
28      style={{ padding: 20 }}
29      nextButtonStyle={{ backgroundColor: 'blue' }}
30      previousButtonStyle={{ backgroundColor: 'gray' }}
31      doneButtonStyle={{ backgroundColor: 'green' }}
32      activeStepStyle={{ backgroundColor: 'blue' }}
33      inactiveStepStyle={{ backgroundColor: 'lightgray' }}
34    />
35  );
36};
37
38export 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 🌟