@fugood/react-native-call-modal

This module let you use api call to open Modal and provide some basic panel most commonly.

Stats

StarsIssuesVersionUpdatedCreatedSize
@fugood/react-native-call-modal
630.0.193 years ago5 years agoMinified + gzip package size for @fugood/react-native-call-modal in KB

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.

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

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

  • Basic modal
  • Test coverage
  • Custom modal
  • Custom container, title, item, button render function
  • QRCode modal

Known Issues

History

TODO: Write history

Thanks

Inspired by:

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.