react-native-custom-modal-alert

React Native custom modal for alert

Usage no npm install needed!

<script type="module">
  import reactNativeCustomModalAlert from 'https://cdn.skypack.dev/react-native-custom-modal-alert';
</script>

README

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';
  1. Create useCustomAlert object
const { showCustomAlert, renderCustomAlert } = useCustomAlert();
  1. Nest renderCustomAlertcomponent into the page's element
return (
  <>
    { renderCustomAlert() }
    <SafeAreaView>
        ...
    </SafeAreaView>
  </>
);
  1. 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