{"id":4368,"url":"https://github.com/talut/react-native-wizard","last_synced_at":"2025-08-04T01:32:05.755Z","repository":{"id":49969399,"uuid":"181467008","full_name":"talut/react-native-wizard","owner":"talut","description":"Easy, convenient, quick-forming Wizard component for React Native","archived":true,"fork":false,"pushed_at":"2022-11-28T19:49:22.000Z","size":1446,"stargazers_count":81,"open_issues_count":0,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-07T08:33:30.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://talut.dev","language":"JavaScript","has_issues":false,"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/talut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-15T10:46:50.000Z","updated_at":"2024-09-09T15:56:43.000Z","dependencies_parsed_at":"2023-01-22T17:01:06.572Z","dependency_job_id":null,"html_url":"https://github.com/talut/react-native-wizard","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/talut/react-native-wizard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talut","download_url":"https://codeload.github.com/talut/react-native-wizard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talut%2Freact-native-wizard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636317,"owners_count":24282075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-01-05T20:17:09.719Z","updated_at":"2025-08-04T01:32:05.444Z","avatar_url":"https://github.com/talut.png","language":"JavaScript","readme":"# React Native Wizard\n\nEasy, convenient, quick-forming Wizard component for React Native.  Also this package is providing simple usage with few props and functions. You can see examples below the page.\n\n\u003cp align='center'\u003e\u003cimg src='./example/react-native-wizard.gif' alt='ReactNativeWizard'\u003e\u003c/p\u003e\n\n\n## v2.1.1 Released.\n\n\n## v2.1.0 Released.\n- contentContainerStyle added.\n- useNativeDriver flag added.\n\n## Getting Started\n\n**With NPM**\n\n```\nnpm install --save react-native-wizard\n```\n\n**With YARN**\n\n```\nyarn add react-native-wizard\n```\n\n## Props\n\n| Props                 |Description|Type|Required|Default|\n|-----------------------|-----------------------|------|--------|-------|\n|activeStep             |For setting active step at start.|`int`|**No**|`0`|\n|ref                    |You need to set ref for using some function like `goTo()`, `next()` etc.|`void`|**Yes**|-|\n|currentStep            |You can get current step index. Also you can get that step is last step or first step. Also you can use isFirstStep and isLastStep callbacks.|`void`|**No**|-|\n|isFirstStep            |You can get active step is first step or not with this callback. This callback is returning `boolean` value|`void`|**No**|-|\n|isLastStep             |You can get active step is last step or not with this callback. This callback is returning `boolean` value|`void`|**No**|-|\n|duration               |You can set duration of transition animation.|`int`|**No**|`500`|\n|onNext                 |If next button click and step is change, this function will run.|`void`|**No**|-|\n|onPrev                 |If prev button click and step is change, this function will run.|`void`|**No**|-|\n|steps                  |You can set steps with this prop.|`object`|**Yes**|-|\n|nextStepAnimation      |You can set animation for next step transition.|`string`|**No**|`fade`|\n|prevStepAnimation      |You can set animation for prev step transition.|`string`|**No**|`fade`|\n|useNativeDriver        |You can set useNativeDriver for all Animated used by the package ([more info here](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated)). |`boolean`|**No**|`true`|\n\n## Animations (`nextStepAnimation=\"fade\"`)\nYou can use this animations for `prevStep` or `nextStep`\n\n|Animation List|\n|-----------------|\n|`fade`           |\n|`slideLeft`      |\n|`slideRight`     |\n|`slideUp`        |\n|`slideDown`      |\n\n\n## Reference Functions\n\n**With functional component and hooks**\nI sincerely recommend using `hooks`.\n```javascript\nimport React, {useRef} from 'react'\nimport Wizard, { WizardRef } from 'react-native-wizard';\n\nconst wizard = useRef\u003cWizardRef\u003e(null)\n// Usage\n\u003cWizard ref={wizard} /\u003e\n```\n\n**With class component**\nIf you're not using functional component then you should create a ref with `React.createRef()`.\n```javascript\nimport Wizard, { WizardRef } from 'react-native-wizard';\n\nwizard = React.createRef\u003cWizardRef\u003e(null)\n\u003cWizard ref={this.wizard} /\u003e\n```\n\n| Props                 |Usage _without_ useRef | Usage _with_ useRef|\n|-----------------------|-----------------------|-------------------------|\n|next()                 |this.wizard.current.next() | wizard.current.next()|\n|prev()                 |this.wizard.current.prev() | wizard.current.prev() |\n|goTo(`stepIndex`)      |this.wizard.current.goTo(`stepIndex`) |wizard.current.goTo(`stepIndex`)|\n\n## Understanding the usage of Step\n\nThis wizard using your component class/function as a child. Every time this Wizard rendering your active step.\n\n## Basic Usage\n\n```javascript\nimport React, {useRef,useState} from 'react'\n// import Wizard\nimport Wizard, { WizardRef } from 'react-native-wizard';\n\n// Import your own step components\nimport Step1 from \"./yourStepsDir/Step1\";\nimport Step2 from \"./yourStepsDir/Step2\";\nimport Step3 from \"./yourStepsDir/Step3\";\n\n// ...\n\nconst wizard = useRef\u003cWizardRef\u003e(null);\nconst [isFirstStep, setIsFirstStep] = useState()\nconst [isLastStep, setIsLastStep] = useState()\nconst stepList = [\n    {\n      content: \u003cImage source={{uri: \"http://placehold.it/96x96\"}} style={{width:50, height:50}}/\u003e,\n    },\n    {\n      content: \u003cStep2 testProp=\"Welcome to Second Step\"/\u003e\n    },\n    {\n      content: \u003cStep3 step3Prop=\"Welcome to Third Step\"/\u003e\n    },\n   ]\n   \u003cWizard\n        ref={wizard}\n        activeStep={0}\n        steps={stepList}\n        isFirstStep={val =\u003e setIsFirstStep(val)}\n        isLastStep={val =\u003e setIsLastStep(val)}\n        onNext={() =\u003e {\n            console.log(\"Next Step Called\")\n        }}\n        onPrev={() =\u003e {\n            console.log(\"Previous Step Called\")\n        }}\n        currentStep={({ currentStep, isLastStep, isFirstStep }) =\u003e {\n            setCurrentStep(currentStep)\n        }}\n    /\u003e\n```\n\n## Advanced Usage Example\n\n```javascript\nimport React, { useRef, useState } from \"react\"\nimport { SafeAreaView, Button, View, Text } from \"react-native\"\nimport Wizard, { WizardRef } from \"react-native-wizard\"\n\nexport default () =\u003e {\n  const wizard = useRef\u003cWizardRef\u003e(null)\n  const [isFirstStep, setIsFirstStep] = useState(true)\n  const [isLastStep, setIsLastStep] = useState(false)\n  const [currentStep, setCurrentStep] = useState(0)\n  const stepList = [\n    {\n      content: \u003cView style={{ width: 100, height: 100, backgroundColor: \"#000\" }} /\u003e,\n    },\n    {\n      content: \u003cView style={{ width: 100, height: 100, backgroundColor: \"#e04851\" }} /\u003e,\n    },\n    {\n      content: \u003cView style={{ width: 100, height: 500, backgroundColor: \"#9be07d\" }} /\u003e,\n    },\n    {\n      content: \u003cView style={{ width: 100, height: 100, backgroundColor: \"#2634e0\" }} /\u003e,\n    },\n  ]\n\n  return (\n    \u003cView\u003e\n      \u003cSafeAreaView style={{ backgroundColor: \"#FFF\" }}\u003e\n        \u003cView\n          style={{\n            justifyContent: \"space-between\",\n            flexDirection: \"row\",\n            backgroundColor: \"#FFF\",\n            borderBottomColor: \"#dedede\",\n            borderBottomWidth: 1,\n          }}\u003e\n          \u003cButton disabled={isFirstStep} title=\"Prev\" onPress={() =\u003e wizard.current.prev()} /\u003e\n          \u003cText\u003e{currentStep + 1}. Step\u003c/Text\u003e\n          \u003cButton disabled={isLastStep} title=\"Next\" onPress={() =\u003e wizard.current.next()} /\u003e\n        \u003c/View\u003e\n      \u003c/SafeAreaView\u003e\n      \u003cView style={{ flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\" }}\u003e\n        \u003cWizard\n          ref={wizard}\n          steps={stepList}\n          isFirstStep={val =\u003e setIsFirstStep(val)}\n          isLastStep={val =\u003e setIsLastStep(val)}\n          onNext={() =\u003e {\n            console.log(\"Next Step Called\")\n          }}\n          onPrev={() =\u003e {\n            console.log(\"Previous Step Called\")\n          }}\n          currentStep={({ currentStep, isLastStep, isFirstStep }) =\u003e {\n            setCurrentStep(currentStep)\n          }}\n        /\u003e\n        \u003cView style={{ flexDirection: \"row\", margin: 18 }}\u003e\n          {stepList.map((val, index) =\u003e (\n            \u003cView\n              key={\"step-indicator-\" + index}\n              style={{\n                width: 10,\n                marginHorizontal: 6,\n                height: 10,\n                borderRadius: 5,\n                backgroundColor: index === currentStep ? \"#fc0\" : \"#000\",\n              }}\n            /\u003e\n          ))}\n        \u003c/View\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalut%2Freact-native-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalut%2Freact-native-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalut%2Freact-native-wizard/lists"}