https://github.com/httnn/react-native-simple-modal
A simple JavaScript modal component for React Native.
https://github.com/httnn/react-native-simple-modal
modal react-native react-native-component
Last synced: 3 months ago
JSON representation
A simple JavaScript modal component for React Native.
- Host: GitHub
- URL: https://github.com/httnn/react-native-simple-modal
- Owner: httnn
- License: mit
- Created: 2015-12-24T09:11:36.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-08-28T09:37:19.000Z (over 4 years ago)
- Last Synced: 2025-10-03T00:58:14.913Z (4 months ago)
- Topics: modal, react-native, react-native-component
- Language: JavaScript
- Size: 327 KB
- Stars: 184
- Watchers: 7
- Forks: 49
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-simple-modal
A simple JavaScript modal component for React Native. Works on both iOS and Android.
**Looking for maintainers! I'm not actively developing with React Native anymore and I don't have much time to keep this library up-to-date. If you're interested, hit me up: max.huttunen@gmail.com**
## Installation
`npm install react-native-simple-modal --save`
## Usage
See example. Make sure to put the `` at the end of the render function so that it renders above the content!
### Properties and their default values
```javascript
import Modal from "react-native-simple-modal";
undefined}
modalDidOpen={() => undefined}
modalProps={undefined}
modalStyle={{
borderRadius: 2,
margin: 20,
padding: 10,
backgroundColor: "#F5F5F5"
}}
offset={0}
open={false}
overlayStyle={{
backgroundColor: "rgba(0, 0, 0, 0.75)",
flex: 1
}}
/>;
```
## Example
```javascript
import React from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Modal from "react-native-simple-modal";
export default class App extends React.Component {
state = { open: false };
modalDidOpen = () => console.log("Modal did open.");
modalDidClose = () => {
this.setState({ open: false });
console.log("Modal did close.");
};
moveUp = () => this.setState({ offset: -100 });
resetPosition = () => this.setState({ offset: 0 });
openModal = () => this.setState({ open: true });
closeModal = () => this.setState({ open: false });
render() {
return (
Open modal
Hello world!
Move modal up
Reset modal position
Close modal
);
}
}
```