https://github.com/mybigday/react-native-call-modal
This module let you use api call to open React Native Modal and provide some basic panel most commonly.
https://github.com/mybigday/react-native-call-modal
Last synced: 3 months ago
JSON representation
This module let you use api call to open React Native Modal and provide some basic panel most commonly.
- Host: GitHub
- URL: https://github.com/mybigday/react-native-call-modal
- Owner: mybigday
- License: mit
- Created: 2017-02-04T16:40:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-16T10:57:44.000Z (about 7 years ago)
- Last Synced: 2025-06-01T06:51:01.178Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 52.7 KB
- Stars: 6
- Watchers: 3
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Native Call Modal: Programmatically modal component control
Since react native is a property driven framework (It's really great!). Every component have to locate within render function, and control by `props`. Even THE special Modal component is not an exception.
```js
// Render function
{'Show me the MODAL!'}
// Some other place
handleSomeThingPress = () => {
this.setState({
visible: true,
});
}
```
Now we got a empty modal, if you want more feature with this modal... Good lock!
But sometimes we just want simply call `confirm()` then show panel and blocking the code wait user's response.
**React Native Call Modal** is born for this, this lib not only give you a callable modal but also provide you a set of modal utilities like: `alert()`, `confirm()`, `prompt()`. And it will add more useful feature for you.
## Get Started
#### Step 1
Install react-native-call-modal
`npm i @fugood/react-native-call-modal --save`
#### Step 2
Initialize the provider to put the modal component at top.
```js
// At your root component
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { CallModal, CallModalUtil, connectCallModal } from '@fugood/react-native-call-modal';
@connectCallModal
export default class App extends Component {
...
}
AppRegistry.registerComponent('App', () => App);
```
#### Step 3
Call for use
```js
// Any where you like just call
await CallModalUtil.alert('Show me the ALERT');
console.log('User press OK');
const result = await CallModalUtil.confirm('Sure to logout?');
console.log(`Answer: ${result}`);
const name = await CallModalUtil.prompt('Enter your name');
console.log(`Hello: ${name}`);
```
Now you can see an beautiful modal (maybe...) jump out screen, with an OK button and custom message. Until user press the OK button the second line `console.log` will be execute.
If a simple `title` modal can not meet you, keep going!
## Advanced Usage
First argument can be a `string` or `object`, you can give an object to get more control.
#### Alert
| Name | Type | Description | Default |
|---------|--------|----------------------------------|---------|
| title | string | Title text with bold font weight | |
| message | string | Body text | |
| okText | string | Text show on confirm button | "OK" |
#### Confirm
| Name | Type | Description | Default |
|-------------|--------|----------------------------------|----------|
| title | string | Title text with bold font weight | |
| message | string | Body text | |
| okText | string | Text show on confirm button | "OK" |
| cancelText | string | Text show on cancel button | "CANCEL" |
#### Prompt
| Name | Type | Description | Default |
|--------------------------|--------|-----------------------------------------------------------------------------------|----------|
| title | string | Title text with bold font weight | |
| message | string | Body text | |
| okText | string | Text show on confirm button | "OK" |
| cancelText | string | Text show on cancel button | "CANCEL" |
| autoSubmit | bool | When select use to disable OK button | false |
| inputType | string | One of `text`, `select`, `checkbox`, `action`, `question` | "text" |
| value (text) | string | Default value of prompt, this must be a string value | "" |
| value (select, checkbox) | array | Default value of prompt, this must be an array of `{ key: , value: }` | [] |
| value (action) | array | Default value of prompt, this must be an array of `{ key: , value: , onSelect: }` | [] |
| value (question) | array | Default value of prompt, this must be an array of `{ key: , value: , title: }` | [] |
## Customize Modal Usage
If you want customize all your modal and just want we open/close the modal for you. You can use `CallModal.show()` to get things done.
```js
// Notice: here is CallModal not CallModalUtil
CallModal.show({
renderFunction: () => {'Hello World!!!'},
backgroundColor: '#FF0',
closeWhenPressBackground: true,
});
// Or a react class
CallModal.show({
renderFunction: class extends Component {
handleSubmit = () => {
this.props.requestCloseModal();
};
render() {
return (
...
)
}
}
});
```
## Live Demo
[Exponent Live Demo](https://exp.host/@pepper/react-native-call-modal-example)
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Roadmap
- [x] Basic modal
- [ ] Test coverage
- [ ] Custom modal
- [ ] Custom container, title, item, button render function
- [ ] QRCode modal
## Known Issues
## History
TODO: Write history
## Thanks
Inspired by:
* [react-native-action-sheet](https://github.com/exponent/react-native-action-sheet)
* [Bootbox.js](http://bootboxjs.com)
## License
[MIT](LICENSE.md)