A message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects.
- Features
- Installation
- Basic Usage
- Hide the Message Bar Alert
- Customize Alert Type
- Customize Alert Content
- Customize View Layout
- Properties
- TODOS
- Animated alert with Title, Message and Icon
- Auto-hide after 3 seconds
- Support hide on tap
- 4 pre-configured customizable styles + 1 extra
- Customizable style and animation
- Callbacks on alert show, hide and tap
- Orientation supported
- Children component support Show/Hide alert
Make sure that you are in your React Native project directory and run:
$ npm install react-native-message-bar --save
-
- Import the
react-native-message-bar
package
- Import the
var MessageBar = require('react-native-message-bar').MessageBar;
var MessageBarManager = require('react-native-message-bar').MessageBarManager;
-
- Add the
MessageBarAlert
to your render method
- Add the
// Within your render function.
// Include the MessageBar once within your top View element
<MessageBarAlert ref="alert"
title="John Doe" // Title of the alert
message="Hello, any suggestions?" // Message of the alert
avatarUrl="<URL of your icon/avatar>" // Avatar/Icon URL of the alert
type="info" // Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). Default is 'info'
/>
-
- Display the Message Bar Alert on demand
// Simple show the alert by its reference
this.refs.alert.showMessageBarAlert();
// OR
// Preferably use this method. In a future release a queuing system will be implemented
MessageBarManager.showAlert(this.refs.alert);
Please note, if you do not provide a type
, the info
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 is going to be hidden
See a full Example in index.ios.js
or index.android.js
.
// Simply hide the alert by its reference
this.refs.alert.hideMessageBarAlert();
// OR
// You can force the current alert to be hidden through the Manager
MessageBarManager.hideAlert();
The Message Bar Alert comes with 4 pre-configured alert style and 1 undefined extra. These alert styles defined the background color of the alert and the line stroke color. The 4 pre-configured alert styles are:
info
defined blue colorssuccess
defined green colorswarning
defined orange colorserror
defined red colors
The extra
alert type allows you to use another 5th type.
<MessageBarAlert ref="alert"
...
type='info' // Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). Default is 'info'
/* Customize the stylesheets and/or provide an additional one 'extra' */
stylesheetInfo = {{ backgroundColor : '#007bff', strokeColor : '#006acd' }} // Default are blue colors
stylesheetSuccess = {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }} // Default are Green colors
stylesheetWarning = {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }} // Default are orange colors
stylesheetError = {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }} // Default are red colors
stylesheetExtra = {{ backgroundColor : 'black', strokeColor : 'gray' }} // Default are blue colors, same as info
...
/>
You can customize the style of the Title, Message and Icon/Avatar.
<MessageBarAlert ref="alert"
...
title="John Doe" // Title of the alert
message="Hello, any suggestions?" // Message of the alert
avatarUrl="<URL of your icon/avatar>" // Avatar/Icon URL of the alert
/* Style for the text elements and the */
titleStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}
messageStyle={{ color: 'white', fontSize: 16 }}
avatarStyle={{ height: 40, width: 40, borderRadius: 20 }}
...
/>
You can customize the inset (padding) and the offset of the alert.
<MessageBarAlert ref="alert"
...
/* Offset 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 */
viewTopOffset = {0} // Default is 0
viewLeftOffset = {0} // Default is 0
viewRightOffset = {0} // Default is 0
/* Inset of the view, useful if you want to apply a padding at your alert content */
viewTopInset = {15} // Default is 0
viewLeftInset = {0} // Default is 0
viewRightInset = {0} // Default is 0
...
/>
Prop | Type | Default | Description |
---|---|---|---|
title | String | Title of the alert | |
message | String | Message of the alert | |
avatarUrl | String | Avatar/Icon URL of the alert | |
type | String | info | Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). |
duration | Number | 3000 | Number of ms the alert is displayed |
onTapped | Function | Callback function after alert is tapped | |
onShow | Function | Callback function after alert is shown | |
onHide | Function | Callback function after alert is hidden | |
stylesheetInfo | Object | { backgroundColor: '#007bff', strokeColor: '#006acd' } | Background color and line stroke colors of the alert when type is equals to info |
stylesheetSuccess | Object | { backgroundColor: 'darkgreen', strokeColor: '#b40000' } | Background color and line stroke colors of the alert when type is equals to success |
stylesheetWarning | Object | { backgroundColor: '#ff9c00', strokeColor: '#f29400' } | Background color and line stroke colors of the alert when type is equals to warning |
stylesheetError | Object | { backgroundColor: '#ff3232', strokeColor: '#FF0000' } | Background color and line stroke colors of the alert when type is equals to error |
stylesheetExtra | Object | { backgroundColor: '#007bff', strokeColor: '#006acd' } | Background color and line stroke colors of the alert when type is equals to extra |
durationToShow | Number | 350 | Duration of the animation to completely show the alert |
durationToHide | Number | 350 | Duration of the animation to completely hide the alert |
viewTopOffset | Number | 0 | Offset of the view from the top. That means the alert touch the top edge of the screen |
viewLeftOffset | Number | 0 | Offset of the view from the left. That means the alert touch the left edge of the screen |
viewRightOffset | Number | 0 | Offset of the view from the right. That means the alert touch the right edge of the screen |
viewTopInset | Number | 0 | Padding Top of the view |
viewLeftInset | Number | 0 | Padding Left of the view |
viewRightInset | Number | 0 | Padding Right of the view |
avatarStyle | Style | { height: 40, width: 40, borderRadius: 20, alignSelf: 'center' } | Style of the icon/avatar |
titleStyle | Style | { color: 'white', fontSize: 18, fontWeight: 'bold' } | Style of the title |
messageStyle | Style | { color: 'white', fontSize: 16 } | Style of the message |
- Add Queue System
- Anything that can help to improve :) Thanks for contributions
MIT Licensed