diff --git a/example/data/messages.js b/example/data/messages.js
index 3701474a9..0b26d3b97 100644
--- a/example/data/messages.js
+++ b/example/data/messages.js
@@ -1,13 +1,23 @@
 module.exports = [
+  {
+    _id: 7,
+    text: 'Ok for me',
+    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 50, 0)),
+    user: {
+      _id: 3,
+      name: 'Someone else',
+    },
+  },
   {
     _id: 6,
     text: 'In 10 minutes',
-    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 30, 0)),
+    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 40, 0)),
     user: {
       _id: 1,
       name: 'React Native developer',
     },
-  },  {
+  },
+  {
     _id: 5,
     text: 'Place Gambetta',
     createdAt: new Date(Date.UTC(2016, 5, 11, 17, 30, 0)),
diff --git a/example/react-native-gifted-messenger/src/DefaultStyles.js b/example/react-native-gifted-messenger/src/DefaultStyles.js
index 58dbb32db..998ed964f 100644
--- a/example/react-native-gifted-messenger/src/DefaultStyles.js
+++ b/example/react-native-gifted-messenger/src/DefaultStyles.js
@@ -1,195 +1,3 @@
-import {
-  PixelRatio,
-} from 'react-native';
-
-/*
-** Message styles
-*/
-const messageStyles = {
-  LoadEarlier: {
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: 5,
-      marginBottom: 10,
-    },
-    wrapper: {
-      alignItems: 'center',
-      backgroundColor: '#ccc',
-      borderRadius: 10,
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      paddingBottom: 5,
-    },
-    text: {
-      backgroundColor: 'transparent',
-      color: '#fff',
-      fontSize: 12,
-    },
-  },
-  Message: {
-    left: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-start',
-        marginLeft: 5,
-        marginRight: 0,
-      },
-    },
-    right: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-        marginLeft: 0,
-        marginRight: 5,
-      },
-    },
-  },
-  Day: {
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: 5,
-      marginBottom: 10,
-    },
-    wrapper: {
-      alignItems: 'center',
-      backgroundColor: '#ccc',
-      borderRadius: 10,
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      paddingBottom: 5,
-    },
-    text: {
-      backgroundColor: 'transparent',
-      color: '#fff',
-      fontSize: 12,
-    },
-  },
-  Avatar: {
-    image: {
-      height: 40,
-      width: 40,
-    },
-    left: {
-      container: {
-        marginRight: 5,
-      },
-    },
-    right: {
-      container: {
-        marginLeft: 5,
-      },
-    },
-  },
-  Bubble: {
-    left: {
-      container: {
-        flex: 1,
-        alignItems: 'flex-start',
-      },
-      wrapper: {
-        borderRadius: 10,
-        backgroundColor: '#F1F0F0',
-        marginRight: 60,
-      },
-      containerToNext: {
-        borderBottomLeftRadius: 0,
-      },
-      containerToPrevious: {
-        borderTopLeftRadius: 0,
-      },
-    },
-    right: {
-      container: {
-        flex: 1,
-        alignItems: 'flex-end',
-      },
-      wrapper: {
-        borderRadius: 10,
-        backgroundColor: '#0084FF',
-        marginLeft: 60,
-      },
-      containerToNext: {
-        borderBottomRightRadius: 0,
-      },
-      containerToPrevious: {
-        borderTopRightRadius: 0,
-      },
-    },
-  },
-  BubbleImage: {
-    container: {
-    },
-    image: {
-      width: 150,
-      height: 100,
-      borderRadius: 8,
-      margin: 3,
-      resizeMode: 'cover',
-    },
-  },
-  ParsedText: {
-    left: {
-      container: {
-      },
-      text: {
-        color: 'black',
-        marginTop: 5,
-        marginBottom: 5,
-        marginLeft: 10,
-        marginRight: 10,
-      },
-      link: {
-        color: 'black',
-        textDecorationLine: 'underline',
-      },
-    },
-    right: {
-      container: {
-      },
-      text: {
-        color: 'white',
-        marginTop: 5,
-        marginBottom: 5,
-        marginLeft: 10,
-        marginRight: 10,
-      },
-      link: {
-        color: 'white',
-        textDecorationLine: 'underline',
-      },
-    },
-  },
-  Location: {
-    container: {
-    },
-    mapView: {
-      width: 150,
-      height: 100,
-      borderRadius: 8,
-      margin: 3,
-    },
-  },
-  Time: {
-    container: {
-      marginLeft: 10,
-      marginRight: 10,
-      marginBottom: 5,
-    },
-    text: {
-      fontSize: 11,
-      color: '#fff',
-      backgroundColor: 'transparent',
-      textAlign: 'right',
-    },
-  },
-};
-
 /*
 ** ToolbarInput styles
 */
@@ -201,30 +9,6 @@ const toolbarInputStyles = {
   minComposerHeight: 35,
   maxComposerHeight: 100,
 
-  InputToolbar: {
-    container: {
-      borderTopWidth: 1 / PixelRatio.get(),
-      borderTopColor: '#E6E6E6',
-      backgroundColor: '#FFFFFF',
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-    },
-  },
-  Actions: {
-    container: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: 30,
-      height: 27,
-      marginLeft: 10,
-      marginBottom: 12,
-    },
-    icon: {
-      width: 27,
-      height: 30,
-      tintColor: '#ccc',
-    },
-  },
   Composer: {
     textInput: {
       flex: 1,
@@ -232,24 +16,13 @@ const toolbarInputStyles = {
       fontSize: 17,
     },
   },
-  Send: {
-    container: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      marginBottom: 17,
-    },
-    text: {
-      color: '#6699CC',
-      fontWeight: '600',
-      fontSize: 17,
-    },
-  },
 };
 
 
 /*
 ** Global styles
 */
+// TODO to deprecate?
 const globalStyles = {
   NavBar: {
     statusBar: {
@@ -268,4 +41,4 @@ const globalStyles = {
 };
 
 
-export default Object.assign({}, messageStyles, toolbarInputStyles, globalStyles);
+export default Object.assign({}, toolbarInputStyles, globalStyles);
diff --git a/example/react-native-gifted-messenger/src/components/Actions.js b/example/react-native-gifted-messenger/src/components/Actions.js
index 1ae3bb273..b1def7aaf 100644
--- a/example/react-native-gifted-messenger/src/components/Actions.js
+++ b/example/react-native-gifted-messenger/src/components/Actions.js
@@ -1,10 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import {
   Image,
+  StyleSheet,
   TouchableOpacity,
 } from 'react-native';
 
-class Actions extends Component {
+export default class Actions extends Component {
   constructor(props) {
     super(props);
     this.onActionsPress = this.onActionsPress.bind(this);
@@ -37,7 +38,7 @@ class Actions extends Component {
     }
     return (
       <Image
-        style={this.props.customStyles.Actions.icon}
+        style={[styles.icon, this.props.iconStyle]}
         resizeMode={'contain'}
         source={require('../../assets/paperclip.png')}
       />
@@ -47,7 +48,7 @@ class Actions extends Component {
   render() {
     return (
       <TouchableOpacity
-        style={this.props.customStyles.Actions.container}
+        style={[styles.container, this.props.containerStyle]}
         onPress={this.onActionsPress}
       >
         {this.renderIcon()}
@@ -56,6 +57,22 @@ class Actions extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 30,
+    height: 27,
+    marginLeft: 10,
+    marginBottom: 12,
+  },
+  icon: {
+    width: 27,
+    height: 30,
+    tintColor: '#ccc',
+  },
+});
+
 // required by @exponent/react-native-action-sheet
 Actions.contextTypes = {
   actionSheet: PropTypes.func,
@@ -63,9 +80,8 @@ Actions.contextTypes = {
 
 Actions.defaultProps = {
   onSend: () => {},
-  customStyles: {},
+  containerStyle: {},
+  iconStyle: {},
   options: {},
   icon: null,
 };
-
-export default Actions;
diff --git a/example/react-native-gifted-messenger/src/components/Avatar.js b/example/react-native-gifted-messenger/src/components/Avatar.js
index ac13051bd..4f2593b8c 100644
--- a/example/react-native-gifted-messenger/src/components/Avatar.js
+++ b/example/react-native-gifted-messenger/src/components/Avatar.js
@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
 import {
+  StyleSheet,
   View,
 } from 'react-native';
 
 import GiftedAvatar from 'react-native-gifted-avatar';
 
-class Avatar extends Component {
+export default class Avatar extends Component {
   renderAvatar() {
     if (this.props.renderAvatar) {
       return this.props.renderAvatar(this.props);
     }
     return (
       <GiftedAvatar
-        avatarStyle={this.props.customStyles.Avatar.image}
+        avatarStyle={StyleSheet.flatten([styles[this.props.position].image, this.props.imageStyle[this.props.position]])}
         user={this.props.currentMessage.user}
       />
     );
@@ -20,23 +21,45 @@ class Avatar extends Component {
   render() {
     if (this.props.isSameUser(this.props.currentMessage, this.props.nextMessage) && this.props.isSameDay(this.props.currentMessage, this.props.nextMessage)) {
       return (
-        <View style={this.props.customStyles.Avatar[this.props.position].container}>
+        <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
           <GiftedAvatar
-            avatarStyle={this.props.customStyles.Avatar.image}
+            avatarStyle={StyleSheet.flatten([styles[this.props.position].image, this.props.imageStyle[this.props.position]])}
           />
         </View>
       );
     }
     return (
-      <View style={this.props.customStyles.Avatar[this.props.position].container}>
+      <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
         {this.renderAvatar()}
       </View>
     );
   }
 }
 
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      marginRight: 5,
+    },
+    image: {
+      height: 40,
+      width: 40,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      marginLeft: 5,
+    },
+    image: {
+      height: 40,
+      width: 40,
+    },
+  }),
+};
+
 Avatar.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  imageStyle: {},
   isSameDay: () => {},
   isSameUser: () => {},
   position: null,
@@ -45,5 +68,3 @@ Avatar.defaultProps = {
   },
   nextMessage: {},
 };
-
-export default Avatar;
diff --git a/example/react-native-gifted-messenger/src/components/Bubble.js b/example/react-native-gifted-messenger/src/components/Bubble.js
index 65df606b3..4aa5f4d2e 100644
--- a/example/react-native-gifted-messenger/src/components/Bubble.js
+++ b/example/react-native-gifted-messenger/src/components/Bubble.js
@@ -1,8 +1,9 @@
 import React, { Component, PropTypes } from 'react';
 import {
   Clipboard,
-  View,
+  StyleSheet,
   TouchableWithoutFeedback,
+  View,
 } from 'react-native';
 
 import ParsedText from './ParsedText';
@@ -10,7 +11,7 @@ import BubbleImage from './BubbleImage';
 import Location from './Location';
 import Time from './Time';
 
-class Bubble extends Component {
+export default class Bubble extends Component {
   constructor(props) {
     super(props);
     this.onLongPress = this.onLongPress.bind(this);
@@ -18,14 +19,14 @@ class Bubble extends Component {
 
   handleBubbleToNext() {
     if (this.props.isSameUser(this.props.currentMessage, this.props.nextMessage) && this.props.isSameDay(this.props.currentMessage, this.props.nextMessage)) {
-      return this.props.customStyles.Bubble[this.props.position].containerToNext;
+      return StyleSheet.flatten([styles[this.props.position].containerToNext, this.props.containerToNextStyle[this.props.position]]);
     }
     return null;
   }
 
   handleBubbleToPrevious() {
     if (this.props.isSameUser(this.props.currentMessage, this.props.previousMessage) && this.props.isSameDay(this.props.currentMessage, this.props.previousMessage)) {
-      return this.props.customStyles.Bubble[this.props.position].containerToPrevious;
+      return StyleSheet.flatten([styles[this.props.position].containerToPrevious, this.props.containerToPreviousStyle[this.props.position]]);
     }
     return null;
   }
@@ -100,8 +101,8 @@ class Bubble extends Component {
 
   render() {
     return (
-      <View style={[this.props.customStyles.Bubble[this.props.position].container]}>
-        <View style={[this.props.customStyles.Bubble[this.props.position].wrapper, this.handleBubbleToNext(), this.handleBubbleToPrevious()]}>
+      <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
+        <View style={[styles[this.props.position].wrapper, this.props.wrapperStyle[this.props.position], this.handleBubbleToNext(), this.handleBubbleToPrevious()]}>
           <TouchableWithoutFeedback
             onLongPress={this.onLongPress}
           >
@@ -119,13 +120,54 @@ class Bubble extends Component {
   }
 }
 
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'flex-start',
+    },
+    wrapper: {
+      borderRadius: 10,
+      backgroundColor: '#F1F0F0',
+      marginRight: 60,
+    },
+    containerToNext: {
+      borderBottomLeftRadius: 0,
+    },
+    containerToPrevious: {
+      borderTopLeftRadius: 0,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'flex-end',
+    },
+    wrapper: {
+      borderRadius: 10,
+      backgroundColor: '#0084FF',
+      marginLeft: 60,
+    },
+    containerToNext: {
+      borderBottomRightRadius: 0,
+    },
+    containerToPrevious: {
+      borderTopRightRadius: 0,
+    },
+  }),
+};
+
 // required by @exponent/react-native-action-sheet
 Bubble.contextTypes = {
   actionSheet: PropTypes.func,
 };
 
 Bubble.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  wrapperStyle: {},
+  containerToNextStyle: {},
+  containerToPreviousStyle: {},
+
   renderBubbleImage: null,
   renderParsedText: null,
   renderCustomView: null,
@@ -143,5 +185,3 @@ Bubble.defaultProps = {
   nextMessage: {},
   previousMessage: {},
 };
-
-export default Bubble;
diff --git a/example/react-native-gifted-messenger/src/components/BubbleImage.js b/example/react-native-gifted-messenger/src/components/BubbleImage.js
index 3869b8b8c..742dd2c6a 100644
--- a/example/react-native-gifted-messenger/src/components/BubbleImage.js
+++ b/example/react-native-gifted-messenger/src/components/BubbleImage.js
@@ -1,15 +1,16 @@
 import React, { Component } from 'react';
 import {
   Image,
+  StyleSheet,
   View,
 } from 'react-native';
 
-class BubbleImage extends Component {
+export default class BubbleImage extends Component {
   render() {
     return (
-      <View style={this.props.customStyles.BubbleImage.container}>
+      <View style={[styles.container, this.props.containerStyle]}>
         <Image
-          style={this.props.customStyles.BubbleImage.image}
+          style={[styles.image, this.props.imageStyle]}
           source={{uri: this.props.currentMessage.image}}
         />
       </View>
@@ -17,11 +18,22 @@ class BubbleImage extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+  },
+  image: {
+    width: 150,
+    height: 100,
+    borderRadius: 8,
+    margin: 3,
+    resizeMode: 'cover',
+  },
+});
+
 BubbleImage.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  imageStyle: {},
   currentMessage: {
     image: null,
   },
 };
-
-export default BubbleImage;
diff --git a/example/react-native-gifted-messenger/src/components/Day.js b/example/react-native-gifted-messenger/src/components/Day.js
index f46101d0e..6af499621 100644
--- a/example/react-native-gifted-messenger/src/components/Day.js
+++ b/example/react-native-gifted-messenger/src/components/Day.js
@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
 import {
-  View,
+  StyleSheet,
   Text,
+  View,
 } from 'react-native';
 
 import moment from 'moment/min/moment-with-locales.min';
 
-class Day extends Component {
+export default class Day extends Component {
   render() {
     if (!this.props.isSameDay(this.props.currentMessage, this.props.previousMessage)) {
       return (
-        <View style={this.props.customStyles.Day.container}>
-          <View style={this.props.customStyles.Day.wrapper}>
-            <Text style={this.props.customStyles.Day.text}>
+        <View style={[styles.container, this.props.containerStyle]}>
+          <View style={[styles.wrapper, this.props.wrapperStyle]}>
+            <Text style={[styles.text, this.props.textStyle]}>
               {moment(this.props.currentMessage.createdAt).locale(this.props.locale).format('LL')}
             </Text>
           </View>
@@ -23,9 +24,34 @@ class Day extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    alignItems: 'center',
+    backgroundColor: '#ccc',
+    borderRadius: 10,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+  text: {
+    backgroundColor: 'transparent',
+    color: '#fff',
+    fontSize: 12,
+  },
+});
+
 Day.defaultProps = {
   locale: 'en',
-  customStyles: {},
+  containerStyle: {},
+  wrapperStyle: {},
+  textStyle: {},
   isSameDay: () => {},
   currentMessage: {
     // TODO test if crash when createdAt === null
@@ -33,5 +59,3 @@ Day.defaultProps = {
   },
   previousMessage: {},
 };
-
-export default Day;
diff --git a/example/react-native-gifted-messenger/src/components/InputToolbar.js b/example/react-native-gifted-messenger/src/components/InputToolbar.js
index 308321dd9..bbef4e5fb 100644
--- a/example/react-native-gifted-messenger/src/components/InputToolbar.js
+++ b/example/react-native-gifted-messenger/src/components/InputToolbar.js
@@ -1,13 +1,14 @@
 import React, { Component, PropTypes } from 'react';
 import {
+  PixelRatio,
+  StyleSheet,
   View,
 } from 'react-native';
 
 import Composer from './Composer';
 import Send from './Send';
 
-class InputToolbar extends Component {
-
+export default class InputToolbar extends Component {
   renderActions() {
     if (this.props.renderActions) {
       return this.props.renderActions(this.props);
@@ -36,7 +37,7 @@ class InputToolbar extends Component {
 
   render() {
     return (
-      <View style={this.props.customStyles.InputToolbar.container}>
+      <View style={[styles.container, this.props.containerStyle]}>
         {this.renderActions()}
         {this.renderComposer()}
         {this.renderSend()}
@@ -45,11 +46,19 @@ class InputToolbar extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: 1 / PixelRatio.get(),
+    borderTopColor: '#E6E6E6',
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+});
+
 InputToolbar.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
   renderActions: null,
   renderSend: null,
   renderComposer: null,
 };
-
-export default InputToolbar;
diff --git a/example/react-native-gifted-messenger/src/components/LoadEarlier.js b/example/react-native-gifted-messenger/src/components/LoadEarlier.js
index 69a8b92db..f078908bc 100644
--- a/example/react-native-gifted-messenger/src/components/LoadEarlier.js
+++ b/example/react-native-gifted-messenger/src/components/LoadEarlier.js
@@ -1,19 +1,20 @@
 import React, { Component } from 'react';
 import {
+  StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
 
-class LoadEarlier extends Component {
+export default class LoadEarlier extends Component {
   render() {
     return (
       <TouchableOpacity
-        style={this.props.customStyles.LoadEarlier.container}
+        style={[styles.container, this.props.containerStyle]}
         onPress={this.props.onLoadEarlier}
       >
-        <View style={this.props.customStyles.LoadEarlier.wrapper}>
-          <Text style={this.props.customStyles.LoadEarlier.text}>
+        <View style={[styles.wrapper, this.props.wrapperStyle]}>
+          <Text style={[styles.text, this.props.textStyle]}>
             Load earlier messages
           </Text>
         </View>
@@ -22,10 +23,32 @@ class LoadEarlier extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    alignItems: 'center',
+    backgroundColor: '#ccc',
+    borderRadius: 10,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+  text: {
+    backgroundColor: 'transparent',
+    color: '#fff',
+    fontSize: 12,
+  },
+});
+
 LoadEarlier.defaultProps = {
-  customStyles: {},
-  // should be set in GiftedMessenger root component :
-  onLoadEarlier: () => {},
+  containerStyle: {},
+  wrapperStyle: {},
+  textStyle: {},
+  onLoadEarlier: () => {}, // should be set in GiftedMessenger root component
 };
-
-export default LoadEarlier;
diff --git a/example/react-native-gifted-messenger/src/components/Location.js b/example/react-native-gifted-messenger/src/components/Location.js
index 6bad1eab3..a1518189c 100644
--- a/example/react-native-gifted-messenger/src/components/Location.js
+++ b/example/react-native-gifted-messenger/src/components/Location.js
@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
 import {
+  Linking,
   MapView,
+  StyleSheet,
   TouchableOpacity,
-  Linking,
 } from 'react-native';
 
-class Location extends Component {
+export default class Location extends Component {
   render() {
     return (
-      <TouchableOpacity style={this.props.customStyles.Location.container} onPress={() => {
+      <TouchableOpacity style={[styles.container, this.props.containerStyle]} onPress={() => {
         // TODO test android
         // TODO implement google map url
         const url = `http://maps.apple.com/?ll=${this.props.currentMessage.location.latitude},${this.props.currentMessage.location.longitude}`;
@@ -21,7 +22,7 @@ class Location extends Component {
         });
       }}>
         <MapView
-          style={this.props.customStyles.Location.mapView}
+          style={[styles.mapView, this.props.mapViewStyle]}
           region={{
             latitude: this.props.currentMessage.location.latitude,
             longitude: this.props.currentMessage.location.longitude,
@@ -38,8 +39,20 @@ class Location extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+  },
+  mapView: {
+    width: 150,
+    height: 100,
+    borderRadius: 8,
+    margin: 3,
+  },
+});
+
 Location.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  mapViewStyle: {},
   currentMessage: {
     location: {
       latitude: 0,
@@ -47,5 +60,3 @@ Location.defaultProps = {
     },
   }
 };
-
-export default Location;
diff --git a/example/react-native-gifted-messenger/src/components/Message.js b/example/react-native-gifted-messenger/src/components/Message.js
index 49a32c8a7..f6b3673a9 100644
--- a/example/react-native-gifted-messenger/src/components/Message.js
+++ b/example/react-native-gifted-messenger/src/components/Message.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import {
   View,
+  StyleSheet,
 } from 'react-native';
 
 import moment from 'moment';
@@ -9,7 +10,7 @@ import Avatar from './Avatar';
 import Bubble from './Bubble';
 import Day from './Day';
 
-class Message extends Component {
+export default class Message extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     // not implemented yet
     // if (this.props.currentMessage.status !== nextProps.currentMessage.status) {
@@ -90,9 +91,9 @@ class Message extends Component {
     return (
       <View>
         {this.renderDay()}
-        <View style={[this.props.customStyles.Message[this.props.position].container, {
+        <View style={[styles[this.props.position].container, {
           marginBottom: this.isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10,
-        }]}>
+        }, this.props.containerStyle[this.props.position]]}>
           {this.props.position === 'left' ? this.renderAvatar() : null}
           {this.renderBubble()}
           {this.props.position === 'right' ? this.renderAvatar() : null}
@@ -102,8 +103,29 @@ class Message extends Component {
   }
 }
 
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start',
+      marginLeft: 5,
+      marginRight: 0,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      marginLeft: 0,
+      marginRight: 5,
+    },
+  }),
+};
+
 Message.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
   renderAvatar: null,
   renderBubble: null,
   renderDay: null,
@@ -113,5 +135,3 @@ Message.defaultProps = {
   previousMessage: {},
   user: {},
 };
-
-export default Message;
diff --git a/example/react-native-gifted-messenger/src/components/MessageContainer.js b/example/react-native-gifted-messenger/src/components/MessageContainer.js
index dffa9617d..4e1cd7a38 100644
--- a/example/react-native-gifted-messenger/src/components/MessageContainer.js
+++ b/example/react-native-gifted-messenger/src/components/MessageContainer.js
@@ -8,12 +8,12 @@ import InvertibleScrollView from 'react-native-invertible-scroll-view';
 import LoadEarlier from './LoadEarlier';
 import Message from './Message';
 
-class MessageContainer extends Component {
+export default class MessageContainer extends Component {
   constructor(props) {
     super(props);
     this.onLoadEarlier = this.onLoadEarlier.bind(this);
   }
-  
+
   shouldComponentUpdate(nextProps, nextState) {
     if (this.props.messagesHash === nextProps.messagesHash) {
       return false;
@@ -60,6 +60,7 @@ class MessageContainer extends Component {
           }
           if (!message.user) {
             console.warn('GiftedMessenger: `user` is missing for message', JSON.stringify(message));
+            message.user = {};
           }
 
           const messageProps = {
@@ -84,10 +85,7 @@ class MessageContainer extends Component {
 
 MessageContainer.defaultProps = {
   locale: 'en',
-  customStyles: {},
   messages: [],
   user: {},
   renderMessage: null,
 };
-
-export default MessageContainer;
diff --git a/example/react-native-gifted-messenger/src/components/ParsedText.js b/example/react-native-gifted-messenger/src/components/ParsedText.js
index 210ea58f1..4fac2c096 100644
--- a/example/react-native-gifted-messenger/src/components/ParsedText.js
+++ b/example/react-native-gifted-messenger/src/components/ParsedText.js
@@ -1,13 +1,14 @@
 import React, { Component, PropTypes } from 'react';
 import {
   Linking,
+  StyleSheet,
   View,
 } from 'react-native';
 
 import RNParsedText from 'react-native-parsed-text';
 import Communications from 'react-native-communications';
 
-class ParsedText extends Component {
+export default class ParsedText extends Component {
   constructor(props) {
     super(props);
     this.onUrlPress = this.onUrlPress.bind(this);
@@ -48,13 +49,13 @@ class ParsedText extends Component {
 
   render() {
     return (
-      <View style={this.props.customStyles.ParsedText[this.props.position].container}>
+      <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
         <RNParsedText
-          style={this.props.customStyles.ParsedText[this.props.position].text}
+          style={[styles[this.props.position].text, this.props.textStyle[this.props.position]]}
           parse={[
-            {type: 'url', style: this.props.customStyles.ParsedText[this.props.position].link, onPress: this.onUrlPress},
-            {type: 'phone', style: this.props.customStyles.ParsedText[this.props.position].link, onPress: this.onPhonePress},
-            {type: 'email', style: this.props.customStyles.ParsedText[this.props.position].link, onPress: this.onEmailPress},
+            {type: 'url', style: StyleSheet.flatten([styles[this.props.position].link, this.props.linkStyle[this.props.position]]), onPress: this.onUrlPress},
+            {type: 'phone', style: StyleSheet.flatten([styles[this.props.position].link, this.props.linkStyle[this.props.position]]), onPress: this.onPhonePress},
+            {type: 'email', style: StyleSheet.flatten([styles[this.props.position].link, this.props.linkStyle[this.props.position]]), onPress: this.onEmailPress},
           ]}
         >
           {this.props.currentMessage.text}
@@ -64,16 +65,49 @@ class ParsedText extends Component {
   }
 }
 
+const styles = {
+  left: StyleSheet.create({
+    container: {
+    },
+    text: {
+      color: 'black',
+      marginTop: 5,
+      marginBottom: 5,
+      marginLeft: 10,
+      marginRight: 10,
+    },
+    link: {
+      color: 'black',
+      textDecorationLine: 'underline',
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+    },
+    text: {
+      color: 'white',
+      marginTop: 5,
+      marginBottom: 5,
+      marginLeft: 10,
+      marginRight: 10,
+    },
+    link: {
+      color: 'white',
+      textDecorationLine: 'underline',
+    },
+  }),
+};
+
 // required by @exponent/react-native-action-sheet
 ParsedText.contextTypes = {
   actionSheet: PropTypes.func,
 };
 
 ParsedText.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  textStyle: {},
+  linkStyle: {},
   currentMessage: {
     text: '',
   },
 };
-
-export default ParsedText;
diff --git a/example/react-native-gifted-messenger/src/components/Send.js b/example/react-native-gifted-messenger/src/components/Send.js
index d739fb02e..748ce2820 100644
--- a/example/react-native-gifted-messenger/src/components/Send.js
+++ b/example/react-native-gifted-messenger/src/components/Send.js
@@ -1,31 +1,44 @@
 import React, { Component } from 'react';
 import {
+  StyleSheet,
   Text,
   TouchableOpacity,
 } from 'react-native';
 
-class Send extends Component {
+export default class Send extends Component {
   render() {
     return (
       <TouchableOpacity
-        style={this.props.customStyles.Send.container}
+        style={[styles.container, this.props.containerStyle]}
         onPress={() => {
           this.props.onSend({text: this.props.text.trim()}, true);
         }}
         disabled={this.props.text.trim().length > 0 ? false : true}
       >
-        <Text style={[this.props.customStyles.Send.text, {
+        <Text style={[styles.text, {
           opacity: (this.props.text.trim().length > 0 ? 1 : 0.5),
-        }]}>Send</Text>
+        }, this.props.textStyle]}>Send</Text>
       </TouchableOpacity>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    paddingLeft: 10,
+    paddingRight: 10,
+    marginBottom: 17,
+  },
+  text: {
+    color: '#6699CC',
+    fontWeight: '600',
+    fontSize: 17,
+  },
+});
+
 Send.defaultProps = {
-  customStyles: {},
+  containerStyle: {},
+  textStyle: {},
   text: '',
   onSend: () => {},
 };
-
-export default Send;
diff --git a/example/react-native-gifted-messenger/src/components/Time.js b/example/react-native-gifted-messenger/src/components/Time.js
index 0a5451798..11af87771 100644
--- a/example/react-native-gifted-messenger/src/components/Time.js
+++ b/example/react-native-gifted-messenger/src/components/Time.js
@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
 import {
-  View,
+  StyleSheet,
   Text,
+  View,
 } from 'react-native';
 
 import moment from 'moment/min/moment-with-locales.min';
 
-class Time extends Component {
+export default class Time extends Component {
   render() {
     return (
-      <View style={this.props.customStyles.Time.container}>
-        <Text style={this.props.customStyles.Time.text}>
+      <View style={[styles.container, this.props.containerStyle]}>
+        <Text style={[styles.text, this.props.textStyle]}>
           {moment(this.props.currentMessage.createdAt).locale(this.props.locale).format('LT')}
         </Text>
       </View>
@@ -18,12 +19,25 @@ class Time extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 10,
+    marginRight: 10,
+    marginBottom: 5,
+  },
+  text: {
+    fontSize: 11,
+    color: '#fff',
+    backgroundColor: 'transparent',
+    textAlign: 'right',
+  },
+});
+
 Time.defaultProps = {
   locale: 'en',
-  customStyles: {},
+  containerStyle: {},
+  textStyle: {},
   currentMessage: {
     createdAt: null,
   },
 };
-
-export default Time;