A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval
, pan responder up gesture or programmatically (this.dropDownAlertRef.closeAction()
).
react-native version | package version | reason |
---|---|---|
0.50.0 | >=3.2.0 | Added SafeAreaView (iPhone X) |
0.44.0 | >=2.12.0 | Added ViewPropTypes |
npm i react-native-dropdownalert --save
import DropdownAlert from "react-native-dropdownalert";
export default class App extends Component {
componentDidMount() {
this._fetchData();
}
_fetchData = async () => {
try {
await fetch("https://mywebsite.com/endpoint/");
// alertWithType parameters: type, title, message, payload, interval, callback.
// There are 4 pre-defined types: info, warn, success, error.
// payload object with source property overrides image source prop. (optional)
// interval overrides closeInterval prop. (optional)
this.dropDownAlertRef.alertWithType(
"success",
"Success",
"Fetch data is complete.",
payload,
interval,
(payload) => {
console.log('on clicked)
}
);
} catch (error) {
this.dropDownAlertRef.alertWithType("error", "Error", error.message);
}
};
render() {
// Make sure DropdownAlert is the last component in the document tree.
return (
<View>
<DropdownAlert ref={ref => (this.dropDownAlertRef = ref)} />
</View>
);
}
}
- Modals can overlap DropdownAlert if it's not inside the modal's document tree.
- It is important you place the
DropdownAlert
ABOVE theStackNavigator
.- DropdownHolder example #1
- DropdownHolder example #2
- Redux + router flux example
- Repo: react-native-dropdownalert-router-sample Thanks @mitsuruog and @articolo
Inspired by: RKDropdownAlert