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',
                      titleColor: '#ffffff', messageColor: '#ffffff' }}, // Default are blue colors with white title and message
  stylesheetSuccess : {{ backgroundColor : 'darkgreen', strokeColor : '#b40000',
                         titleColor: '#ffffff', messageColor: '#ffffff' }}, // Default are Green colors with white title and message
  stylesheetWarning : {{ backgroundColor : '#ff9c00', strokeColor : '#f29400',
                         titleColor: '#ffffff', messageColor: '#ffffff' }}, // Default are orange colors with white title and message
  stylesheetError : {{ backgroundColor : '#ff3232', strokeColor : '#FF0000',
                         titleColor: '#ffffff', messageColor: '#ffffff' }}, // Default are red colors with white title and message
  stylesheetExtra : {{ backgroundColor : 'black', strokeColor : 'gray',
                         titleColor: '#ffffff', messageColor: '#ffffff' }}, // Default are blue colors with white title and message, 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',

  ...
});

<MessageBarAlert
  ref="alert"
  titleStyle={{
    fontSize: 36,
    fontWeight: 'bold'
  }}
  messageStyle={{
    fontSize: 28
  }}
  duration={6000}
  viewTopOffset={10}
  stylesheetSuccess={{
    backgroundColor: '#52d80f',
    strokeColor: '#43c90e',
    titleColor: '#ffffff',
    messageColor: '#ffffff'
  }}
/>