JSPM – @unpourtous/react-native-popup-stub@1.3.0

Package Exports

@unpourtous/react-native-popup-stub

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@unpourtous/react-native-popup-stub) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Introduction

Popup global controller:

Handle popup animations
Remove old popup with the same zIndex automatically
Make it easy to implement your own popup like Dialog, Toast, ActionSheet
Support landscape and portrait automatically

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

Animation is based on react-native-animatable

Demo

demo

Installation

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

API Detail

Props

PopupStub properties

param	type	description
maskColor	String	mask color, default 'rgba(23,26,35,0.6)'
maskAnimatable	Boolean	whether enable mask animation, default false
orientation	Enum	deprecated, no need any more

PopupStub.init(ref)

Init PopupStub with PopupStub reference.

param	type	description
ref	ref	should be the PopupStub component reference

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
.id	String	popup unique id, optional
.lock	Enum	deprecated since `v1.1.0`
.mask	Boolean	has a visual mask or not, default true
.maskDuration	Integer	duration of mask animation (if enabled)
.autoClose	Boolean	enable clicking mask to close or not, default true
.enableClickThrough	Boolean	blank erea (of container) may click through or not, default false
.visible	Boolean	whether to render this popup, default true
.zIndex	Integer	priority of each popup in PopupStub, the bigger the higher
.position	Enum	position of element in screen, available: none, left, right, top, bottom, center (defualt)
.wrapperStyle	Object	animation wrapper style (each popup is wrapped in an Animatable.View)
.closingAnimation	Animation	by default, reversed animation
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 maskColor='rgba(0,0,0,0.75)' ref={_ref => {
          // Step Two: Init PopupStub itself
          if (_ref) PopupStub.init(_ref)
        }} />
      </View>
    )
  }
}

Then, just push your popup instance to PopupStub

// Toast.js

export default class Toast extends Component {
  static show (msg) {
    const id = PopupStub.addPopup(<Toast msg={msg} />, {
      mask: false,
      enableClickThrough: true,
      position: 'center',
      zIndex: 500,
      delay: 0,
      duration: 100,
      animation: 'fadeIn',
      easing: 'ease'
    })
    // autoclose after 1.5s
    setTimeout(() => {
      PopupStub.removePopup(id)
    }, 1500)
  }

  render () {
    return (
      <View style={{backgroundColor: '#000', borderRadius: 5, padding: 15}}>
        <Text style={{color: '#fff', fontSize: 15}}>{this.props.msg}</Text>
      </View>
    )
  }
}

// ActionSheet.js

export default class ActionSheet extends Component {
  static _id

  static show (choices) {
    ActionSheet._id = PopupStub.addPopup(<ActionSheet choices={choices} />, {
      mask: true,
      zIndex: 300,
      delay: 0,
      duration: 100,
      animation: {from: {translateY: 210}, to: {translateY: 0}},
      easing: 'ease',
      position: 'bottom',
      // or the same, 100% width at the bottom of screen
      // position: 'none',
      // wrapperStyle: {position: 'absolute', left: 0, right: 0, bottom: 0}
    })
  }

  static hide () {
    PopupStub.removePopup(ActionSheet._id)
  }

  render () {
    // as for demo, we ignore property choices here
    return (
      <View style={{backgroundColor: 'gray'}}>
        <View style={styles.btn}>
          <Text style={{fontSize: 16}}>Option 1</Text>
        </View>
        <View style={[styles.btn, styles.line]}>
          <Text style={{fontSize: 16}}>Option 2</Text>
        </View>
        <View style={[styles.btn, styles.line]}>
          <Text style={{fontSize: 16}}>Option 3</Text>
        </View>

        <View style={[styles.btn, {marginTop: 10}]}>
          <Text style={{fontSize: 16, color: 'gray'}} onPress={() => ActionSheet.hide()}>Cancel</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  btn: {
    backgroundColor: 'white',
    height: 50,
    alignItems: 'center',
    justifyContent: 'center'
  },
  line: {
    borderColor: '#ddd',
    borderTopWidth: 1
  }
})

Todo

Each popup an independent mask, rather than share a visual one
Support popup life circle callback or so
Enable mask animation
Enable remove animation in android
Enable reversing any valid animations
Enable to close popup with same zIndex by configuration

License

This library is distributed under MIT Licence.