react-native-bpk-component-banner-alert
Backpack React Native banner alert component.
Installation
npm install react-native-bpk-component-banner-alert --save-dev
Usage
;;;;; const styles = StyleSheet; { super; thisstate = showDismissable: true expanded: false ; } { this; } { this; } { return <View style=stylescontainer> <BpkBannerAlert style=stylesbannerAlert type=ALERT_TYPESsuccess message="Success message!" /> <BpkBannerAlert style=stylesbannerAlert type=ALERT_TYPESwarn message="Warn message!" dismissButtonLabel="Dismiss" onDismiss=thisonDismiss dismissable show=thisstateshowDismissable /> <BpkBannerAlert style=stylesbannerAlert type=ALERT_TYPESerror message="Error message!" toggleExpandedButtonLabel="Expand" onToggleExpanded=thisonExpandablePress expanded=thisstateexpanded > <BpkText textStyle="sm"> Lorem ipsum dolor sit amet consectetur adipiscing elit Quisque sagittis sagittis purus id blandit ipsum Pellentesque nec diam nec erat condimentum dapibus Nunc diam augue egestas id egestas ut facilisis nec mi Donec et congue odio nec laoreet est Integer rhoncus varius arcu a fringilla libero laoreet at </BpkText> </BpkBannerAlert> </View> ; }
Props
Property | PropType | Required | Default Value |
---|---|---|---|
message | string | true | - |
type | oneOf(ALERT_TYPES) | true | - |
animateOnEnter | bool | false | false |
animateOnLeave | bool | false | false |
children | node | false | null |
dismissable | bool | false | false |
dismissButtonLabel | string | false | null |
expanded | bool | false | false |
onDismiss | func | false | null |
onToggleExpanded | func | false | null |
show | bool | false | true |
toggleExpandedButtonLabel | string | false | null |
bannerStyle | style | false | null |
Prop Details
bannerStyle
These styles will be applied to the banner alerts outer View
container, but still within it's animation container. This is useful for maintaining smooth animations whilst applying top/bottom margin.