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.

// Render function
<Madal visible={this.state.visible}>
  <Text>{'Show me the MODAL!'}</Text>
</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.

// 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

// 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.

// Notice: here is CallModal not CallModalUtil
CallModal.show({
  renderFunction: () => <View style={{width: 200, height: 300, backgroundColor: '#F00'}}><Text>{'Hello World!!!'}</Text></View>,
  backgroundColor: '#FF0',
  closeWhenPressBackground: true,
});

// Or a react class
CallModal.show({
  renderFunction: class extends Component {
    handleSubmit = () => {
      this.props.requestCloseModal();
    };
    render() {
      return (
        <View style={{width: 200, height: 300, backgroundColor: '#F00'}}>
          <TouchableWithoutFeedback onPress={this.props.handleSubmit}>
            ...
          </TouchableWithoutFeedback>
        </View>
      )
    }
  }
});

Live Demo

Exponent Live Demo

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
• Bootbox.js

License

MIT