AsyncPopup-RN.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ViewPropTypes } from 'react-native';

import Popup from './Popup';
import Loader from './Loader';
import LoadingError from './LoadingError';

const AsyncPopup = ({
  style,
  onClose,
  isOpen,
  renderLoader,
  renderContent,
  renderError,
  loadingState,
}) => (
  <Popup
    style={style}
    onClose={onClose}
    isOpen={isOpen}
    renderContent={() => {
      if (loadingState === 'loading') return renderLoader();
      if (loadingState === 'loaded') return renderContent();
      if (loadingState === 'errored') return renderError();
      return null;
    }}
  />
);

AsyncPopup.propTypes = {
  style: ViewPropTypes.style,
  onClose: PropTypes.func.isRequired,
  isOpen: PropTypes.bool,
  renderLoader: PropTypes.func,
  renderContent: PropTypes.func,
  renderError: PropTypes.func,
  loadingState: PropTypes.oneOf(['loading', 'loaded', 'errored', 'not-loaded']).isRequired,
};

AsyncPopup.defaultProps = {
  style: null,
  isOpen: false,
  renderLoader: () => <Loader />,
  renderContent: () => null,
  renderError: () => <LoadingError />,
};

export default AsyncPopup;