An alert to notify users about an error or something else
MIT License
Bot releases are visible (Hide)
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
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).Published by testshallpass about 1 year ago
<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
.
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.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.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
.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
.Published by testshallpass almost 3 years ago
paddingHorizontal
to padding
for defaultTextContainer
default prop.render
functions' passed second argument in typescript definition. Thanks @AlexArendsenPublished by testshallpass almost 3 years ago
I consolidated imageview
, TextView
and CancelButton
into the parent component.
padding
in containerStyle
, imageStyle
and cancelBtnImageStyle
default prop.padding
with paddingHorizontal
in defaultTextContainer
default prop.cancelBtnStyle
prop.constants.js
to Utils.js
.See more props: here
Published by testshallpass almost 3 years ago
clearQueue
and getQueueSize
#227.SafeAreaView
#226.BREAKING CHANGES
replaceEnabled
in favor of alert queue.useAnimationLock
because it would block alerts from opening during another alert's animation.FEATURES
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
Changelog
FEATURES
onTap
callback function prop for when DropdownAlert
has been tapped close.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.
//...
I decided to refactor Dropdownalert to increase test coverage (+18.58%), readability and maintainability. I kept it working as expected with limited breaking changes.
I also want to thank all the contributors, feedback and support. I will help out on any open PRs that have conflicts.
Changelog
BREAKING CHANGES
safeAreaStyle
becomes contentContainerStyle
FEATURES
useAnimationLock
prop to prevent alerts colliding with one another during close or open animations.alertWithType
and so if "unknown" type is passed the default styles are used. (i.e. like using "custom" type).startDelta
and endDelta
to keep alert visible.CHANGES
closeAction
to close alert.getStringValue
FIXES
alertWithType
function. See example in: #177 and Thanks @rdewolffisInteraction
boolean prop for use with animation config. Thanks @slorberuseNativeDriver
prop now defaults to true
as before v3.10.0 it only defaulted to true on iOS platform. Thanks @slorber