React Native Wizard

Easy, 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.

v2.1.1 Released.

v2.1.0 Released.

• contentContainerStyle added.
• useNativeDriver flag added.

Getting Started

With NPM

npm install --save react-native-wizard

With YARN

yarn add react-native-wizard

Props

Props	Description	Type	Required	Default
activeStep	For setting active step at start.	int	No	0
ref	You need to set ref for using some function like goTo(), next() etc.	void	Yes	-
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	-
isFirstStep	You can get active step is first step or not with this callback. This callback is returning boolean value	void	No	-
isLastStep	You can get active step is last step or not with this callback. This callback is returning boolean value	void	No	-
duration	You can set duration of transition animation.	int	No	500
onNext	If next button click and step is change, this function will run.	void	No	-
onPrev	If prev button click and step is change, this function will run.	void	No	-
steps	You can set steps with this prop.	object	Yes	-
nextStepAnimation	You can set animation for next step transition.	string	No	fade
prevStepAnimation	You can set animation for prev step transition.	string	No	fade
useNativeDriver	You can set useNativeDriver for all Animated used by the package (more info here).	boolean	No	true

Animations (nextStepAnimation="fade")

You can use this animations for prevStep or nextStep

Animation List
fade
slideLeft
slideRight
slideUp
slideDown

Reference Functions

With functional component and hooks I sincerely recommend using hooks.

importReact,{useRef}from'react'importWizard,{WizardRef}from'react-native-wizard';constwizard=useRef<WizardRef>(null)// Usage<Wizardref={wizard}/>

With class component If you're not using functional component then you should create a ref with React.createRef().

importWizard,{WizardRef}from'react-native-wizard';wizard=React.createRef<WizardRef>(null)<Wizardref={this.wizard}/>

Props	Usage without useRef	Usage with useRef
next()	this.wizard.current.next()	wizard.current.next()
prev()	this.wizard.current.prev()	wizard.current.prev()
goTo(stepIndex)	this.wizard.current.goTo(stepIndex)	wizard.current.goTo(stepIndex)

Understanding the usage of Step

This wizard using your component class/function as a child. Every time this Wizard rendering your active step.

Basic Usage

importReact,{useRef,useState}from'react'// import WizardimportWizard,{WizardRef}from'react-native-wizard';// Import your own step componentsimportStep1from"./yourStepsDir/Step1";importStep2from"./yourStepsDir/Step2";importStep3from"./yourStepsDir/Step3";// ...constwizard=useRef<WizardRef>(null);const[isFirstStep,setIsFirstStep]=useState()const[isLastStep,setIsLastStep]=useState()conststepList=[{content: <Imagesource={{uri: "http://placehold.it/96x96"}}style={{width:50,height:50}}/>,},{content: <Step2testProp="Welcome to Second Step"/>},{content: <Step3step3Prop="Welcome to Third Step"/>},]<Wizardref={wizard}activeStep={0}steps={stepList}isFirstStep={val=>setIsFirstStep(val)}isLastStep={val=>setIsLastStep(val)}onNext={()=>{console.log("Next Step Called")}}onPrev={()=>{console.log("Previous Step Called")}}currentStep={({ currentStep, isLastStep, isFirstStep })=>{setCurrentStep(currentStep)}}/>

Advanced Usage Example

importReact,{useRef,useState}from"react"import{SafeAreaView,Button,View,Text}from"react-native"importWizard,{WizardRef}from"react-native-wizard"exportdefault()=>{constwizard=useRef<WizardRef>(null)const[isFirstStep,setIsFirstStep]=useState(true)const[isLastStep,setIsLastStep]=useState(false)const[currentStep,setCurrentStep]=useState(0)conststepList=[{content: <Viewstyle={{width: 100,height: 100,backgroundColor: "#000"}}/>,},{content: <Viewstyle={{width: 100,height: 100,backgroundColor: "#e04851"}}/>,},{content: <Viewstyle={{width: 100,height: 500,backgroundColor: "#9be07d"}}/>,},{content: <Viewstyle={{width: 100,height: 100,backgroundColor: "#2634e0"}}/>,},]return(<View><SafeAreaViewstyle={{backgroundColor: "#FFF"}}><Viewstyle={{justifyContent: "space-between",flexDirection: "row",backgroundColor: "#FFF",borderBottomColor: "#dedede",borderBottomWidth: 1,}}><Buttondisabled={isFirstStep}title="Prev"onPress={()=>wizard.current.prev()}/><Text>{currentStep+1}. Step</Text><Buttondisabled={isLastStep}title="Next"onPress={()=>wizard.current.next()}/></View></SafeAreaView><Viewstyle={{flexDirection: "column",alignItems: "center",justifyContent: "center"}}><Wizardref={wizard}steps={stepList}isFirstStep={val=>setIsFirstStep(val)}isLastStep={val=>setIsLastStep(val)}onNext={()=>{console.log("Next Step Called")}}onPrev={()=>{console.log("Previous Step Called")}}currentStep={({ currentStep, isLastStep, isFirstStep })=>{setCurrentStep(currentStep)}}/><Viewstyle={{flexDirection: "row",margin: 18}}>{stepList.map((val,index)=>(<Viewkey={"step-indicator-"+index}style={{width: 10,marginHorizontal: 6,height: 10,borderRadius: 5,backgroundColor: index===currentStep ? "#fc0" : "#000",}}/>))}</View></View></View>)}

License

This project is licensed under the MIT License - see the LICENSE.md file for details