{"id":25769521,"url":"https://github.com/brijenmakwana/react-native-multistep","last_synced_at":"2026-05-12T22:36:13.628Z","repository":{"id":278497845,"uuid":"926482516","full_name":"BrijenMakwana/react-native-multistep","owner":"BrijenMakwana","description":"A lightweight multi-step view component for React Native with smooth transitions using Reanimated","archived":false,"fork":false,"pushed_at":"2025-02-21T04:41:51.000Z","size":13563,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-17T11:21:10.104Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@brijen/react-native-multistep","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrijenMakwana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T10:36:19.000Z","updated_at":"2025-09-14T18:21:39.000Z","dependencies_parsed_at":"2025-02-20T05:37:40.926Z","dependency_job_id":null,"html_url":"https://github.com/BrijenMakwana/react-native-multistep","commit_stats":null,"previous_names":["brijenmakwana/react-native-multistep"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/BrijenMakwana/react-native-multistep","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrijenMakwana%2Freact-native-multistep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrijenMakwana%2Freact-native-multistep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrijenMakwana%2Freact-native-multistep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrijenMakwana%2Freact-native-multistep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrijenMakwana","download_url":"https://codeload.github.com/BrijenMakwana/react-native-multistep/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrijenMakwana%2Freact-native-multistep/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32960295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-02-27T01:36:29.310Z","updated_at":"2026-05-12T22:36:13.611Z","avatar_url":"https://github.com/BrijenMakwana.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @brijen/react-native-multistep\n\nA lightweight multi-step view component for React Native with smooth transitions using Reanimated\n\n\u003cdiv style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;\"\u003e\n  \u003cimg src=\"example/assets/images/example_1/example_1.gif\" alt=\"video 1\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_2/example_2.gif\" alt=\"video 2\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_3/example_3.gif\" alt=\"video 3\" width=\"250\"/\u003e\n\u003c/div\u003e\n\n\n## Table of Contents\n\n1. [Installation](#installation)\n   - [Peer Dependencies](#peer-dependencies)\n   - [Notes](#notes)\n2. [Usage](#usage)\n3. [Customizing and Styling](#customizing-and-styling)\n   - [Example: Custom Styling](#example-custom-styling)\n4. [Custom Components](#custom-components)\n   - [Example: Custom Components](#example-custom-components)\n5. [Using react-hook-form with @brijen/react-native-multistep](#using-react-hook-form-with-brijenreact-native-multistep)\n   - [Example: Integrating react-hook-form](#example-integrating-react-hook-form)\n6. [MultiStepProps](#multistepprops)\n7. [StepProps](#stepprops)\n8. [MultiStepRef](#multistepref)\n9. [Contributing](#contributing)\n10. [License](#license)\n\n\n## Installation\n\n```sh\nnpm install @brijen/react-native-multistep\n```\n\n### Peer Dependencies\n\nThis package relies on the following peer dependencies. Make sure they are installed in your project:\n\n1. **`react-native-reanimated`**\n   This library is used for smooth animations and transitions.\n   Install it using:\n   ```bash\n   npm install react-native-reanimated\n   ```\n   Follow the [official installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) to set it up correctly.\n\n2. **`react-native-svg`**\n   This library is used for rendering SVG graphics.\n   Install it using:\n   ```bash\n   npx expo install react-native-svg\n   ```\n   or\n    ```bash\n    npm install react-native-svg\n    ```\n   Follow the [official installation guide](https://www.npmjs.com/package/react-native-svg) to configure it properly.\n\n\n### Notes:\n- Ensure that these libraries are installed and linked correctly in your React Native project.\n- If you encounter any issues, refer to the official documentation for each library.\n\n## Usage\n\n```js\nimport { MultiStep, Step } from '@brijen/react-native-multistep';\nimport { Text } from 'react-native';\n\nconst App = () =\u003e {\n  return (\n    \u003cMultiStep\n      fullScreenHeight\n      onFinalStepSubmit={() =\u003e console.log('Submitted')}\n    \u003e\n      \u003cStep title=\"Step 1\"\u003e\n        \u003cText\u003eContent for Step 1\u003c/Text\u003e\n      \u003c/Step\u003e\n      \u003cStep title=\"Step 2\"\u003e\n        \u003cText\u003eContent for Step 2\u003c/Text\u003e\n      \u003c/Step\u003e\n    \u003c/MultiStep\u003e\n  );\n};\n\nexport default App;\n````\n\n## Example: Using Input Fields with MultiStep\n\nHere's an example of how to apply custom styling to the `MultiStep` and `Step` components:\n\n\u003cdiv style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;\"\u003e\n  \u003cimg src=\"example/assets/images/example_1/example_1.png\" alt=\"video 1\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_1/example_2.png\" alt=\"video 2\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_1/example_3.png\" alt=\"video 3\" width=\"250\"/\u003e\n\u003c/div\u003e\n\n\n```js\nimport { useState } from 'react';\nimport { Text, TextInput, StyleSheet } from 'react-native';\nimport { MultiStep, Step } from '@brijen/react-native-multistep';\n\nconst App = () =\u003e {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    address: '',\n    city: '',\n    cardNumber: '',\n  });\n\n  const handleChange = (field: string, value: string) =\u003e {\n    setFormData((prev) =\u003e ({ ...prev, [field]: value }));\n  };\n\n  const handleSubmit = () =\u003e {\n    console.log('Final Form Data:', formData);\n  };\n\n  return (\n    \u003cMultiStep\n      onFinalStepSubmit={handleSubmit}\n      tintColor=\"#007AFF\"\n      fullScreenHeight\n    \u003e\n      \u003cStep title=\"Personal Info\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eFull Name\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your name\"\n          value={formData.name}\n          onChangeText={(text) =\u003e handleChange('name', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003eEmail Address\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your email\"\n          value={formData.email}\n          keyboardType=\"email-address\"\n          onChangeText={(text) =\u003e handleChange('email', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Shipping Address\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eStreet Address\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your address\"\n          value={formData.address}\n          onChangeText={(text) =\u003e handleChange('address', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003eCity\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your city\"\n          value={formData.city}\n          onChangeText={(text) =\u003e handleChange('city', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Payment Information\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eCard Number\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter card number\"\n          value={formData.cardNumber}\n          keyboardType=\"numeric\"\n          onChangeText={(text) =\u003e handleChange('cardNumber', text)}\n        /\u003e\n      \u003c/Step\u003e\n    \u003c/MultiStep\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  stepContent: {\n    gap: 10,\n  },\n  label: {\n    fontSize: 16,\n    marginBottom: 8,\n  },\n  input: {\n    height: 40,\n    borderWidth: 1,\n    borderColor: '#007AFF',\n    borderRadius: 8,\n    paddingHorizontal: 10,\n    backgroundColor: '#FFF',\n  },\n});\n```\n\n## Customizing and Styling\n\nYou 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.\n\n### Example: Custom Styling\n\nHere's an example of how to apply custom styling to the `MultiStep` and `Step` components:\n\n\u003cdiv style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;\"\u003e\n  \u003cimg src=\"example/assets/images/example_2/example_1.png\" alt=\"video 1\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_2/example_2.png\" alt=\"video 2\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_2/example_3.png\" alt=\"video 3\" width=\"250\"/\u003e\n\u003c/div\u003e\n\n```js\nimport { useState } from 'react';\nimport { Text, TextInput, StyleSheet } from 'react-native';\nimport { MultiStep, Step } from '@brijen/react-native-multistep';\n\nconst App = () =\u003e {\n  const [formData, setFormData] = useState({\n    username: '',\n    phone: '',\n    country: '',\n    postalCode: '',\n    cardHolder: '',\n    expiryDate: '',\n  });\n\n  const handleChange = (field: string, value: string) =\u003e {\n    setFormData((prev) =\u003e ({ ...prev, [field]: value }));\n  };\n\n  const handleSubmit = () =\u003e {\n    console.log('Submitted Data:', formData);\n  };\n\n  return (\n    \u003cMultiStep\n      onFinalStepSubmit={handleSubmit}\n      nextButtonText=\"Continue\"\n      prevButtonText=\"Go Back\"\n      submitButtonText=\"Complete\"\n      nextButtonStyle={styles.nextButton}\n      prevButtonStyle={styles.prevButton}\n      submitButtonStyle={styles.submitButton}\n      nextButtonTextStyle={styles.nextButtonText}\n      prevButtonTextStyle={styles.prevButtonText}\n      submitButtonTextStyle={styles.submitButtonText}\n      progressCircleSize={70}\n      progressCircleThickness={6}\n      progressCircleColor=\"#e290a6\"\n      progressCircleTrackColor=\"#D3D3D3\"\n      progressCircleLabelStyle={styles.progressText}\n      globalStepTitleStyle={styles.stepTitle}\n      globalNextStepTitleStyle={styles.nextStepTitle}\n      fullScreenHeight\n    \u003e\n      \u003cStep title=\"User Details\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eUsername\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your username\"\n          value={formData.username}\n          onChangeText={(text) =\u003e handleChange('username', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003ePhone Number\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your phone number\"\n          value={formData.phone}\n          keyboardType=\"phone-pad\"\n          onChangeText={(text) =\u003e handleChange('phone', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Location Info\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eCountry\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your country\"\n          value={formData.country}\n          onChangeText={(text) =\u003e handleChange('country', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003ePostal Code\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter postal code\"\n          value={formData.postalCode}\n          keyboardType=\"numeric\"\n          onChangeText={(text) =\u003e handleChange('postalCode', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Payment Info\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eCardholder Name\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter cardholder's name\"\n          value={formData.cardHolder}\n          onChangeText={(text) =\u003e handleChange('cardHolder', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003eExpiry Date\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"MM/YY\"\n          value={formData.expiryDate}\n          keyboardType=\"numeric\"\n          onChangeText={(text) =\u003e handleChange('expiryDate', text)}\n        /\u003e\n      \u003c/Step\u003e\n    \u003c/MultiStep\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  stepContent: {\n    gap: 12,\n  },\n  label: {\n    fontSize: 16,\n    marginBottom: 8,\n    fontWeight: '500',\n  },\n  input: {\n    height: 42,\n    borderWidth: 1,\n    borderColor: '#A6B1E1',\n    borderRadius: 8,\n    paddingHorizontal: 10,\n    backgroundColor: '#FFF',\n  },\n  stepTitle: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    color: '#36cab2',\n  },\n  nextStepTitle: {\n    color: '#696969',\n  },\n  progressText: {\n    fontSize: 14,\n    fontWeight: '600',\n    color: '#e290a6',\n  },\n  nextButton: {\n    backgroundColor: '#d7b665',\n    paddingVertical: 12,\n    borderRadius: 8,\n  },\n  nextButtonText: {\n    color: '#FFF',\n    fontSize: 16,\n  },\n  prevButton: {\n    paddingVertical: 12,\n    borderRadius: 8,\n    borderColor: '#d7b665',\n  },\n  prevButtonText: {\n    color: '#000',\n    fontSize: 16,\n  },\n  submitButton: {\n    backgroundColor: '#1E3E62',\n    paddingVertical: 12,\n    borderRadius: 8,\n  },\n  submitButtonText: {\n    color: '#FFF',\n    fontSize: 16,\n  },\n});\n\n```\n\n## Custom Components\n\nYou 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.\n\n### Example: Custom Components\n\nHere's an example of how to use custom components for the step titles and buttons:\n\n\u003cdiv style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;\"\u003e\n  \u003cimg src=\"example/assets/images/example_3/example_1.png\" alt=\"video 1\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_3/example_2.png\" alt=\"video 2\" width=\"250\"/\u003e\n  \u003cimg src=\"example/assets/images/example_3/example_3.png\" alt=\"video 3\" width=\"250\"/\u003e\n\u003c/div\u003e\n\n```js\nimport { useState, useRef } from 'react';\nimport {\n  Text,\n  TextInput,\n  StyleSheet,\n  View,\n  TouchableOpacity,\n} from 'react-native';\nimport { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';\nimport { FontAwesome, MaterialIcons } from '@expo/vector-icons';\n\nconst App = () =\u003e {\n  const [formData, setFormData] = useState({\n    username: '',\n    email: '',\n    password: '',\n    age: '',\n  });\n\n  const handleChange = (field: string, value: string) =\u003e {\n    setFormData((prev) =\u003e ({ ...prev, [field]: value }));\n  };\n\n  const handleSubmit = () =\u003e {\n    console.log('Final Form Data:', formData);\n  };\n\n  const ref = useRef\u003cMultiStepRef\u003e(null);\n\n  return (\n    \u003cMultiStep\n      onFinalStepSubmit={handleSubmit}\n      tintColor=\"#AD49E1\"\n      progressCircleColor=\"#FFAF00\"\n      nextButtonComponent={\n        \u003cNextButton onPress={() =\u003e ref.current?.nextStep()} /\u003e\n      }\n      prevButtonComponent={\n        \u003cPrevButton onPress={() =\u003e ref.current?.prevStep()} /\u003e\n      }\n      submitButtonComponent={\u003cSubmitButton onPress={handleSubmit} /\u003e}\n      ref={ref}\n    \u003e\n      \u003cStep\n        title=\"User Info\"\n        titleComponent={\u003cStepTitle title=\"User Info\" icon=\"user\" /\u003e}\n        stepContainerStyle={styles.stepContent}\n      \u003e\n        \u003cText style={styles.label}\u003eUsername\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your username\"\n          value={formData.username}\n          onChangeText={(text) =\u003e handleChange('username', text)}\n        /\u003e\n        \u003cText style={styles.label}\u003eEmail\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your email\"\n          value={formData.email}\n          keyboardType=\"email-address\"\n          onChangeText={(text) =\u003e handleChange('email', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep\n        title=\"Security\"\n        titleComponent={\u003cStepTitle title=\"Security\" icon=\"lock\" /\u003e}\n        stepContainerStyle={styles.stepContent}\n      \u003e\n        \u003cText style={styles.label}\u003ePassword\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter password\"\n          secureTextEntry\n          value={formData.password}\n          onChangeText={(text) =\u003e handleChange('password', text)}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep\n        title=\"Additional Info\"\n        titleComponent={\u003cStepTitle title=\"Additional Info\" icon=\"info\" /\u003e}\n        stepContainerStyle={styles.stepContent}\n      \u003e\n        \u003cText style={styles.label}\u003eAge\u003c/Text\u003e\n        \u003cTextInput\n          style={styles.input}\n          placeholder=\"Enter your age\"\n          keyboardType=\"numeric\"\n          value={formData.age}\n          onChangeText={(text) =\u003e handleChange('age', text)}\n        /\u003e\n      \u003c/Step\u003e\n    \u003c/MultiStep\u003e\n  );\n};\n\nexport default App;\n\nconst StepTitle = ({\n  title,\n  icon,\n}: {\n  title: string;\n  icon: 'user' | 'lock' | 'info';\n}) =\u003e (\n  \u003cView style={styles.stepTitleContainer}\u003e\n    \u003cFontAwesome name={icon} size={20} color=\"#000\" /\u003e\n    \u003cText style={styles.stepTitle}\u003e{title}\u003c/Text\u003e\n  \u003c/View\u003e\n);\n\nconst NextButton = ({ onPress }: { onPress: () =\u003e void }) =\u003e (\n  \u003cTouchableOpacity style={styles.nextButton} onPress={onPress}\u003e\n    \u003cText style={styles.buttonText}\u003eNext\u003c/Text\u003e\n    \u003cMaterialIcons name=\"arrow-forward-ios\" size={18} color=\"white\" /\u003e\n  \u003c/TouchableOpacity\u003e\n);\n\nconst PrevButton = ({ onPress }: { onPress: () =\u003e void }) =\u003e (\n  \u003cTouchableOpacity style={styles.prevButton} onPress={onPress}\u003e\n    \u003cMaterialIcons name=\"arrow-back-ios\" size={18} color=\"white\" /\u003e\n    \u003cText style={styles.buttonText}\u003eBack\u003c/Text\u003e\n  \u003c/TouchableOpacity\u003e\n);\n\nconst SubmitButton = ({ onPress }: { onPress: () =\u003e void }) =\u003e (\n  \u003cTouchableOpacity style={styles.submitButton} onPress={onPress}\u003e\n    \u003cText style={styles.buttonText}\u003eSubmit\u003c/Text\u003e\n    \u003cFontAwesome name=\"check-circle\" size={18} color=\"white\" /\u003e\n  \u003c/TouchableOpacity\u003e\n);\n\nconst styles = StyleSheet.create({\n  stepContent: {\n    gap: 12,\n  },\n  label: {\n    fontSize: 16,\n    marginBottom: 8,\n    fontWeight: '500',\n  },\n  input: {\n    height: 42,\n    borderWidth: 1,\n    borderColor: '#5CA9FF',\n    borderRadius: 8,\n    paddingHorizontal: 10,\n    backgroundColor: '#FFF',\n  },\n  stepTitleContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  stepTitle: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    color: '#7C00FE',\n  },\n  nextButton: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 5,\n    backgroundColor: '#F5004F',\n    paddingVertical: 12,\n    borderRadius: 8,\n    width: 100,\n  },\n  prevButton: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 5,\n    backgroundColor: '#B6CBBD',\n    paddingVertical: 12,\n    borderRadius: 8,\n    width: 100,\n  },\n  submitButton: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 5,\n    backgroundColor: '#16C47F',\n    paddingVertical: 12,\n    borderRadius: 8,\n    width: 100,\n  },\n  buttonText: {\n    fontSize: 16,\n    color: 'white',\n    fontWeight: '600',\n  },\n});\n\n```\n\n## Using react-hook-form with @brijen/react-native-multistep\n\nYou 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`.\n\n### Example: Integrating react-hook-form\n\n```js\nimport { useForm, Controller } from 'react-hook-form';\nimport { Text, TextInput, StyleSheet } from 'react-native';\nimport { MultiStep, Step } from '@brijen/react-native-multistep';\n\nconst App = () =\u003e {\n  const { control, handleSubmit } = useForm({\n    defaultValues: {\n      name: '',\n      email: '',\n      address: '',\n      city: '',\n      cardNumber: '',\n    },\n  });\n\n  const onSubmit = (data: any) =\u003e {\n    console.log('Final Form Data:', data);\n  };\n\n  return (\n    \u003cMultiStep\n      onFinalStepSubmit={handleSubmit(onSubmit)}\n      tintColor=\"#DA498D\"\n      fullScreenHeight\n    \u003e\n      \u003cStep title=\"Personal Info\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eFull Name\u003c/Text\u003e\n        \u003cController\n          control={control}\n          name=\"name\"\n          render={({ field: { onChange, value } }) =\u003e (\n            \u003cTextInput\n              style={styles.input}\n              placeholder=\"Enter your name\"\n              value={value}\n              onChangeText={onChange}\n            /\u003e\n          )}\n        /\u003e\n        \u003cText style={styles.label}\u003eEmail Address\u003c/Text\u003e\n        \u003cController\n          control={control}\n          name=\"email\"\n          render={({ field: { onChange, value } }) =\u003e (\n            \u003cTextInput\n              style={styles.input}\n              placeholder=\"Enter your email\"\n              value={value}\n              keyboardType=\"email-address\"\n              onChangeText={onChange}\n            /\u003e\n          )}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Shipping Address\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eStreet Address\u003c/Text\u003e\n        \u003cController\n          control={control}\n          name=\"address\"\n          render={({ field: { onChange, value } }) =\u003e (\n            \u003cTextInput\n              style={styles.input}\n              placeholder=\"Enter your address\"\n              value={value}\n              onChangeText={onChange}\n            /\u003e\n          )}\n        /\u003e\n        \u003cText style={styles.label}\u003eCity\u003c/Text\u003e\n        \u003cController\n          control={control}\n          name=\"city\"\n          render={({ field: { onChange, value } }) =\u003e (\n            \u003cTextInput\n              style={styles.input}\n              placeholder=\"Enter your city\"\n              value={value}\n              onChangeText={onChange}\n            /\u003e\n          )}\n        /\u003e\n      \u003c/Step\u003e\n\n      \u003cStep title=\"Payment Information\" stepContainerStyle={styles.stepContent}\u003e\n        \u003cText style={styles.label}\u003eCard Number\u003c/Text\u003e\n        \u003cController\n          control={control}\n          name=\"cardNumber\"\n          render={({ field: { onChange, value } }) =\u003e (\n            \u003cTextInput\n              style={styles.input}\n              placeholder=\"Enter card number\"\n              value={value}\n              keyboardType=\"numeric\"\n              onChangeText={onChange}\n            /\u003e\n          )}\n        /\u003e\n      \u003c/Step\u003e\n    \u003c/MultiStep\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  stepContent: {\n    gap: 10,\n  },\n  label: {\n    fontSize: 16,\n    marginBottom: 8,\n  },\n  input: {\n    height: 40,\n    borderWidth: 1,\n    borderColor: '#DA498D',\n    borderRadius: 8,\n    paddingHorizontal: 10,\n    backgroundColor: '#FFF',\n  },\n});\n\n```\n\n# MultiStepProps\n\nThe `MultiStepProps` interface defines the properties for the `MultiStep` component, which handles multi-step navigation.\n\n| Property                     | Type                     | Required | Default Value               | Description                                                                 |\n|------------------------------|--------------------------|----------|-----------------------------|-----------------------------------------------------------------------------|\n| `children`                   | `React.ReactNode`        | Yes      | -                           | The steps or content to be rendered inside the multi-step view. This can be one or more `Step` components. |\n| `onFinalStepSubmit`          | `() =\u003e void`             | No      | -                           | Callback function that is called when the user presses the submit button on the last step. |\n| `prevButtonText`             | `string`                 | No       | `\"Back\"`                    | Text for the \"Previous\" button.                                             |\n| `nextButtonText`             | `string`                 | No       | `\"Next\"`                    | Text for the \"Next\" button.                                                 |\n| `prevButtonStyle`            | `ViewStyle`              | No       | -                           | Style for the \"Previous\" button container.                                  |\n| `nextButtonStyle`            | `ViewStyle`              | No       | -                           | Style for the \"Next\" button container.                                      |\n| `prevButtonTextStyle`        | `TextStyle`              | No       | -                           | Style for the text inside the \"Previous\" button.                            |\n| `nextButtonTextStyle`        | `TextStyle`              | No       | -                           | Style for the text inside the \"Next\" button.                                |\n| `prevButtonComponent`        | `JSX.Element`            | No       | -                           | Custom component to replace the default \"Previous\" button. Overrides `prevButtonText` and `prevButtonStyle`. |\n| `nextButtonComponent`        | `JSX.Element`            | No       | -                           | Custom component to replace the default \"Next\" button. Overrides `nextButtonText` and `nextButtonStyle`. |\n| `tintColor`                  | `string`                 | No       | -                           | Primary tint color for active indicators and buttons.                        |\n| `globalStepTitleStyle`       | `TextStyle`              | No       | -                           | Global style for the step title text. Accepts a React Native `TextStyle` object. |\n| `globalNextStepTitleStyle`   | `TextStyle`              | No       | -                           | Global style for the next step title text. Accepts a React Native `TextStyle` object. |\n| `progressCircleSize`         | `number`                 | No       | `65`                        | The size (diameter) of the circular progress indicator in pixels.           |\n| `progressCircleThickness`    | `number`                 | No       | `5`                         | The thickness of the progress ring.                                         |\n| `progressCircleColor`        | `string`                 | No       | `\"#DE3163\"`                 | The color of the filled (progress) portion of the circle.                   |\n| `progressCircleTrackColor`   | `string`                 | No       | `\"#E0E0E0\"`                 | The color of the unfilled (background) portion of the circle.               |\n| `progressCircleLabelStyle`   | `TextStyle`              | No       | -                           | Style for the text inside the progress circle. Accepts a React Native `TextStyle` object. |\n| `headerStyle`                | `ViewStyle`              | No       | -                           | Style for the header where the title and progress bar are shown. Accepts a React Native `ViewStyle` object. |\n| `globalStepContainerStyle`   | `ViewStyle`              | No       | -                           | Global style for the step container. Accepts a React Native `ViewStyle` object. |\n| `fullScreenHeight`           | `boolean`                | No       | `false`                     | If `true`, the step will take the entire available screen height.            |\n| `buttonContainerStyle`       | `ViewStyle`              | No       | -                           | Style for the button container. Accepts a React Native `ViewStyle` object.  |\n| `submitButtonText`           | `string`                 | No       | `\"Submit\"`                  | Text for the \"Submit\" button.                                               |\n| `submitButtonStyle`          | `ViewStyle`              | No       | -                           | Style for the \"Submit\" button. Accepts a React Native `ViewStyle` object.    |\n| `submitButtonTextStyle`      | `TextStyle`              | No       | -                           | Style for the text inside the \"Submit\" button. Accepts a React Native `TextStyle` object. |\n| `submitButtonComponent`      | `JSX.Element`            | No       | -                           | Custom component to replace the default \"Submit\" button. Overrides `submitButtonText` and `submitButtonStyle`. |\n\n# StepProps\n\nThe `StepProps` interface defines the properties for a single step in a multi-step process.\n\n| Property             | Type                     | Required | Default Value | Description                                                                 |\n|----------------------|--------------------------|----------|---------------|-----------------------------------------------------------------------------|\n| `title`              | `string`                 | Yes      | -             | The title of the step. This is displayed as the step's label.               |\n| `children`           | `React.ReactNode`        | Yes      | -             | The content of the step. This can be any React component.       |\n| `stepTitleStyle`     | `TextStyle`              | No       | -             | Style for the step title text. Accepts a React Native `TextStyle` object.   |\n| `nextStepTitleStyle` | `TextStyle`              | No       | -             | Style for the next step title text. Accepts a React Native `TextStyle` object. |\n| `titleComponent`     | `JSX.Element`            | No       | -             | Custom component for the title. Overrides `title` if provided.              |\n| `stepContainerStyle` | `ViewStyle`              | No       | -             | Style for the step container. Accepts a React Native `ViewStyle` object.    |\n\n## MultiStepRef\n\nThe `MultiStepRef` interface defines the methods available for controlling the `MultiStep` component's navigation programmatically.\nTo 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.\n\nHere's an example demonstrating how to pass a ref to `MultiStep` and use its methods:\n\n```js\nimport { useRef } from 'react';\nimport { Text, View, Button } from 'react-native';\nimport { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';\n\nconst App = () =\u003e {\n  const multiStepRef = useRef\u003cMultiStepRef\u003e(null);\n\n  const goToNextStep = () =\u003e {\n    multiStepRef.current?.nextStep();\n  };\n\n  const goToPreviousStep = () =\u003e {\n    multiStepRef.current?.prevStep();\n  };\n\n  const goToSpecificStep = (index: number) =\u003e {\n    multiStepRef.current?.scrollToStep(index);\n  };\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cMultiStep ref={multiStepRef} onFinalStepSubmit={() =\u003e alert('Submitted!')}\u003e\n        \u003cStep title=\"Step 1\"\u003e\n          \u003cText\u003eWelcome to Step 1\u003c/Text\u003e\n        \u003c/Step\u003e\n        \u003cStep title=\"Step 2\"\u003e\n          \u003cText\u003eFill in some details here.\u003c/Text\u003e\n        \u003c/Step\u003e\n        \u003cStep title=\"Step 3\"\u003e\n          \u003cText\u003eReview your information.\u003c/Text\u003e\n        \u003c/Step\u003e\n      \u003c/MultiStep\u003e\n      \u003cView style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }}\u003e\n        \u003cButton title=\"Previous\" onPress={goToPreviousStep} /\u003e\n        \u003cButton title=\"Next\" onPress={goToNextStep} /\u003e\n        \u003cButton title=\"Go to Step 2\" onPress={() =\u003e goToSpecificStep(1)} /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default App;\n```\n\nIn this example:\n- A ref (`multiStepRef`) is created using `useRef` and passed to the `MultiStep` component.\n- The `goToNextStep`, `goToPreviousStep`, and `goToSpecificStep` functions use the methods from the `MultiStepRef` interface to navigate between steps.\n- Buttons are provided to trigger these functions and demonstrate the navigation.\n\n| Method          | Type                | Description                                                         |\n|-----------------|---------------------|---------------------------------------------------------------------|\n| `nextStep`      | `() =\u003e void`        | Advances to the next step in the multi-step process.                |\n| `prevStep`      | `() =\u003e void`        | Moves back to the previous step in the multi-step process.          |\n| `scrollToStep`  | `(index: number) =\u003e void` | Scrolls to a specific step in the multi-step process.                |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijenmakwana%2Freact-native-multistep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrijenmakwana%2Freact-native-multistep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijenmakwana%2Freact-native-multistep/lists"}