Created
February 19, 2021 12:31
-
-
Save DeVoresyah/54bab03a174afd0ce8c44bab541aebc5 to your computer and use it in GitHub Desktop.
React Native Blur Modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, memo, useImperativeHandle, forwardRef, useCallback } from 'react' | |
import PropTypes from 'prop-types' | |
import { Modal, View, Text } from 'react-native' | |
import { BlurView } from '@react-native-community/blur' | |
// Components | |
import Button, { ButtonTypes } from '../Button/FullButton' | |
// Styles | |
import styles from '../Styles/Modal/BlurModalStyle' | |
import { apply } from '../../Themes/OsmiProvider' | |
const BlurModal = forwardRef((props, ref) => { | |
const { msg, onConfirm, cancelTitle, confirmTitle } = props | |
const [modalShow, setModalShow] = useState(false) | |
useImperativeHandle(ref, () => ({ | |
showModal() { | |
setModalShow(true) | |
} | |
})) | |
const _handleCancel = useCallback(() => setModalShow(false), []) | |
const _handleConfirm = useCallback(() => { | |
setModalShow(false) | |
onConfirm() | |
}, []) | |
return ( | |
<Modal | |
visible={modalShow} | |
hardwareAccelerated={true} | |
transparent={true} | |
onRequestClose={() => setModalShow(false)} | |
> | |
<BlurView | |
style={styles.blurContainer} | |
blurType="dark" | |
blurAmount={5} | |
reducedTransparencyFallbackColor="black" | |
/> | |
<View style={styles.container}> | |
<View style={styles.modalContainer}> | |
<View style={apply('p-5')}> | |
<Text style={styles.msg}>{msg}</Text> | |
</View> | |
<View style={apply('items-end')}> | |
<View style={apply('row items-center')}> | |
<Button type={ButtonTypes.TRANSPARENT} onPress={_handleCancel} title={cancelTitle} /> | |
<Button type={ButtonTypes.TRANSPARENT} onPress={_handleConfirm} title={confirmTitle} /> | |
</View> | |
</View> | |
</View> | |
</View> | |
</Modal> | |
) | |
}) | |
// Prop type warnings | |
BlurModal.propTypes = { | |
msg: PropTypes.string.isRequired, | |
cancelTitle: PropTypes.string.isRequired, | |
confirmTitle: PropTypes.string.isRequired, | |
onConfirm: PropTypes.func | |
} | |
// Defaults for props | |
BlurModal.defaultProps = { | |
msg: 'This is modal blur', | |
cancelTitle: 'No', | |
confirmTitle: 'Yes', | |
onConfirm: () => alert('love you') | |
} | |
export default memo(BlurModal) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { connect } from '../../../Themes/OsmiProvider' | |
export default connect({ | |
blurContainer: 'absolute top-0 bottom-0 left-0 right-0 z-10', | |
container: 'w/100 h/100 absolute z-20 bg-transparent justify-center px-5', | |
modalContainer: 'bg-white rounded-md shadow-lg pb-2', | |
msg: 'text-base text-black font-regular flex-wrap' | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment