https://github.com/talut/react-native-wizard
Easy, convenient, quick-forming Wizard component for React Native
https://github.com/talut/react-native-wizard
Last synced: 5 months ago
JSON representation
Easy, convenient, quick-forming Wizard component for React Native
- Host: GitHub
- URL: https://github.com/talut/react-native-wizard
- Owner: talut
- License: mit
- Created: 2019-04-15T10:46:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-28T19:49:22.000Z (over 2 years ago)
- Last Synced: 2024-09-02T14:18:45.077Z (8 months ago)
- Language: JavaScript
- Homepage: https://talut.dev
- Size: 1.38 MB
- Stars: 80
- Watchers: 5
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-native - react-native-wizard - Easily navigate your user for next step. Quick-forming Wizard component. (Components / UI)
- awesome-react-native - react-native-wizard - Easily navigate your user for next step. Quick-forming Wizard component. (Components / UI)
README
# 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](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated)). |`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`.
```javascript
import React, {useRef} from 'react'
import Wizard, { WizardRef } from 'react-native-wizard';
const wizard = useRef(null)
// Usage
```
**With class component**
If you're not using functional component then you should create a ref with `React.createRef()`.
```javascript
import Wizard, { WizardRef } from 'react-native-wizard';
wizard = React.createRef(null)
```
| 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
```javascript
import React, {useRef,useState} from 'react'
// import Wizard
import Wizard, { WizardRef } from 'react-native-wizard';
// Import your own step components
import Step1 from "./yourStepsDir/Step1";
import Step2 from "./yourStepsDir/Step2";
import Step3 from "./yourStepsDir/Step3";
// ...
const wizard = useRef(null);
const [isFirstStep, setIsFirstStep] = useState()
const [isLastStep, setIsLastStep] = useState()
const stepList = [
{
content: ,
},
{
content:
},
{
content:
},
]
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
```javascript
import React, { useRef, useState } from "react"
import { SafeAreaView, Button, View, Text } from "react-native"
import Wizard, { WizardRef } from "react-native-wizard"
export default () => {
const wizard = useRef(null)
const [isFirstStep, setIsFirstStep] = useState(true)
const [isLastStep, setIsLastStep] = useState(false)
const [currentStep, setCurrentStep] = useState(0)
const stepList = [
{
content: ,
},
{
content: ,
},
{
content: ,
},
{
content: ,
},
]
return (
wizard.current.prev()} />
{currentStep + 1}. Step
wizard.current.next()} />
setIsFirstStep(val)}
isLastStep={val => setIsLastStep(val)}
onNext={() => {
console.log("Next Step Called")
}}
onPrev={() => {
console.log("Previous Step Called")
}}
currentStep={({ currentStep, isLastStep, isFirstStep }) => {
setCurrentStep(currentStep)
}}
/>
{stepList.map((val, index) => (
))}
)
}
```
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details