react-native-steps-modal

An enhanced and customizable react-native steps in a modal.

Features

• Easily customizable
• Plain simple and flexible APIs
• Customizable color and timing
• Smooth enter/exit animations for the modal
• Resize itself correctly on device rotation
• Swipeable

Setup

This library is available on npm, install it with: npm i react-native-steps-modal or yarn add react-native-steps-modal.

Usage

1. Import react-native-steps-modal:

import StepsModal from "react-native-steps-modal";

1. Create a steps modal and give its content in stepsComponents props:

render () {
  const first = <Text>I am the first</Text>;
  const second = <Text>I am the second</Text>;
  const third = <Text>I am the third</Text>;
 
    return (
      <View style={{ flex: 1}}>
        <StepsModal
          stepsComponents={[firstComponent, secondComponent, thirdComponent]}
        />
      </View>
    )
  }

1. Then simply show it by setting the isVisible prop to true:

render () {
  const first = <Text>I am the first</Text>;
  const second = <Text>I am the second</Text>;
  const third = <Text>I am the third</Text>;
 
    return (
      <View style={{ flex: 1}}>
        <StepsModal
          isVisible={true}
          stepsComponents={[firstComponent, secondComponent, thirdComponent]}
        />
      </View>
    )
  }

The isVisible and stepsComponents props are the only props you'll really need to make the steps modal work. You should control isVisible prop value by saving it in your state and setting it to true or false when needed.

A complete example

For an example take a look at the /example directory.

Available props

Name	Type	Default	Description
isVisible	bool	REQUIRED	Show the modal?
stepsComponents	array	REQUIRED	The steps modal content components
animationIn	string or object	'zoomInDown'	Modal show animation
animationInTiming	number	600	Timing for the modal show animation (in ms)
animationOut	string or object	'zoomOutUp'	Modal hide animation
animationOutTiming	number	600	Timing for the modal hide animation (in ms)
hideSkipButton	bool	false	hide the step skip button
skipLabel	bool	'Skip'	skip button label
doneLabel	bool	'Done'	done button label
nextLabel	bool	'Next'	next button label
prevLabel	bool	'Previous'	prev button label
indicatorStyle	object	{ borderRadius: 5, width: 13, height: 13 }	style for indicator
buttonStyle	object	{ fontWeight: "bold", fontSize: 14 }	style for buttons
colortheme	string	'#48d0cb'	color for both indicator and button
backColor	string	'#ffffff'	steps modal background color

Available animations

Take a look at react-native-animatable to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable animation definition schema.

Acknowledgements

Pull requests, feedbacks and suggestions are welcome!