# @logisticinfotech/react-native-animated-alert > React Native Animated Alert Library Latest version **1.0.11** (published 2020-08-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @logisticinfotech/react-native-animated-alert pnpm add @logisticinfotech/react-native-animated-alert yarn add @logisticinfotech/react-native-animated-alert bun add @logisticinfotech/react-native-animated-alert ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.11 | | Published | 2020-08-27 | | First published | 2019-08-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 33.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Shubham Vala | | Maintainers | chintan01, digvijay_logistic, nileshkikani, nirav., pankajn | | Keywords | React Native, React Native Alert, Animated Alert, Animated, Alert, Popup Alert, Custom Alert | ## Links - npm: https://www.npmjs.com/package/@logisticinfotech/react-native-animated-alert - Repository: https://github.com/logisticinfotech/react-native-animated-alert - Homepage: https://github.com/logisticinfotech/react-native-animated-alert#readme - Issues: https://github.com/logisticinfotech/react-native-animated-alert/issues - npm.io page: https://npm.io/package/@logisticinfotech/react-native-animated-alert ## Dependencies (3) - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [react-native-pose](https://npm.io/package/react-native-pose.md) ^0.9.1 - [react-native-status-bar-height](https://npm.io/package/react-native-status-bar-height.md) ^2.5.0 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 1.0.11 (latest) — 2020-08-27 - 1.0.10 — 2020-08-27 - 1.0.9 — 2020-07-25 - 1.0.8 — 2020-07-24 - 1.0.7 — 2020-07-24 - 1.0.6 — 2020-07-24 - 1.0.5 — 2019-11-27 - 1.0.4 — 2019-09-30 - 1.0.3 — 2019-08-19 - 1.0.2 — 2019-08-12 - 1.0.1 — 2019-08-09 - 1.0.0 — 2019-08-09 ## README

npm version

# react-native-animated-alert ### Installation and Usage Please check this blog for detail usage [this link](https://www.logisticinfotech.com/blog/react-native-animated-alert-library/) #### Simple Usage `import Alert from '@logisticinfotech/react-native-animated-alert';` Below code will show and hide alert the simple alert. ``` onPressShow = () => { Alert.showAlert(); } ... onPressHide = () => { Alert.hideAlert(); } ... onAlertShow = () => { console.log(‘Alert is visible’) } onAlertHide = () => { console.log(‘Alert is hidden’) } ... render(){ return( ... ... ) } ``` ![](RNAnimatedAlertIOS.gif) ![](RNAnimatedAlterAndroid.gif) ### Basic Properties | Prop | Default | Type | Description | | ------------------------- | --------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | alertBGContainerStyle | {} | `style` | Alert main container style. | | alertBGColor | '#A9A9A9' | `string` | Alert background color. | | alertIconVisible | true | `bool` | Display or hide alert icon side to title. | | alertLoadingVisible | true | `bool` | Show loading type alter. | | alertIconSource | bellIcon | `source` | Change the default bell icon. This will be not display id loading is visible. | | alertIconSize | 24 | `number` | size of the alter icon. | | alertIconTintColor | '' | `string` | color of the icon if source has transparent pixel. | | alertIconResizeMode | 'center' | `enum of ['center','contain','cover','repeat','stretch']` | Image resize mode. | | alertAnimatedIcon | true | `bool` | Icon of alert will be show animated. | | alertAnimatedIconDuration | 200 | `number` | Animation time duration of alert icon. | | alertTitle | '' | `string` | Display title of the alter. | | alertTitleStyle | InLibrary | `style` | Style of alter title display. | | alertMessage | '' | `string` | Display message of the alter. | | alertMessageStyle | InLibrary | `style` | Style of alter message display. | | alertButtonTitle | [] | `array(string)` | Display the alert button. max is 2 buttons. This will be not display id loading is visible. | | alertButtonPosition | 'end' | `enum of ['start','center','end']` | Style of the non selected date or time. | | alertButtonStyle | InLibrary | `style` | Style of the alert buttons. | | alertButtonTextStyle | InLibrary | `style` | Style of text of the alert buttons . | | alertAutoHide | true | `bool` | Auto hide alter. This will be not display id loading is visible or button is visible | | alertAutoHideDuration | 2000 | `number` | Time in millisecond after alter auto hide if it enable. This will be not display id loading is visible or button is visible | | alertTapToDismiss | false | `bool` | Hide alert on tap on it. This will be not display id loading is visible. | | onPressAlert | () => {} | `function` | Call when click on the alter. | | onPressButtonOne | () => {} | `function` | Call when button one(left button) is press. | | onPressButtonTwo | () => {} | `function` | Call when button two(right button) is press if has two buttons. | | onAlertShow | () => {} | `function` | Call when alert is visible. | | onAlertHide | () => {} | `function` | Call when alert is hide. | --- _Source: https://npm.io/package/@logisticinfotech/react-native-animated-alert · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._