react-native-popup-dialog/src/PopupDialog.js

React Native Popup Dialog for IOS & Android.

// @flow

import React, { Component } from 'react';
import Sibling from 'react-native-root-siblings';
import Dialog from './components/Dialog';
import type { DialogProps } from './type';

type State = {
  visible: boolean
}

export default class PopupDialog extends Component<DialogProps, State> {
  constructor(props: DialogProps) {
    super(props);

    this.state = {
      visible: props.visible,
    };
  }

  componentDidMount() {
    const { visible } = this.state;
    if (visible) {
      this.createDialog();
    }
  }

  componentDidUpdate(prevProps: DialogProps, prevState: State) {
    // update visible state and create dialog if visible is true
    if (prevState.visible !== this.props.visible) {
      // will use getDerivedStateFromProps in future, then don't need to setState
      // on componentDidUpdate
      // eslint-disable-next-line
      this.setState({ visible: this.props.visible });
      if (this.props.visible) {
        this.createDialog();
      }
    }
    // always re-render if sibling is not null
    if (this.sibling) {
      this.updateDialog();
    }
  }

  handleDismiss = () => {
    const { onDismiss } = this.props;
    if (onDismiss) {
      onDismiss();
    }
    this.destroyDialog();
  }

  sibling: Sibling = null

  createDialog() {
    // Protect against setState happening asynchronously
    if (!this.sibling) {
      this.sibling = new Sibling(this.renderDialog());
    }
  }

  updateDialog() {
    this.sibling.update(this.renderDialog());
  }

  destroyDialog() {
    this.sibling.destroy();
    this.sibling = null;
  }

  renderDialog() {
    return (
      <Dialog
        {...this.props}
        onDismiss={this.handleDismiss}
        visible={this.state.visible}
      />
    );
  }

  render() {
    return null;
  }
}