react-native-popup-stub

Introduction

Popup global controller:

• Handles popup animations
• Regard the same zIndex components as same layer, remove old popup that has the same zIndex automatically
• Make it easy too implement your own popup like Dialog, Toast, ActionSheet

Derived from @unpourtous/react-native-stub-toast/PopupStub.

Animation is based on react-native-animatable

Installation

npm install @unpourtous/react-native-popup-stub --save

API Detail

PopupStub.init(_ref)

Init PopupStub with PopupStub reference.

| param | type | description | | --- | --- | --- | | _ref | ref | should be the PopupStub component ref |

PopupStub.addPopup(component, option)

Add popup to PopupStub, use option to controller actions for each Component/Layers.

| param | type | description | | --- | --- | --- | | component | Component | View component | | option | Object | see below | | option.id | String | popup unique id, optional | | option.lock | Enum | nearly same as pointerEvents, by default, 'auto' if has a mask, otherwise 'box-none' | | option.mask | Boolean | has a mask or not, default true | | option.zIndex | Integer | same as in css, the priority of popup, the bigger the higher | | option.position | String | position of element in screen, available: none, left, right, top, bottom, center(defualt) | | option.wrapperStyle | Object | animation wrapper style (each popup is wrapped in an Animatable.View) | | Animatable.props | -- | see Animatable.props, direction and onAnimationEnd are reserved |

returns (String) unique id

PopupStub.removePopup(id)

Invoke popup exiting animation and remove it on animation end

| param | type | description | | --- | --- | --- | | id | String | popup unique id

Example

First, add PopupStub as sibling node of your Root Node

export default class example extends Component {
  render () {
    return (
      <View style={styles.container}>
        {/* Your root node */} 
        <TouchableHighlight
          onPress={() => {
            // Step three: Use Toast with static function
            Toast.show('This is a Toast')
            Toast.show('This is another Toast')
          }}>
          <Text>Show Toast</Text>
        </TouchableHighlight>
        
        {/* Step One: Add popup stub */} 
        <PopupStub ref={_ref => {
          // Step Two: Init PopupStub itself
          if (_ref) PopupStub.init(_ref)
        }} />
      </View>
    )
  }
}

Then, just push your popup instance to PopupStub

export default class Toast extends Component {
  static show (msg) {
    const id = PopupStub.stub.addPopup(<Toast msg={msg} />, {
      lock: 'none',
      mask: false,
      position: 'center',
      zIndex: 500,
      delay: 0,
      duration: 100,
      animation: 'fadeIn',
      easing: 'ease'
    })
    // autoclose after 1.5s
    setTimeout(() => {
      PopupStub.stub.removePopup(id)
    }, 1500)
  }
  
  render () {
    return (
      <View style={{backgroundColor: '#000', borderRadius: 5, padding: 15}}>
        <Text style={{color: '#fff', fontSize: 15}}>{this.props.msg}</Text>
      </View>
    )
  }
}

License

This library is distributed under MIT Licence.