Replacing native alerts with custom modals in React Native

Modal.js

import React, { PureComponent } from 'react';
import { Modal } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { QuoteSuccessModal } from './QuoteSuccessModal/QuoteSuccessModal';

const Modals = {
    QUOTE__SUCCESS: QuoteSuccessModal,
};

export class ModalComponent extends PureComponent {
    static propTypes = {
        isVisible: PropTypes.bool.isRequired,
        ModalChild: PropTypes.func,
        modalProps: PropTypes.shape({}),
    };

    static defaultProps = {
        ModalChild: null,
        modalProps: {},
    };

    render() {
        const { isVisible, ModalChild, modalProps } = this.props;

        if (!ModalChild) {
            return null;
        }

        return (
            <Modal visible={isVisible} animationType="fade" testID="modal">
                <ModalChild {...modalProps} />
            </Modal>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isVisible: state.modal.isVisible,
        ModalChild: Modals[state.modal.id],
        modalProps: state.modal.modalProps,
    };
};

export const LsModal = connect(mapStateToProps)(ModalComponent);