1.0.4 ā¢ Published 5 years ago
step-by-step-modal v1.0.4
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 š