react-native-animated-alert

Installation and Usage

Please check this blog for detail usage this link

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(
        <View>
        ...
            <Alert
                alertTitle="Title"
                alertMessage="Message"
                onAlertShow={this.onAlertShow}
                onAlertHide={this.onAlertHide}
            />
        ...
        </View>
    )
}

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