react-native-custom-alert-modal
v1.1.9
Published
A customizable alert modal for React Native applications.
Downloads
1,069
Maintainers
Readme
react-native-custom-alert-modal
A simple and customizable modal for React Native that functions like the default alert but with enhanced styling and functionality.
Installation
Install the package using npm or yarn:
npm install react-native-custom-alert-modal or yarn add react-native-custom-alert-modal
Usage
import AlertModal from 'react-native-custom-alert-modal';
const [modalVisible, setModalVisible] = useState(false);
const buttons: Array<ButtonType> = [
{
text: 'OK',
backgroundColor: 'green',
textColor: '#FFFFFF',
style: 'default',
onPress: () => console.log('OK Pressed'),
},
{
text: 'Cancel',
backgroundColor: 'silver',
textColor: '#000000',
style: 'cancel',
onPress: () => console.log('Cancel Pressed'),
},
];
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Show Modal" onPress={() => setModalVisible(true)} />
<AlertModal
visible={modalVisible}
title="Custom Alert"
buttonsStyle="column"
message="This is a customizable alert modal."
buttons={buttons}
onClose={() => setModalVisible(false)}
/>
</View>
);
Props
Button Object Format (ButtonType)
Android View
Customization
You can style the modal and its components by modifying the StyleSheet in the source code. Buttons can have different styles (default, cancel, destructive) for visual cues.
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
License
This project is licensed under the MIT License. See the LICENSE file for details.