@brijen/react-native-multistep

A lightweight multi-step view component for React Native with smooth transitions using Reanimated

Table of Contents

1. Installation
   • Peer Dependencies
   • Notes
2. Usage
3. Customizing and Styling
   • Example: Custom Styling
4. Custom Components
   • Example: Custom Components
5. Using react-hook-form with @brijen/react-native-multistep
   • Example: Integrating react-hook-form
6. MultiStepProps
7. StepProps
8. MultiStepRef
9. Contributing
10. License

Installation

1npm 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:

   1npm install react-native-reanimated

   Follow the official installation guide to set it up correctly.

2. react-native-svg This library is used for rendering SVG graphics. Install it using:

   1npx expo install react-native-svg

   or

   1npm install react-native-svg

   Follow the official installation guide 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

1import { MultiStep, Step } from '@brijen/react-native-multistep';
2import { Text } from 'react-native';
3
4const App = () => {
5  return (
6    <MultiStep
7      fullScreenHeight
8      onFinalStepSubmit={() => console.log('Submitted')}
9    >
10      <Step title="Step 1">
11        <Text>Content for Step 1</Text>
12      </Step>
13      <Step title="Step 2">
14        <Text>Content for Step 2</Text>
15      </Step>
16    </MultiStep>
17  );
18};
19
20export default App;

Example: Using Input Fields with MultiStep

Here's an example of how to apply custom styling to the MultiStep and Step components:

1import { useState } from 'react';
2import { Text, TextInput, StyleSheet } from 'react-native';
3import { MultiStep, Step } from '@brijen/react-native-multistep';
4
5const App = () => {
6  const [formData, setFormData] = useState({
7    name: '',
8    email: '',
9    address: '',
10    city: '',
11    cardNumber: '',
12  });
13
14  const handleChange = (field: string, value: string) => {
15    setFormData((prev) => ({ ...prev, [field]: value }));
16  };
17
18  const handleSubmit = () => {
19    console.log('Final Form Data:', formData);
20  };
21
22  return (
23    <MultiStep
24      onFinalStepSubmit={handleSubmit}
25      tintColor="#007AFF"
26      fullScreenHeight
27    >
28      <Step title="Personal Info" stepContainerStyle={styles.stepContent}>
29        <Text style={styles.label}>Full Name</Text>
30        <TextInput
31          style={styles.input}
32          placeholder="Enter your name"
33          value={formData.name}
34          onChangeText={(text) => handleChange('name', text)}
35        />
36        <Text style={styles.label}>Email Address</Text>
37        <TextInput
38          style={styles.input}
39          placeholder="Enter your email"
40          value={formData.email}
41          keyboardType="email-address"
42          onChangeText={(text) => handleChange('email', text)}
43        />
44      </Step>
45
46      <Step title="Shipping Address" stepContainerStyle={styles.stepContent}>
47        <Text style={styles.label}>Street Address</Text>
48        <TextInput
49          style={styles.input}
50          placeholder="Enter your address"
51          value={formData.address}
52          onChangeText={(text) => handleChange('address', text)}
53        />
54        <Text style={styles.label}>City</Text>
55        <TextInput
56          style={styles.input}
57          placeholder="Enter your city"
58          value={formData.city}
59          onChangeText={(text) => handleChange('city', text)}
60        />
61      </Step>
62
63      <Step title="Payment Information" stepContainerStyle={styles.stepContent}>
64        <Text style={styles.label}>Card Number</Text>
65        <TextInput
66          style={styles.input}
67          placeholder="Enter card number"
68          value={formData.cardNumber}
69          keyboardType="numeric"
70          onChangeText={(text) => handleChange('cardNumber', text)}
71        />
72      </Step>
73    </MultiStep>
74  );
75};
76
77export default App;
78
79const styles = StyleSheet.create({
80  stepContent: {
81    gap: 10,
82  },
83  label: {
84    fontSize: 16,
85    marginBottom: 8,
86  },
87  input: {
88    height: 40,
89    borderWidth: 1,
90    borderColor: '#007AFF',
91    borderRadius: 8,
92    paddingHorizontal: 10,
93    backgroundColor: '#FFF',
94  },
95});

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:

1import { useState } from 'react';
2import { Text, TextInput, StyleSheet } from 'react-native';
3import { MultiStep, Step } from '@brijen/react-native-multistep';
4
5const App = () => {
6  const [formData, setFormData] = useState({
7    username: '',
8    phone: '',
9    country: '',
10    postalCode: '',
11    cardHolder: '',
12    expiryDate: '',
13  });
14
15  const handleChange = (field: string, value: string) => {
16    setFormData((prev) => ({ ...prev, [field]: value }));
17  };
18
19  const handleSubmit = () => {
20    console.log('Submitted Data:', formData);
21  };
22
23  return (
24    <MultiStep
25      onFinalStepSubmit={handleSubmit}
26      nextButtonText="Continue"
27      prevButtonText="Go Back"
28      submitButtonText="Complete"
29      nextButtonStyle={styles.nextButton}
30      prevButtonStyle={styles.prevButton}
31      submitButtonStyle={styles.submitButton}
32      nextButtonTextStyle={styles.nextButtonText}
33      prevButtonTextStyle={styles.prevButtonText}
34      submitButtonTextStyle={styles.submitButtonText}
35      progressCircleSize={70}
36      progressCircleThickness={6}
37      progressCircleColor="#e290a6"
38      progressCircleTrackColor="#D3D3D3"
39      progressCircleLabelStyle={styles.progressText}
40      globalStepTitleStyle={styles.stepTitle}
41      globalNextStepTitleStyle={styles.nextStepTitle}
42      fullScreenHeight
43    >
44      <Step title="User Details" stepContainerStyle={styles.stepContent}>
45        <Text style={styles.label}>Username</Text>
46        <TextInput
47          style={styles.input}
48          placeholder="Enter your username"
49          value={formData.username}
50          onChangeText={(text) => handleChange('username', text)}
51        />
52        <Text style={styles.label}>Phone Number</Text>
53        <TextInput
54          style={styles.input}
55          placeholder="Enter your phone number"
56          value={formData.phone}
57          keyboardType="phone-pad"
58          onChangeText={(text) => handleChange('phone', text)}
59        />
60      </Step>
61
62      <Step title="Location Info" stepContainerStyle={styles.stepContent}>
63        <Text style={styles.label}>Country</Text>
64        <TextInput
65          style={styles.input}
66          placeholder="Enter your country"
67          value={formData.country}
68          onChangeText={(text) => handleChange('country', text)}
69        />
70        <Text style={styles.label}>Postal Code</Text>
71        <TextInput
72          style={styles.input}
73          placeholder="Enter postal code"
74          value={formData.postalCode}
75          keyboardType="numeric"
76          onChangeText={(text) => handleChange('postalCode', text)}
77        />
78      </Step>
79
80      <Step title="Payment Info" stepContainerStyle={styles.stepContent}>
81        <Text style={styles.label}>Cardholder Name</Text>
82        <TextInput
83          style={styles.input}
84          placeholder="Enter cardholder's name"
85          value={formData.cardHolder}
86          onChangeText={(text) => handleChange('cardHolder', text)}
87        />
88        <Text style={styles.label}>Expiry Date</Text>
89        <TextInput
90          style={styles.input}
91          placeholder="MM/YY"
92          value={formData.expiryDate}
93          keyboardType="numeric"
94          onChangeText={(text) => handleChange('expiryDate', text)}
95        />
96      </Step>
97    </MultiStep>
98  );
99};
100
101export default App;
102
103const styles = StyleSheet.create({
104  stepContent: {
105    gap: 12,
106  },
107  label: {
108    fontSize: 16,
109    marginBottom: 8,
110    fontWeight: '500',
111  },
112  input: {
113    height: 42,
114    borderWidth: 1,
115    borderColor: '#A6B1E1',
116    borderRadius: 8,
117    paddingHorizontal: 10,
118    backgroundColor: '#FFF',
119  },
120  stepTitle: {
121    fontSize: 20,
122    fontWeight: 'bold',
123    color: '#36cab2',
124  },
125  nextStepTitle: {
126    color: '#696969',
127  },
128  progressText: {
129    fontSize: 14,
130    fontWeight: '600',
131    color: '#e290a6',
132  },
133  nextButton: {
134    backgroundColor: '#d7b665',
135    paddingVertical: 12,
136    borderRadius: 8,
137  },
138  nextButtonText: {
139    color: '#FFF',
140    fontSize: 16,
141  },
142  prevButton: {
143    paddingVertical: 12,
144    borderRadius: 8,
145    borderColor: '#d7b665',
146  },
147  prevButtonText: {
148    color: '#000',
149    fontSize: 16,
150  },
151  submitButton: {
152    backgroundColor: '#1E3E62',
153    paddingVertical: 12,
154    borderRadius: 8,
155  },
156  submitButtonText: {
157    color: '#FFF',
158    fontSize: 16,
159  },
160});
161

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:

1import { useState, useRef } from 'react';
2import {
3  Text,
4  TextInput,
5  StyleSheet,
6  View,
7  TouchableOpacity,
8} from 'react-native';
9import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
10import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
11
12const App = () => {
13  const [formData, setFormData] = useState({
14    username: '',
15    email: '',
16    password: '',
17    age: '',
18  });
19
20  const handleChange = (field: string, value: string) => {
21    setFormData((prev) => ({ ...prev, [field]: value }));
22  };
23
24  const handleSubmit = () => {
25    console.log('Final Form Data:', formData);
26  };
27
28  const ref = useRef<MultiStepRef>(null);
29
30  return (
31    <MultiStep
32      onFinalStepSubmit={handleSubmit}
33      tintColor="#AD49E1"
34      progressCircleColor="#FFAF00"
35      nextButtonComponent={
36        <NextButton onPress={() => ref.current?.nextStep()} />
37      }
38      prevButtonComponent={
39        <PrevButton onPress={() => ref.current?.prevStep()} />
40      }
41      submitButtonComponent={<SubmitButton onPress={handleSubmit} />}
42      ref={ref}
43    >
44      <Step
45        title="User Info"
46        titleComponent={<StepTitle title="User Info" icon="user" />}
47        stepContainerStyle={styles.stepContent}
48      >
49        <Text style={styles.label}>Username</Text>
50        <TextInput
51          style={styles.input}
52          placeholder="Enter your username"
53          value={formData.username}
54          onChangeText={(text) => handleChange('username', text)}
55        />
56        <Text style={styles.label}>Email</Text>
57        <TextInput
58          style={styles.input}
59          placeholder="Enter your email"
60          value={formData.email}
61          keyboardType="email-address"
62          onChangeText={(text) => handleChange('email', text)}
63        />
64      </Step>
65
66      <Step
67        title="Security"
68        titleComponent={<StepTitle title="Security" icon="lock" />}
69        stepContainerStyle={styles.stepContent}
70      >
71        <Text style={styles.label}>Password</Text>
72        <TextInput
73          style={styles.input}
74          placeholder="Enter password"
75          secureTextEntry
76          value={formData.password}
77          onChangeText={(text) => handleChange('password', text)}
78        />
79      </Step>
80
81      <Step
82        title="Additional Info"
83        titleComponent={<StepTitle title="Additional Info" icon="info" />}
84        stepContainerStyle={styles.stepContent}
85      >
86        <Text style={styles.label}>Age</Text>
87        <TextInput
88          style={styles.input}
89          placeholder="Enter your age"
90          keyboardType="numeric"
91          value={formData.age}
92          onChangeText={(text) => handleChange('age', text)}
93        />
94      </Step>
95    </MultiStep>
96  );
97};
98
99export default App;
100
101const StepTitle = ({
102  title,
103  icon,
104}: {
105  title: string;
106  icon: 'user' | 'lock' | 'info';
107}) => (
108  <View style={styles.stepTitleContainer}>
109    <FontAwesome name={icon} size={20} color="#000" />
110    <Text style={styles.stepTitle}>{title}</Text>
111  </View>
112);
113
114const NextButton = ({ onPress }: { onPress: () => void }) => (
115  <TouchableOpacity style={styles.nextButton} onPress={onPress}>
116    <Text style={styles.buttonText}>Next</Text>
117    <MaterialIcons name="arrow-forward-ios" size={18} color="white" />
118  </TouchableOpacity>
119);
120
121const PrevButton = ({ onPress }: { onPress: () => void }) => (
122  <TouchableOpacity style={styles.prevButton} onPress={onPress}>
123    <MaterialIcons name="arrow-back-ios" size={18} color="white" />
124    <Text style={styles.buttonText}>Back</Text>
125  </TouchableOpacity>
126);
127
128const SubmitButton = ({ onPress }: { onPress: () => void }) => (
129  <TouchableOpacity style={styles.submitButton} onPress={onPress}>
130    <Text style={styles.buttonText}>Submit</Text>
131    <FontAwesome name="check-circle" size={18} color="white" />
132  </TouchableOpacity>
133);
134
135const styles = StyleSheet.create({
136  stepContent: {
137    gap: 12,
138  },
139  label: {
140    fontSize: 16,
141    marginBottom: 8,
142    fontWeight: '500',
143  },
144  input: {
145    height: 42,
146    borderWidth: 1,
147    borderColor: '#5CA9FF',
148    borderRadius: 8,
149    paddingHorizontal: 10,
150    backgroundColor: '#FFF',
151  },
152  stepTitleContainer: {
153    flexDirection: 'row',
154    alignItems: 'center',
155    gap: 8,
156  },
157  stepTitle: {
158    fontSize: 20,
159    fontWeight: 'bold',
160    color: '#7C00FE',
161  },
162  nextButton: {
163    flexDirection: 'row',
164    alignItems: 'center',
165    justifyContent: 'center',
166    gap: 5,
167    backgroundColor: '#F5004F',
168    paddingVertical: 12,
169    borderRadius: 8,
170    width: 100,
171  },
172  prevButton: {
173    flexDirection: 'row',
174    alignItems: 'center',
175    justifyContent: 'center',
176    gap: 5,
177    backgroundColor: '#B6CBBD',
178    paddingVertical: 12,
179    borderRadius: 8,
180    width: 100,
181  },
182  submitButton: {
183    flexDirection: 'row',
184    alignItems: 'center',
185    justifyContent: 'center',
186    gap: 5,
187    backgroundColor: '#16C47F',
188    paddingVertical: 12,
189    borderRadius: 8,
190    width: 100,
191  },
192  buttonText: {
193    fontSize: 16,
194    color: 'white',
195    fontWeight: '600',
196  },
197});
198

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

1import { useForm, Controller } from 'react-hook-form';
2import { Text, TextInput, StyleSheet } from 'react-native';
3import { MultiStep, Step } from '@brijen/react-native-multistep';
4
5const App = () => {
6  const { control, handleSubmit } = useForm({
7    defaultValues: {
8      name: '',
9      email: '',
10      address: '',
11      city: '',
12      cardNumber: '',
13    },
14  });
15
16  const onSubmit = (data: any) => {
17    console.log('Final Form Data:', data);
18  };
19
20  return (
21    <MultiStep
22      onFinalStepSubmit={handleSubmit(onSubmit)}
23      tintColor="#DA498D"
24      fullScreenHeight
25    >
26      <Step title="Personal Info" stepContainerStyle={styles.stepContent}>
27        <Text style={styles.label}>Full Name</Text>
28        <Controller
29          control={control}
30          name="name"
31          render={({ field: { onChange, value } }) => (
32            <TextInput
33              style={styles.input}
34              placeholder="Enter your name"
35              value={value}
36              onChangeText={onChange}
37            />
38          )}
39        />
40        <Text style={styles.label}>Email Address</Text>
41        <Controller
42          control={control}
43          name="email"
44          render={({ field: { onChange, value } }) => (
45            <TextInput
46              style={styles.input}
47              placeholder="Enter your email"
48              value={value}
49              keyboardType="email-address"
50              onChangeText={onChange}
51            />
52          )}
53        />
54      </Step>
55
56      <Step title="Shipping Address" stepContainerStyle={styles.stepContent}>
57        <Text style={styles.label}>Street Address</Text>
58        <Controller
59          control={control}
60          name="address"
61          render={({ field: { onChange, value } }) => (
62            <TextInput
63              style={styles.input}
64              placeholder="Enter your address"
65              value={value}
66              onChangeText={onChange}
67            />
68          )}
69        />
70        <Text style={styles.label}>City</Text>
71        <Controller
72          control={control}
73          name="city"
74          render={({ field: { onChange, value } }) => (
75            <TextInput
76              style={styles.input}
77              placeholder="Enter your city"
78              value={value}
79              onChangeText={onChange}
80            />
81          )}
82        />
83      </Step>
84
85      <Step title="Payment Information" stepContainerStyle={styles.stepContent}>
86        <Text style={styles.label}>Card Number</Text>
87        <Controller
88          control={control}
89          name="cardNumber"
90          render={({ field: { onChange, value } }) => (
91            <TextInput
92              style={styles.input}
93              placeholder="Enter card number"
94              value={value}
95              keyboardType="numeric"
96              onChangeText={onChange}
97            />
98          )}
99        />
100      </Step>
101    </MultiStep>
102  );
103};
104
105export default App;
106
107const styles = StyleSheet.create({
108  stepContent: {
109    gap: 10,
110  },
111  label: {
112    fontSize: 16,
113    marginBottom: 8,
114  },
115  input: {
116    height: 40,
117    borderWidth: 1,
118    borderColor: '#DA498D',
119    borderRadius: 8,
120    paddingHorizontal: 10,
121    backgroundColor: '#FFF',
122  },
123});
124

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:

1import { useRef } from 'react';
2import { Text, View, Button } from 'react-native';
3import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
4
5const App = () => {
6  const multiStepRef = useRef<MultiStepRef>(null);
7
8  const goToNextStep = () => {
9    multiStepRef.current?.nextStep();
10  };
11
12  const goToPreviousStep = () => {
13    multiStepRef.current?.prevStep();
14  };
15
16  const goToSpecificStep = (index: number) => {
17    multiStepRef.current?.scrollToStep(index);
18  };
19
20  return (
21    <View style={{ flex: 1 }}>
22      <MultiStep ref={multiStepRef} onFinalStepSubmit={() => alert('Submitted!')}>
23        <Step title="Step 1">
24          <Text>Welcome to Step 1</Text>
25        </Step>
26        <Step title="Step 2">
27          <Text>Fill in some details here.</Text>
28        </Step>
29        <Step title="Step 3">
30          <Text>Review your information.</Text>
31        </Step>
32      </MultiStep>
33      <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }}>
34        <Button title="Previous" onPress={goToPreviousStep} />
35        <Button title="Next" onPress={goToNextStep} />
36        <Button title="Go to Step 2" onPress={() => goToSpecificStep(1)} />
37      </View>
38    </View>
39  );
40};
41
42export 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 to learn how to contribute to the repository and the development workflow.

License

MIT