@fugood/react-native-call-modal

    0.0.19 • Public • Published

    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

    Install

    npm i @fugood/react-native-call-modal

    DownloadsWeekly Downloads

    49

    Version

    0.0.19

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • wayne.cheh
    • pepper.yen
    • jhen0409
    • hans00