1.0.1 • Published 5 years ago
react-native-irvs-modal v1.0.1
react-native-custom-modal
A simple and fully customizable React Native component that implements a modal.
| Success | Error | Warning |
|---|---|---|
 |  |  |
Installation
If using yarn:
yarn add react-native-irvs-modalIf using npm:
npm i react-native-irvs-modalUsage
import React, { Component } from 'react';
import { Modal } from 'react-native-irvs-modal';
class ExampleScreen extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
}
}
render() {
return (
<Modal
visible={this.state.isVisible}
type="success"
title="Success!"
message="Modal was rendered."
confirmButtonAction={() => { this.setState({isVisible:false}) }}
/>
)
}
}
export default ExampleScreen;Documentation
Modal Component
| Name | Description | Default | Type |
|---|---|---|---|
| type | Modal type to render | null | String |
| animation | Animated effect for modal | none | String |
| visible | Sets the display status of the component | false | Boolean |
| title | Component header title | null | String |
| message | Text displayed in modal content | null | String |
| showConfirmButton | Display or not confirm button | true | Boolean |
| confirmButtonText | Text displayed on confirmation button | "OK" | String |
| confirmButtonColor | Confirmation Button Color | #3085d6 | String |
| confirmButtonAction | Function by clicking the confirm button | null | Func |
| showCancelButton | Display or not cancel button | false | Boolean |
| cancelButtonText | Text displayed on cancel button | "Cancel" | String |
| cancelButtonColor | Cancel Button Color | #aaa | String |
| cancelButtonAction | Function by clicking the cancel button | null | Func |
| image | Custom image in modal header | null | Object |
| imageWidth | Image width | 60px | Number |
| imageHeight | Image height | 60px | Number |
Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
Author
Iago Ronan