A message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects.
- Originally created by KBLNY
- Forked from Talor Anderson
- Features
- Installation
- Basic Usage
- Hide the Message Bar Alert
- Customize Alert Type
- Customize Alert Content
- Customize View Layout
- Customize Position and Animation, Twitter Style!
- Properties
- Contributing
- TODOS
- Apps using this library
- License
- Android and iOS capable
- Animated alert with Title & Message
- Top or Bottom display
- 4 Slides Animation Types (Alert is shown from top, from bottom, from left or from right)
- Auto-hide after x seconds (customizable and/or can be disabled)
- Auto-hide current alert to display a newer one, if context requires to do so
- Close icon
- 2 pre-configured styles, ability to make more
- Customizable texts, styles, durations, positions and animation
- Callbacks on alert show, hide and close icon tap
- Orientation supported
- Children component support Show/Hide alert
Install package from GitHub.
npm install --save valtech-nyc/react-native-message-bar
-
Import the
react-native-message-bar
packageimport { MessageBar, MessageBarManager, alertTypes } from 'react-native-message-bar';
-
Create a
ref
for your MessageBar// Within your constructor this.messageBarRef = React.createRef();
-
Add the
MessageBarAlert
to your render functionNote: Add it at the very end of your render function, the alert will then be displayed over any component of the view
// Within your render function; include the MessageBar once // within your top View element; make sure you add the MessageBar // at the very bottom of your master component so it will be displayed // over all other components <MessageBar ref={this.messageBarRef} />
-
Register and Release your Message Bar as the current main alert
componentDidMount() { // Register the alert located on this master page; // this MessageBar will be accessible from the main component // and its child components; the MessageBar is declared only once MessageBarManager.registerMessageBar(this.messageBarRef.current); } componentWillUnmount() { // Remove the alert located on this master page from the manager MessageBarManager.unregisterMessageBar(); }
-
Display the Message Bar Alert on demand
// Call this method after registering your MessageBar as the current alert // By calling this method the registered alert will be displayed // This is useful to show the alert from your current page or a child component MessageBarManager.showAlert({ title: 'Your alert title goes here', message: 'Your alert message goes here', alertType: alertTypes.warning, // See Properties section for full customization // or check `index.ios.js` or `index.android.js` for a complete example // (though to be honest, those examples may not be working...) });
Please note, if you do not provide a alertType
, the warning
one will be chosen for you.
The normal duration
of the notification is 3 seconds (3000 ms), you can override it.
After this time, the notification will hide.
// You can force the current alert to be hidden through the Manager
MessageBarManager.hideAlert();
The Message Bar Alert comes with 2 pre-configured styles. These alert styles define the background color of the alert and the text color. The 2 pre-configured alert styles are:
warning
error
MessageBarManager.showAlert({
/* ... */
alertType: alertTypes.warning,
/* ... */
});
You can customize the style of the title & message.
MessageBarManager.showAlert({
/* ... */
title: 'John Doe', // Title of the alert
message: 'Hello, any suggestions?', // Message of the alert
/* Number of Lines for Title and Message */
titleNumberOfLines: 1,
messageNumberOfLines: 0, // Unlimited number of lines
/* Style for the text elements */
titleStyle: {{
color: 'white',
fontSize: 18,
fontWeight: 'bold',
}},
messageStyle: {{
color: 'white',
fontSize: 16,
}},
/* ... */
});
You can customize the padding, margin, and text padding of the alert.
MessageBarManager.showAlert({
/* ... */
// Margin of the View, useful if you have a navigation bar
// or if you want the alert be shown below another component
// instead of the top of the screen
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
// Padding of the view, useful if you want to apply
// a padding at your alert content
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
// Padding around the content,
// useful if you want a tiny message bar
textsPaddingTop: 26,
textsPaddingBottom: 26,
textsPaddingLeft: 38,
textsPaddingRight: 38,
/* ... */
});
You can choose the position (top
or bottom
) of the alert.
You can choose the way the alert is shown (SlideFromTop
, SlideFromBottom
, SlideFromLeft
or SlideFromRight
).
import positions from './MessageBar/positions';
import animationTransformTypes from './MessageBar/animationTransformTypes';
MessageBarManager.showAlert({
/* ... */
/* Position of the alert and Animation Type the alert is shown */
position: positions.top,
animationType: animationTransformTypes.slideFromLeft,
/* ... */
});
Prop | Type | Default | Description |
---|---|---|---|
title | String | Title of the alert | |
message | String | Message of the alert | |
alertType | String | warning |
Alert Type: you can select one of 'error' or 'warning', or add your own |
duration | Number | 3000 |
Number of ms the alert is displayed |
shouldHideAfterDelay | Bool | true |
Tell the MessageBar whether or not it should hide after a delay defined in the duration property. If false , the MessageBar remain shown |
onCloseIconTapped | Function | Callback function after close icon is tapped | |
onShow | Function | Callback function after alert is shown | |
onHide | Function | Callback function after alert is hidden | |
durationToShow | Number | 650 |
Duration of the animation to completely show the alert |
durationToHide | Number | 650 |
Duration of the animation to completely hide the alert |
marginTop | Number | 0 |
Top margin |
marginBottom | Number | 0 |
Bottom margin |
marginLeft | Number | 0 |
Left margin |
marginRight | Number | 0 |
Right margin |
paddingTop | Number | 0 |
Top padding |
paddingBottom | Number | 0 |
Bottom padding |
paddingLeft | Number | 0 |
Left padding |
paddingRight | Number | 0 |
Right padding |
textsPaddingTop | Number | 26 |
Top padding of texts |
textsPaddingBottom | Number | 26 |
Bottom padding of texts |
textsPaddingLeft | Number | 38 |
Left padding of texts |
textsPaddingRight | Number | 38 |
Right padding of texts |
titleNumberOfLines | Number | 1 |
Number of lines of the title. 0 means unlimited |
messageNumberOfLines | Number | 2 |
Number of lines of the message. 0 means unlimited |
titleStyle | Style | { fontWeight: 'bold', marginBottom: 12, fontSize: 12, fontFamily: 'Helvetica-Bold', letterSpacing: -0.05, textAlign: 'center', } |
Style of the title |
messageStyle | Style | { fontSize: 12, fontFamily: 'Helvetica-Light', letterSpacing: -0.05, textAlign: 'center', } |
Style of the message |
position | String | top |
Define the position of the alert, can be top or right |
animationType | String | SlideFromTop |
Define the way the alert is animated on the view, can be SlideFromTop , SlideFromBottom , SlideFromLeft or SlideFromRight . If no value is specified, the animation type is selected for you based on the position ; SlideFromTop if position is equal to top , SlideFromBottom if position is equal to bottom . The alert will then be smoothly displayed |
children | Object | null |
Children components to render beneath the message bar content |
- Fork this Repo first
- Clone your Repo
- Install dependencies by $ npm install
- Checkout a feature branch
- Feel free to add your features
- Make sure your features are fully tested
- Publish your local branch & open a pull request
- Enjoy hacking <3
- Add Alert Queuing System
- Add Other Animations Type (Fade-in, Elastic, etc.)
- Add customizable Animation (inject your configuration)
- Anything that can help to improve :) Thanks for contributions
- Your App here...
React-Native-Message-Bar
is released under MIT License. See LICENSE
for details.
Copyright © 2016 KBLNY, 2019 Valtech.
Please provide attribution, it is greatly appreciated.