Alert 커스터마이징하기

Modal을 써서 만들면 된다.

import { Modal, Pressable, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { BLACK } from '../colors';

const DangerAlert = ({ visible, onClose }) => {
	return (
		<Modal
			visible={visible}
			transparent={true}
			animationType="fade"
			onRequestClose={onClose}
		>
			<Pressable onPress={onClose} style={styles.background}></Pressable>
		</Modal>
	);
};

DangerAlert.propTypes = {
	visible: PropTypes.bool.isRequired,
	onClose: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
	background: {
		...StyleSheet.absoluteFillObject,
		backgroundColor: BLACK,
		opacity: 0.3,
	},
});
export default DangerAlert;

• visible: 보여줄지 여부
• transparent: 투명도
• animationType: 애니메이션
• onRequestClose : 닫히는 함수

일단 위와 같이 설정하면 화면만 투명해진다 안에 컴포넌트는 입맛대로 제작하면 됨.