- property 'avatarUrl' renamed to 'avatar' for clarity purpose. You can use a remote file using its URL, like avatar: 'http://urlToYourRemoteImage.extension', or a local file using avatar: require('<path/to/your/local/image.extension>')`

Author: KBLNY

AppTest.js

@@ -78,7 +78,7 @@ class MessageBar extends Component {
     MessageBarManager.showAlert({
       title: "John Doe",
       message: "Hello, how are you?",
-      avatarUrl: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
+      avatar: "https://image.freepik.com/free-icon/super-simple-avatar_318-1018.jpg",
       alertType: 'info',
     });
   }
@@ -88,7 +88,7 @@ class MessageBar extends Component {
     MessageBarManager.showAlert({
       title: "This is an alert with a callback function",
       message: "Tap on the alert to execute the callback you passed in parameter",
-      avatarUrl: "http://www.icon100.com/up/4250/128/83-circle-error.png",
+      avatar: "http://www.icon100.com/up/4250/128/83-circle-error.png",
       alertType: 'error',
       duration: 5000,
       onTapped: this.customCallback.bind(this),
@@ -147,7 +147,7 @@ class MessageBar extends Component {
         //   /* Cusomisation of the alert: Title, Message, Icon URL, Alert Type (error, success, warning, info), Duration for Alert keep shown */
         //   title={this.state.alertTitle} // Title of the alert
         //   message={this.state.alertMessage} // Message of the alert
-        //   avatarUrl={this.state.alertIconUrl} // Avatar/Icon URL of the alert
+        //   avatar={this.state.alertIconUrl} // Avatar/Icon URL of the alert
         //   type={this.state.alertType} // 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'
         //   duration={this.state.alertDuration} // Number of ms the alert is displayed. Default is 3000 ms (3 seconds)
         //

CustomChildComponent.js

@@ -32,7 +32,7 @@ class CustomChildComponent extends Component {
     MessageBarManager.showAlert({
       title: 'Alert triggered from child component',
       message: "You can show an alert which is located on its parent's page. You can then declare only one MessageBar. This is useful to fix absolute position in child component",
-      avatarUrl: null,
+      avatar: null,
       alertType: 'success',
     });
   }

MessageBar.js

@@ -59,7 +59,7 @@ class MessageBar extends Component {
       /* Cusomisation of the alert: Title, Message, Icon URL, Alert alertType (error, success, warning, info), Duration for Alert keep shown */
       title: props.title,
       message: props.message,
-      avatarUrl: props.avatarUrl,
+      avatar: props.avatar,
       alertType: props.alertType || 'info',
       duration: props.duration || 3000,
 
@@ -376,9 +376,9 @@ class MessageBar extends Component {
   }
 
   renderImage() {
-    if (this.state.avatarUrl != null) {
+    if (this.state.avatar != null) {
       return (
-        <Image source={{ uri: this.state.avatarUrl }} style={this.state.avatarStyle} />
+        <Image source={{ uri: this.state.avatar }} style={this.state.avatarStyle} />
       );
     }
   }

README.md

@@ -137,7 +137,7 @@ MessageBarManager.showAlert({
 
   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
+  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,
@@ -195,7 +195,7 @@ Prop                  | Type     | Default              | Description
 --------------------- | -------- | -------------------- | -----------
 title                 | String   |                      | Title of the alert
 message               | String   |                      | Message of the alert
-avatarUrl             | String   |                      | Avatar/Icon URL of the alert
+avatar                | String   |                      | Avatar/Icon source/URL of the alert
 alertType             | 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  
 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-message-bar",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A message bar alert displayed at the top of the screen for react-native",
   "main": "index.js",
   "private": false,