From ea24d88031ce73e8203fc00133fac25676b1e5fb Mon Sep 17 00:00:00 2001 From: Farid from Safi Date: Sun, 17 Jul 2016 21:11:21 +0200 Subject: [PATCH] revamp styles --- example/data/messages.js | 14 +- .../src/DefaultStyles.js | 231 +----------------- .../src/components/Actions.js | 28 ++- .../src/components/Avatar.js | 37 ++- .../src/components/Bubble.js | 58 ++++- .../src/components/BubbleImage.js | 24 +- .../src/components/Day.js | 40 ++- .../src/components/InputToolbar.js | 21 +- .../src/components/LoadEarlier.js | 41 +++- .../src/components/Location.js | 25 +- .../src/components/Message.js | 32 ++- .../src/components/MessageContainer.js | 8 +- .../src/components/ParsedText.js | 52 +++- .../src/components/Send.js | 27 +- .../src/components/Time.js | 28 ++- 15 files changed, 342 insertions(+), 324 deletions(-) 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 ( @@ -47,7 +48,7 @@ class Actions extends Component { render() { return ( {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 ( ); @@ -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 ( - + ); } return ( - + {this.renderAvatar()} ); } } +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 ( - - + + @@ -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 ( - + @@ -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 ( - - - + + + {moment(this.props.currentMessage.createdAt).locale(this.props.locale).format('LL')} @@ -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 ( - + {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 ( - - + + Load earlier messages @@ -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 ( - { + { // 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 { }); }}> {this.renderDay()} - + }, 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 ( - + {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 ( { this.props.onSend({text: this.props.text.trim()}, true); }} disabled={this.props.text.trim().length > 0 ? false : true} > - 0 ? 1 : 0.5), - }]}>Send + }, this.props.textStyle]}>Send ); } } +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 ( - - + + {moment(this.props.currentMessage.createdAt).locale(this.props.locale).format('LT')} @@ -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;