react-native-popup-stub

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

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 | Boolean | when locked, it will stop all clicks, default false | | .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 | | .closeCallback | Function | when close, it will support close callback | | .enableClickThrough | Boolean | deprecated, use lock instead | | .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

lock changed a lot, from Enum to Boolean.

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

• [x] Each popup an independent mask, rather than share a visual one
• [ ] Support popup life circle callback or so
• [x] Enable mask animation
• [x] 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.