This library is still in the state of developing and testing. Use at your own risk!

React Native Custom Modal Alert

A customizable pop-up alert using react-native-modal to display and react-native-vector-icons for buttons

Installation

Install it with

npm i react-native-custom-modal-alert

OR

yarn add react-native-custom-modal-alert

Usage

1. Import react-native-custom-modal-alert

import useCustomAlert from 'react-native-custom-modal-alert';

2. Create useCustomAlert object

const { showCustomAlert, renderCustomAlert } = useCustomAlert();

3. Nest renderCustomAlertcomponent into the page's element

return (
  <>
    { renderCustomAlert() }
    <SafeAreaView>
        ...
    </SafeAreaView>
  </>
);

4. Show alert by calling showCustomAlert API

renderInstructions = () =>{
    return(
        <View style={{width:'90%', alignSelf: 'center'}}>
            <Text style={{margin: 10}}>{"Body goes here"}</Text>
        </View>
    );
}

showCustomAlert({
    title:"Title goes here",
    body:renderInstructions(),
    hasCancelButton:true,
    borderColor: 'black'
})

Props

| Name | Type | Default | Description | | -------------------- | ---------------- | ------------ | --------------------------------------------- | | title | string | undefined | Title for the alert | | body | element | undefined | Body component for the alert | | hasCancelButton | boolean | false | Controls the visibility of the cancel button | | borderColor | string | undefined | Border color for the alert |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT