React Native Blur Modal

BlurModal.js

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)

BlurModalStyle.js

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'
})