@unpourtous/react-native-popup-stub

react-native-popup-stub

Introduction

Popup global controller:

• Handles popup animations
• Treats components with the same zIndex as same layer, removes old popup automatically
• Makes 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.stub.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	popup layer lock mode, by default, 'auto' if has a mask, otherwise 'mask-only'
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.stub.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>
    )
  }
}

TODO List

• Enable reversing any valid animations
• Support onAnimationEnd
• Support onClose callback or so
• Each popup an independent mask, rather than share a visual one

License

This library is distributed under MIT Licence.