Step by Step Modal

React Native step by step modal component.

👉Bare minimum
👉Advanced configuration

Install

npm i step-by-step-modal -S

or,

yarn add step-by-step-modal

Usage

Props:

Property	isRequired	Description
closeModal	true	Function for closing the modal passed from parent component
modalColor	-	Define modal background color
modalHeaderComponent	-	Component shown instead of default header
modalVisible	true	Boolean which indicates if the modal is open, or closed
popupComponent	-	Popup component which will be shown on the last step
popupRepeatComponent	-	Component which will return user to the fist slide. Functionality will be removed if - value is passed to this property
progressColor	-	Define progress color active step color. Secondary color is represented as 30% opaque
progressStyles	-	Override progress styles
slides	true	Array of slide components
stepStyles	-	Override active step styles
withoutPopup	-	Boolean which indicates weather popup should be shown on the last slide

Basic example

Bellow is bare minimum which is needed for this component to work.

import React, { Component } from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import StepByStepModal from './StepByStepModal';
 
class App extends Component {
  state = {
    modalVisible: false,
  }
 
  handleModalVisibility() {
    const { modalVisible } = this.state;
 
    this.setState({ modalVisible: !modalVisible });
  }
 
  render() {
    const { modalVisible } = this.state;
 
    return (
      <View style={styles.wrapper}>
        <StepByStepModal
          modalVisible={modalVisible}
          closeModal={() => this.handleModalVisibility()}
          slides={[
            <SampleSlide title="Initial slide" />,
            <SampleSlide title="Slide One" />,
            <SampleSlide title="Slide Two" />,
          ]}
        />
 
        <TouchableOpacity
          onPress={() => this.handleModalVisibility()}>
          <Text>Show Progress Modal</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

TODO

• Add tests

Suggestions?

Shoot me an email, or submit an issue 🚀