Skip to content

Instantly share code, notes, and snippets.

@lfkwtz
Created December 5, 2018 22:07
Show Gist options
  • Save lfkwtz/a1dcc6bfd4349c4795e5e6845ac9647e to your computer and use it in GitHub Desktop.
Save lfkwtz/a1dcc6bfd4349c4795e5e6845ac9647e to your computer and use it in GitHub Desktop.
Replacing native alerts with custom modals in React Native
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment