0.0.1-rc.2 • Published 3 years ago

react-native-custom-modal-alert v0.0.1-rc.2

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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 bashowCustomAlert 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

NameTypeDefaultDescription
titlestringundefinedTitle for the alert
bodyelementundefinedBody component for the alert
hasCancelButtonbooleanfalseControls the visibility of the cancel button
borderColorstringundefinedBorder 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