var MessageBarAlert = require('react-native-message-bar').MessageBar; var MessageBarManager = require('react-native-message-bar').MessageBarManager;

// 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, then it will be displayed over all other components <MessageBarAlert ref="alert" />

componentDidMount() {   // Register the alert located on this master page   // This MessageBar will be accessible from the current (same) component, and from its child component   // The MessageBar is then declared only once, in your main component.   MessageBarManager.registerMessageBar(this.refs.alert); }  componentWillUnmount() {   // Remove the alert located on this master page from the manager   MessageBarManager.unregisterMessageBar(); }

// 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: 'success',   // See Properties section for full customization   // Or check `index.ios.js` or `index.android.js` for a complete example });

// You can force the current alert to be hidden through the Manager MessageBarManager.hideAlert();

MessageBarManager.showAlert({   ...    alertType: '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    ... });

MessageBarManager.showAlert({   ...    title: "John Doe", // Title of the alert   message: "Hello, any suggestions?", // Message of the alert   avatar: "<URL/require('<path>') of your icon/avatar>", // Avatar/Icon <URL> of the alert or enter require('LOCALPATH') for local image    /* Number of Lines for Title and Message */   titleNumberOfLines: 1,   messageNumberOfLines: 0, // Unlimited number of lines    /* 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 }},    ... });

MessageBarManager.showAlert({   ...    /* 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    ... });

MessageBarManager.showAlert({   ...    /* Position of the alert and Animation Type the alert is shown */   position: 'bottom',   animationType: 'SlideFromLeft',    ... });