Bug fix

- Change callbacks calls (onHide, onShow, onTapped) from props to state
- Fix a bug that display a blue info alert
- Fix a bug that refresh the image alert after previously shown

- Documentation updated

AppTest.js

@@ -48,10 +48,8 @@ class MessageBar extends Component {
 
     // Simple show the alert with the manager
     MessageBarManager.showAlert({
-      title: "This is a simple alert",
-      alertType: 'success',
-      position: 'bottom',
-      animationType: 'SlideFromLeft'
+      message: "This is a simple alert",
+      alertType: 'success'
     });
   }
 
@@ -61,15 +59,16 @@ class MessageBar extends Component {
     MessageBarManager.showAlert({
       message: "This is a simple alert with a message.",
       alertType: 'extra',
-      animationType: 'SlideFromLeft'
+      animationType: 'SlideFromLeft',
+      position: 'bottom',
     });
   }
 
   showSimpleAlertWithMessage() {
     // Simple show the alert with the manager
     MessageBarManager.showAlert({
       title: "Caution !",
-      message: "This is a simple alert with a title",
+      message: "This is a simple alert with a title and a message",
       alertType: 'warning',
     });
   }
@@ -99,7 +98,7 @@ class MessageBar extends Component {
   showAlertFromThrowError() {
     try {
       // Do something risky
-      throw new Error("This is a custom error message from a throw new Error");
+      throw new Error("This is a custom error message.\rThis message is shown from a throw new Error.\rYou can use this technique to catch any error in try/catch block or in promises.");
     } catch(error) {
       this.handleError(error);
     }
@@ -109,7 +108,7 @@ class MessageBar extends Component {
     MessageBarManager.showAlert({
       title: "Error",
       message: error.message,
-      type: 'error',
+      alertType: 'error',
       messageNumberOfLines: 0,
     });
   }
@@ -141,8 +140,6 @@ class MessageBar extends Component {
     return (
       <View style={styles.container}>
 
-        <MessageBarAlert ref="alert" />
-
       {
         // Otherwise, You can directly declare a MessageBar alert with its properties and display it by using its reference this.refs.alert.showMessageBarAlert()
 
@@ -225,6 +222,7 @@ class MessageBar extends Component {
           <Text style={[styles.button, {backgroundColor: 'darkgray'}]}>Hide Current Alert</Text>
         </TouchableOpacity>
 
+        <MessageBarAlert ref="alert" />
       </View>
     );
   }

MessageBar.js

@@ -205,8 +205,8 @@ class MessageBar extends Component {
     }
 
     // Execute the callback passed in parameter
-    if (this.props.onTapped) {
-      this.props.onTapped();
+    if (this.state.onTapped) {
+      this.state.onTapped();
     }
   }
 
@@ -215,8 +215,8 @@ class MessageBar extends Component {
   * Callback executed when alert is shown
   */
   _onShow() {
-    if (this.props.onShow) {
-      this.props.onShow();
+    if (this.state.onShow) {
+      this.state.onShow();
     }
   }
 
@@ -225,8 +225,8 @@ class MessageBar extends Component {
   * Callback executed when alert is hidden
   */
   _onHide() {
-    if (this.props.onHide) {
-      this.props.onHide();
+    if (this.state.onHide) {
+      this.state.onHide();
     }
   }
 

MessageBarManager.js

@@ -47,6 +47,9 @@ module.exports = {
 		setTimeout(()=>{
 			// Show the new alert if there is a new state, otherwise
 			if (newState != null) {
+		    // Clear current state
+		    this._currentMessageBarAlert.setNewState({});
+
 				this._currentMessageBarAlert.setNewState(newState);
 
 				this._currentMessageBarAlert.notifyAlertHiddenCallback = null;

README.md

@@ -1,7 +1,7 @@
 # react-native-message-bar ![npm version](http://img.shields.io/npm/dm/react-native-message-bar.svg) ![downloads](https://img.shields.io/npm/v/react-native-message-bar.svg) ![license](https://img.shields.io/npm/l/react-native-message-bar.svg)
 A message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects.
 
-![Screenshot](http://s18.postimg.org/fz4t9ifkp/ezgif_942641418.gif)
+![Screenshot](http://s31.postimg.org/cxq6x5srf/Untitled.gif)
 
 
 ## Content
@@ -48,7 +48,8 @@ var MessageBarAlert = require('react-native-message-bar').MessageBar;
 var MessageBarManager = require('react-native-message-bar').MessageBarManager;
 ```
 
-- 2. Add the `MessageBarAlert` to your render method
+- 2. Add the `MessageBarAlert` to your render function
+Note: Add it at the very end of your render function, the alert will then be displayed over any component of the view
 ```javascript
 // Within your render function.
 // Include the MessageBar once within your top View element