https://github.com/brijenmakwana/react-native-multistep
A lightweight multi-step view component for React Native with smooth transitions using Reanimated
https://github.com/brijenmakwana/react-native-multistep
android ios multi-step-form react-native react-native-forms react-native-multi-step react-native-reanimated react-native-stepper react-native-ui react-native-wizard
Last synced: 17 days ago
JSON representation
A lightweight multi-step view component for React Native with smooth transitions using Reanimated
- Host: GitHub
- URL: https://github.com/brijenmakwana/react-native-multistep
- Owner: BrijenMakwana
- License: mit
- Created: 2025-02-03T10:36:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T04:41:51.000Z (over 1 year ago)
- Last Synced: 2025-09-17T11:21:10.104Z (8 months ago)
- Topics: android, ios, multi-step-form, react-native, react-native-forms, react-native-multi-step, react-native-reanimated, react-native-stepper, react-native-ui, react-native-wizard
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@brijen/react-native-multistep
- Size: 12.9 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @brijen/react-native-multistep
A lightweight multi-step view component for React Native with smooth transitions using Reanimated
## Table of Contents
1. [Installation](#installation)
- [Peer Dependencies](#peer-dependencies)
- [Notes](#notes)
2. [Usage](#usage)
3. [Customizing and Styling](#customizing-and-styling)
- [Example: Custom Styling](#example-custom-styling)
4. [Custom Components](#custom-components)
- [Example: Custom Components](#example-custom-components)
5. [Using react-hook-form with @brijen/react-native-multistep](#using-react-hook-form-with-brijenreact-native-multistep)
- [Example: Integrating react-hook-form](#example-integrating-react-hook-form)
6. [MultiStepProps](#multistepprops)
7. [StepProps](#stepprops)
8. [MultiStepRef](#multistepref)
9. [Contributing](#contributing)
10. [License](#license)
## Installation
```sh
npm install @brijen/react-native-multistep
```
### Peer Dependencies
This package relies on the following peer dependencies. Make sure they are installed in your project:
1. **`react-native-reanimated`**
This library is used for smooth animations and transitions.
Install it using:
```bash
npm install react-native-reanimated
```
Follow the [official installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) to set it up correctly.
2. **`react-native-svg`**
This library is used for rendering SVG graphics.
Install it using:
```bash
npx expo install react-native-svg
```
or
```bash
npm install react-native-svg
```
Follow the [official installation guide](https://www.npmjs.com/package/react-native-svg) to configure it properly.
### Notes:
- Ensure that these libraries are installed and linked correctly in your React Native project.
- If you encounter any issues, refer to the official documentation for each library.
## Usage
```js
import { MultiStep, Step } from '@brijen/react-native-multistep';
import { Text } from 'react-native';
const App = () => {
return (
console.log('Submitted')}
>
Content for Step 1
Content for Step 2
);
};
export default App;
````
## Example: Using Input Fields with MultiStep
Here's an example of how to apply custom styling to the `MultiStep` and `Step` components:
```js
import { useState } from 'react';
import { Text, TextInput, StyleSheet } from 'react-native';
import { MultiStep, Step } from '@brijen/react-native-multistep';
const App = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
address: '',
city: '',
cardNumber: '',
});
const handleChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = () => {
console.log('Final Form Data:', formData);
};
return (
Full Name
handleChange('name', text)}
/>
Email Address
handleChange('email', text)}
/>
Street Address
handleChange('address', text)}
/>
City
handleChange('city', text)}
/>
Card Number
handleChange('cardNumber', text)}
/>
);
};
export default App;
const styles = StyleSheet.create({
stepContent: {
gap: 10,
},
label: {
fontSize: 16,
marginBottom: 8,
},
input: {
height: 40,
borderWidth: 1,
borderColor: '#007AFF',
borderRadius: 8,
paddingHorizontal: 10,
backgroundColor: '#FFF',
},
});
```
## Customizing and Styling
You can customize the styling of the `MultiStep` and `Step` components to match your app's aesthetics. The provided table lists all the available properties that you can use to adjust the appearance and behavior of the multi-step process. This includes customizing button styles, text styles, progress indicators, and container styles.
### Example: Custom Styling
Here's an example of how to apply custom styling to the `MultiStep` and `Step` components:
```js
import { useState } from 'react';
import { Text, TextInput, StyleSheet } from 'react-native';
import { MultiStep, Step } from '@brijen/react-native-multistep';
const App = () => {
const [formData, setFormData] = useState({
username: '',
phone: '',
country: '',
postalCode: '',
cardHolder: '',
expiryDate: '',
});
const handleChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = () => {
console.log('Submitted Data:', formData);
};
return (
Username
handleChange('username', text)}
/>
Phone Number
handleChange('phone', text)}
/>
Country
handleChange('country', text)}
/>
Postal Code
handleChange('postalCode', text)}
/>
Cardholder Name
handleChange('cardHolder', text)}
/>
Expiry Date
handleChange('expiryDate', text)}
/>
);
};
export default App;
const styles = StyleSheet.create({
stepContent: {
gap: 12,
},
label: {
fontSize: 16,
marginBottom: 8,
fontWeight: '500',
},
input: {
height: 42,
borderWidth: 1,
borderColor: '#A6B1E1',
borderRadius: 8,
paddingHorizontal: 10,
backgroundColor: '#FFF',
},
stepTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#36cab2',
},
nextStepTitle: {
color: '#696969',
},
progressText: {
fontSize: 14,
fontWeight: '600',
color: '#e290a6',
},
nextButton: {
backgroundColor: '#d7b665',
paddingVertical: 12,
borderRadius: 8,
},
nextButtonText: {
color: '#FFF',
fontSize: 16,
},
prevButton: {
paddingVertical: 12,
borderRadius: 8,
borderColor: '#d7b665',
},
prevButtonText: {
color: '#000',
fontSize: 16,
},
submitButton: {
backgroundColor: '#1E3E62',
paddingVertical: 12,
borderRadius: 8,
},
submitButtonText: {
color: '#FFF',
fontSize: 16,
},
});
```
## Custom Components
You can also provide custom components for titles, buttons, and much more. This allows for greater flexibility and customization to match your app's design and functionality.
### Example: Custom Components
Here's an example of how to use custom components for the step titles and buttons:
```js
import { useState, useRef } from 'react';
import {
Text,
TextInput,
StyleSheet,
View,
TouchableOpacity,
} from 'react-native';
import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
const App = () => {
const [formData, setFormData] = useState({
username: '',
email: '',
password: '',
age: '',
});
const handleChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = () => {
console.log('Final Form Data:', formData);
};
const ref = useRef(null);
return (
ref.current?.nextStep()} />
}
prevButtonComponent={
ref.current?.prevStep()} />
}
submitButtonComponent={}
ref={ref}
>
}
stepContainerStyle={styles.stepContent}
>
Username
handleChange('username', text)}
/>
Email
handleChange('email', text)}
/>
}
stepContainerStyle={styles.stepContent}
>
Password
handleChange('password', text)}
/>
}
stepContainerStyle={styles.stepContent}
>
Age
handleChange('age', text)}
/>
);
};
export default App;
const StepTitle = ({
title,
icon,
}: {
title: string;
icon: 'user' | 'lock' | 'info';
}) => (
{title}
);
const NextButton = ({ onPress }: { onPress: () => void }) => (
Next
);
const PrevButton = ({ onPress }: { onPress: () => void }) => (
Back
);
const SubmitButton = ({ onPress }: { onPress: () => void }) => (
Submit
);
const styles = StyleSheet.create({
stepContent: {
gap: 12,
},
label: {
fontSize: 16,
marginBottom: 8,
fontWeight: '500',
},
input: {
height: 42,
borderWidth: 1,
borderColor: '#5CA9FF',
borderRadius: 8,
paddingHorizontal: 10,
backgroundColor: '#FFF',
},
stepTitleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#7C00FE',
},
nextButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 5,
backgroundColor: '#F5004F',
paddingVertical: 12,
borderRadius: 8,
width: 100,
},
prevButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 5,
backgroundColor: '#B6CBBD',
paddingVertical: 12,
borderRadius: 8,
width: 100,
},
submitButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 5,
backgroundColor: '#16C47F',
paddingVertical: 12,
borderRadius: 8,
width: 100,
},
buttonText: {
fontSize: 16,
color: 'white',
fontWeight: '600',
},
});
```
## Using react-hook-form with @brijen/react-native-multistep
You can integrate `react-hook-form` with `@brijen/react-native-multistep` to manage form state and validation across multiple steps. Below is an example demonstrating how to use `react-hook-form` with `@brijen/react-native-multistep`.
### Example: Integrating react-hook-form
```js
import { useForm, Controller } from 'react-hook-form';
import { Text, TextInput, StyleSheet } from 'react-native';
import { MultiStep, Step } from '@brijen/react-native-multistep';
const App = () => {
const { control, handleSubmit } = useForm({
defaultValues: {
name: '',
email: '',
address: '',
city: '',
cardNumber: '',
},
});
const onSubmit = (data: any) => {
console.log('Final Form Data:', data);
};
return (
Full Name
(
)}
/>
Email Address
(
)}
/>
Street Address
(
)}
/>
City
(
)}
/>
Card Number
(
)}
/>
);
};
export default App;
const styles = StyleSheet.create({
stepContent: {
gap: 10,
},
label: {
fontSize: 16,
marginBottom: 8,
},
input: {
height: 40,
borderWidth: 1,
borderColor: '#DA498D',
borderRadius: 8,
paddingHorizontal: 10,
backgroundColor: '#FFF',
},
});
```
# MultiStepProps
The `MultiStepProps` interface defines the properties for the `MultiStep` component, which handles multi-step navigation.
| Property | Type | Required | Default Value | Description |
|------------------------------|--------------------------|----------|-----------------------------|-----------------------------------------------------------------------------|
| `children` | `React.ReactNode` | Yes | - | The steps or content to be rendered inside the multi-step view. This can be one or more `Step` components. |
| `onFinalStepSubmit` | `() => void` | No | - | Callback function that is called when the user presses the submit button on the last step. |
| `prevButtonText` | `string` | No | `"Back"` | Text for the "Previous" button. |
| `nextButtonText` | `string` | No | `"Next"` | Text for the "Next" button. |
| `prevButtonStyle` | `ViewStyle` | No | - | Style for the "Previous" button container. |
| `nextButtonStyle` | `ViewStyle` | No | - | Style for the "Next" button container. |
| `prevButtonTextStyle` | `TextStyle` | No | - | Style for the text inside the "Previous" button. |
| `nextButtonTextStyle` | `TextStyle` | No | - | Style for the text inside the "Next" button. |
| `prevButtonComponent` | `JSX.Element` | No | - | Custom component to replace the default "Previous" button. Overrides `prevButtonText` and `prevButtonStyle`. |
| `nextButtonComponent` | `JSX.Element` | No | - | Custom component to replace the default "Next" button. Overrides `nextButtonText` and `nextButtonStyle`. |
| `tintColor` | `string` | No | - | Primary tint color for active indicators and buttons. |
| `globalStepTitleStyle` | `TextStyle` | No | - | Global style for the step title text. Accepts a React Native `TextStyle` object. |
| `globalNextStepTitleStyle` | `TextStyle` | No | - | Global style for the next step title text. Accepts a React Native `TextStyle` object. |
| `progressCircleSize` | `number` | No | `65` | The size (diameter) of the circular progress indicator in pixels. |
| `progressCircleThickness` | `number` | No | `5` | The thickness of the progress ring. |
| `progressCircleColor` | `string` | No | `"#DE3163"` | The color of the filled (progress) portion of the circle. |
| `progressCircleTrackColor` | `string` | No | `"#E0E0E0"` | The color of the unfilled (background) portion of the circle. |
| `progressCircleLabelStyle` | `TextStyle` | No | - | Style for the text inside the progress circle. Accepts a React Native `TextStyle` object. |
| `headerStyle` | `ViewStyle` | No | - | Style for the header where the title and progress bar are shown. Accepts a React Native `ViewStyle` object. |
| `globalStepContainerStyle` | `ViewStyle` | No | - | Global style for the step container. Accepts a React Native `ViewStyle` object. |
| `fullScreenHeight` | `boolean` | No | `false` | If `true`, the step will take the entire available screen height. |
| `buttonContainerStyle` | `ViewStyle` | No | - | Style for the button container. Accepts a React Native `ViewStyle` object. |
| `submitButtonText` | `string` | No | `"Submit"` | Text for the "Submit" button. |
| `submitButtonStyle` | `ViewStyle` | No | - | Style for the "Submit" button. Accepts a React Native `ViewStyle` object. |
| `submitButtonTextStyle` | `TextStyle` | No | - | Style for the text inside the "Submit" button. Accepts a React Native `TextStyle` object. |
| `submitButtonComponent` | `JSX.Element` | No | - | Custom component to replace the default "Submit" button. Overrides `submitButtonText` and `submitButtonStyle`. |
# StepProps
The `StepProps` interface defines the properties for a single step in a multi-step process.
| Property | Type | Required | Default Value | Description |
|----------------------|--------------------------|----------|---------------|-----------------------------------------------------------------------------|
| `title` | `string` | Yes | - | The title of the step. This is displayed as the step's label. |
| `children` | `React.ReactNode` | Yes | - | The content of the step. This can be any React component. |
| `stepTitleStyle` | `TextStyle` | No | - | Style for the step title text. Accepts a React Native `TextStyle` object. |
| `nextStepTitleStyle` | `TextStyle` | No | - | Style for the next step title text. Accepts a React Native `TextStyle` object. |
| `titleComponent` | `JSX.Element` | No | - | Custom component for the title. Overrides `title` if provided. |
| `stepContainerStyle` | `ViewStyle` | No | - | Style for the step container. Accepts a React Native `ViewStyle` object. |
## MultiStepRef
The `MultiStepRef` interface defines the methods available for controlling the `MultiStep` component's navigation programmatically.
To use the methods available in the `MultiStepRef` interface, you need to pass a ref to the `MultiStep` component. This allows you to programmatically control the navigation between steps.
Here's an example demonstrating how to pass a ref to `MultiStep` and use its methods:
```js
import { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
const App = () => {
const multiStepRef = useRef(null);
const goToNextStep = () => {
multiStepRef.current?.nextStep();
};
const goToPreviousStep = () => {
multiStepRef.current?.prevStep();
};
const goToSpecificStep = (index: number) => {
multiStepRef.current?.scrollToStep(index);
};
return (
alert('Submitted!')}>
Welcome to Step 1
Fill in some details here.
Review your information.
goToSpecificStep(1)} />
);
};
export default App;
```
In this example:
- A ref (`multiStepRef`) is created using `useRef` and passed to the `MultiStep` component.
- The `goToNextStep`, `goToPreviousStep`, and `goToSpecificStep` functions use the methods from the `MultiStepRef` interface to navigate between steps.
- Buttons are provided to trigger these functions and demonstrate the navigation.
| Method | Type | Description |
|-----------------|---------------------|---------------------------------------------------------------------|
| `nextStep` | `() => void` | Advances to the next step in the multi-step process. |
| `prevStep` | `() => void` | Moves back to the previous step in the multi-step process. |
| `scrollToStep` | `(index: number) => void` | Scrolls to a specific step in the multi-step process. |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT