Changelog

Overview

Introducing the alertPosition prop, it dictates where the alert animation flow begins. It accepts either top or bottom (default: top). To note, if set to bottom then update status bar does not happen and pan responder interaction is adjusted. #234

Breaking change

• panResponderMoveDistance prop removed in favor of setting onMoveShouldSetPanResponder to panResponderEnabled. This was based on: "Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?" for this case yes when enabled (Pan responder lifecycle).

Changelog

Overview

<DropdownAlert /> has been refactored to a functional Typescript component. In doing so, there was opportunity to add props, change props and refocus to a single animation flow.

That single animation flow is to start off screen from the top then animate downward onto the screen. This resulted in a decision to remove the complexity behind and usage of the startDelta and endDelta props and where there was logic to keep it on screen.

Moreover, props were added that give more access and control over built-in components. In addition, the children prop was added and this provides the ability to build your own alert (BYOA), for example, <DropdownAlert><Text>{'Alert'}</Text></DropdownAlert>.

Lastly, prop name changes for the most part are to realign them with the associated type and component name. For example, wrapperStyle renamed to animatedViewStyle.

New

• onDismissAutomatic callback function added and invoked when alert is dismissed by timeout the time can customized with dismissInterval prop or interval data property and defaults to 4000ms.
• onDismissPanResponder callback function added and invoked when alert is dismissed by pan gesture.
• onDismissProgrammatic callback function added and invoked when alert is dismissed by dismiss function prop.
• onDismissCancel callback function added and invoked when alert is cancelled typically when using showCancel prop.
• onDismissPress callback function added and invoked when alert is dismissed by tapping on alert view.
• panResponderDismissDistance number added and is the distance on the y-axis the alert needs to travel to be dismissed.
• animatedViewProps ViewProps added and allows control over props for Animated.View parent component.
• alertTouchableOpacityProps TouchableOpacityProps added and allows control over props for TouchableOpacity child component.
• safeViewProps ViewProps added and allows control over props for SafeView child component to TouchableOpacity.
• textViewProps ViewProps added and allows control over props for View component that holds title and message text components.
• imageProps ImageProps added and allows control over props for the Image left side child component to TouchableOpacity.
• cancelTouchableOpacityProps TouchableOpacityProps added and allows control over props for the cancel TouchableOpacity component.
• cancelImageProps ImageProps added and allows control over props for the cancel Image component.
• children ReactNode added and if provided are rendered inside the Animated.View instead of the built-in components.
• springAnimationConfig added and used in Animated.spring().
• DropdownAlertType enum added.
• DropdownAlertDismissAction enum added.
• DropdownAlertColor enum added.
• DropdownAlertData object type added.
• DropdownAlertToValue enum added.
• DropdownAlertImage enum added.
• DropdownAlertTestID object added.

Changes

• isOpen state variable removed. This results in the alert always rendered. It's visibility is based on top position of the Animated.View parent component.
• Removed dependency prop-types.
• imageSrc, infoImageSrc, warnImageSrc, errorImageSrc, successImageSrc propType changed to ImageSourcePropType.
• infoColor, warnColor, errorColor, successColor, activeStatusBarBackgroundColor, inactiveStatusBarBackgroundColor propType changed to ColorValue.
• imageStyle propType changed to ImageStyle.

Breaking changes

• dropDownAlertRef.alertWithType(...) replaced by alert(data?: DropdownAlertData) promise function prop. payload removed and source is part of data.
• dropDownAlertRef.closeAction() replaced by dismiss() function prop.
• closeInterval renamed to dismissInterval.
• startDelta and endDelta removed.
• wrapperStyle renamed to animatedViewStyle and propType changed to ViewStyle.
• containerStyle renamed to alertViewStyle and propType changed to ViewStyle.
• contentContainerStyle renamed to safeViewStyle and propType changed to ViewStyle.
• titleStyle renamed to titleTextStyle and propType changed to TextStyle.
• messageStyle renamed to messageTextStyle and propType changed to TextStyle.
• cancelBtnImageStyle renamed to cancelImageStyle and propType changed to ImageStyle.
• titleNumOfLines renamed to titleNumberOfLines.
• messageNumOfLines renamed to messageNumberOfLines.
• onClose replaced by callback functions based on action taken. See: onDismissAutomatic, onDismissCancel, onDismissPress, onDismissPanResponder or onDismissProgrammatic.
• onCancel renamed to onDismissCancel.
• tapToCloseEnabled renamed to onDismissPressDisabled to match TouchableOpacity disabled prop and default changed to false.
• useNativeDriver and isInteraction moved into springAnimationConfig object and defaults changed to false.
• activeStatusBarStyle and inactiveStatusBarStyle propTypes changed to StatusBarStyle.
• sensitivity renamed to panResponderMoveDistance. It serves as the distance gesture needs to travel before alert should move.
• testID, accessibleLabel and accessible removed. Use new prop objects to set these attributes on the specific components.
• onTap renamed to onDismissPress.
• defaultContainer removed.
• defaultTextContainer renamed to textViewStyle and propType changed to ViewStyle.
• cancelBtnImageSrc renamed to cancelImageSrc and propType changed to ImageSourcePropType.

Changelog

• Fix #272 - Revert paddingHorizontal to padding for defaultTextContainer default prop.
• Fix render functions' passed second argument in typescript definition. Thanks @AlexArendsen

I consolidated imageview, TextView and CancelButton into the parent component.

Changelog

• Removed padding in containerStyle, imageStyle and cancelBtnImageStyle default prop.
• Replaced padding with paddingHorizontal in defaultTextContainer default prop.
• Added cancelBtnStyle prop.
• Renamed constants.js to Utils.js.

See more props: here

Changelog

• Fix missing typescript definition for clearQueue and getQueueSize #227.
• Fix cancel button not in SafeAreaView #226.
• Update README: badges and usage example.
• Update project: add github workflow, remove travis, fix eslint detection and dev dependencies.

Changelog

BREAKING CHANGES

• Removed replaceEnabled in favor of alert queue.
• Removed useAnimationLock because it would block alerts from opening during another alert's animation.

FEATURES

• Introducing: alert queue. This provides ability to invoke alertWithType multiple times to enqueue a series of alerts. They are presented in FIFO (first in, first out) order and display until the queue is empty. Example:

_createAlertQueue = () => {
   const types = ['info', 'warn', 'error', 'success', 'custom'];
   const message = 'message';
   let count = 1;
   // queuing a series of alerts
   types.map(type => {
       this.dropDownAlertRef.alertWithType(
       type,
       `Alert ${count} of ${types.length}`,
       message,
       );
       count++;
   });
};
// get queue size programmatically:
_getQueueSize = () => {
   const queueSize = this.dropDownAlertRef.getQueueSize();
   console.log(`current queue size is ${queueSize}`);
};
// clear queue programmatically:
_clearQueue = () => {
   this.dropDownAlertRef.clearQueue();
};

FIXES

• StatusBar not updating itself after close.

FIXES

• Remove safeAreaStyle from typescript. #217
• Add Proptypes.object to image source prop definitions. #218

TASKS

• closeAction is now documented in typescript. #212

CONTRIBUTORS

• @petekp
• @MarcusKJOoi
• @jeremy-deutsch

FIXES

• Rework PR: apply active bar style to android #207
• [react-native-web] Cannot assign to read only property #204

Changelog

TASKS

• Add onTap to typescript. Thanks @panvourtsis.

Changelog

FEATURES

• Added onTap callback function prop for when DropdownAlert has been tapped close.
• Added the ability to pass a payload object with an image source property as parameter to alertWithType #161. Example:

//...
const payload = { source: 'https://facebook.github.io/react-native/docs/assets/favicon.png' };
this.dropDownAlertRef.alertWithType('info', 'title', 'message', payload);
// Keep in mind, the image source property overrides any provided image source props.
//...