fix timeTextStyle

App.js

@@ -45,7 +45,7 @@ export default class App extends Component {
     this._isMounted = true
     // init with only system messages
     this.setState({
-      messages: [], // messagesData.filter(message => message.system),
+      messages: messagesData.filter(message => message.system),
       appIsReady: true,
     })
   }
@@ -91,7 +91,7 @@ export default class App extends Component {
       }
     })
     // for demo purpose
-    // setTimeout(() => this.botSend(step), Math.round(Math.random() * 1000))
+    setTimeout(() => this.botSend(step), Math.round(Math.random() * 1000))
   }
 
   botSend = (step = 0) => {
@@ -252,6 +252,7 @@ export default class App extends Component {
           quickReplyStyle={{ borderRadius: 2 }}
           renderQuickReplySend={this.renderQuickReplySend}
           inverted={false}
+          timeTextStyle={{ left: { color: 'red' }, right: { color: 'yellow' } }}
         />
       </View>
     )

example-expo/data/messages.js

@@ -127,10 +127,10 @@ export default [
       name: 'React Native',
     },
   },
-  {
-    _id: 9,
-    text: 'You are officially rocking GiftedChat.',
-    createdAt: new Date(),
-    system: true,
-  },
+  // {
+  //   _id: 9,
+  //   text: 'You are officially rocking GiftedChat.',
+  //   createdAt: new Date(),
+  //   system: true,
+  // },
 ]

package.json

@@ -76,22 +76,21 @@
     "jest-expo": "^33.0.0",
     "json": "^9.0.6",
     "prettier": "1.18.0",
-    "prop-types": "15.6.2",
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-nav": "2.0.2",
     "react-native-web-maps": "0.2.0",
     "react-test-renderer": "16.5.1",
     "tslint": "5.12.0",
     "tslint-config-prettier": "1.17.0",
-    "typescript": "3.4.5"
-  },
-  "dependencies": {
-    "@expo/react-native-action-sheet": "^2.0.1",
+    "typescript": "3.4.5",
     "expo-constants": "~5.0.1",
     "expo-image-picker": "~5.0.2",
     "expo-location": "~5.0.1",
-    "expo-permissions": "~5.0.1",
+    "expo-permissions": "~5.0.1"
+  },
+  "dependencies": {
+    "@expo/react-native-action-sheet": "^2.0.1",
     "moment": "^2.19.0",
     "prop-types": "15.7.2",
     "react-dom": "16.8.3",

src/Bubble.tsx

@@ -152,9 +152,6 @@ export interface BubbleProps<TMessage extends IMessage> {
   renderUsername?(): React.ReactNode
   renderQuickReplySend?(): React.ReactNode
   renderQuickReplies?(quickReplies: QuickReplies['props']): React.ReactNode
-  // TODO: remove in next major release
-  isSameDay?(currentMessage: TMessage, nextMessage: TMessage): boolean
-  isSameUser?(currentMessage: TMessage, nextMessage: TMessage): boolean
 }
 
 export default class Bubble<

src/Constant.ts

@@ -3,7 +3,7 @@ import { Platform } from 'react-native'
 export const MIN_COMPOSER_HEIGHT = Platform.select({
   ios: 33,
   android: 41,
-  web: 33,
+  web: 34,
 })
 export const MAX_COMPOSER_HEIGHT = 200
 export const DEFAULT_PLACEHOLDER = 'Type a message...'

src/GiftedChat.tsx

@@ -9,6 +9,7 @@ import {
   ViewStyle,
   SafeAreaView,
   FlatList,
+  TextStyle,
 } from 'react-native'
 
 import ActionSheet from '@expo/react-native-action-sheet'
@@ -40,7 +41,7 @@ import {
   TIME_FORMAT,
   DATE_FORMAT,
 } from './Constant'
-import { IMessage, User, Reply } from './types'
+import { IMessage, User, Reply, LeftRightStyle } from './types'
 import QuickReplies from './QuickReplies'
 
 const GiftedActionSheet = ActionSheet as any
@@ -107,6 +108,7 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
   quickReplyStyle?: StyleProp<ViewStyle>
   /* optional prop used to place customView below text, image and video views; default is false */
   isCustomViewBottom?: boolean
+  timeTextStyle?: LeftRightStyle<TextStyle>
   /* Callback when a message avatar is tapped */
   onPressAvatar?(user: User): void
   /* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
@@ -211,7 +213,6 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     onPressAvatar: null,
     renderUsernameOnMessage: false,
     renderAvatarOnTop: false,
-    isCustomViewBottom: false,
     renderBubble: null,
     renderSystemMessage: null,
     onLongPress: null,
@@ -616,6 +617,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
           invertibleScrollViewProps={this.invertibleScrollViewProps}
           messages={this.getMessages()}
           forwardRef={this._messageContainerRef}
+          onQuickReply={this.onQuickReply}
         />
         {this.renderChatFooter()}
       </AnimatedView>
@@ -654,6 +656,13 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     }
   }
 
+  onQuickReply = (replies: Reply[]) => {
+    if (this.props.onQuickReply) {
+      this.props.onQuickReply(replies)
+    }
+    setTimeout(() => this.scrollToBottom(), 100)
+  }
+
   resetInputToolbar() {
     if (this.textInput) {
       this.textInput.clear()

src/MessageContainer.tsx

@@ -17,7 +17,7 @@ import {
 import LoadEarlier from './LoadEarlier'
 import Message from './Message'
 import Color from './Color'
-import { User, IMessage } from './types'
+import { User, IMessage, Reply } from './types'
 import { warning } from './utils'
 
 const styles = StyleSheet.create({
@@ -75,6 +75,7 @@ export interface MessageContainerProps<TMessage extends IMessage> {
   renderLoadEarlier?(props: LoadEarlier['props']): React.ReactNode
   scrollToBottomComponent?(): React.ReactNode
   onLoadEarlier?(): void
+  onQuickReply?(replies: Reply[]): void
 }
 
 interface State {
@@ -91,6 +92,7 @@ export default class MessageContainer<
     renderFooter: null,
     renderMessage: null,
     onLoadEarlier: () => {},
+    onQuickReply: () => {},
     inverted: true,
     loadEarlier: false,
     listViewProps: {},
@@ -227,17 +229,24 @@ export default class MessageContainer<
   }
 
   handleOnScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y: contentOffsetY },
+        contentSize: { height: contentSizeHeight },
+        layoutMeasurement: { height: layoutMeasurementHeight },
+      },
+    } = event
+    const { scrollToBottomOffset } = this.props
     if (this.props.inverted) {
-      if (
-        event.nativeEvent.contentOffset.y > this.props.scrollToBottomOffset!
-      ) {
+      if (contentOffsetY > scrollToBottomOffset!) {
         this.setState({ showScrollBottom: true })
       } else {
         this.setState({ showScrollBottom: false })
       }
     } else {
       if (
-        event.nativeEvent.contentOffset.y < this.props.scrollToBottomOffset!
+        contentOffsetY < scrollToBottomOffset! &&
+        contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
       ) {
         this.setState({ showScrollBottom: true })
       } else {

src/QuickReplies.tsx

@@ -175,32 +175,35 @@ export default class QuickReplies extends Component<
 
     return (
       <View style={styles.container}>
-        {currentMessage!.quickReplies!.values.map((reply: Reply) => {
-          const selected = type === 'checkbox' && replies.find(sameReply(reply))
-          return (
-            <TouchableOpacity
-              onPress={this.handlePress(reply)}
-              style={[
-                styles.quickReply,
-                quickReplyStyle,
-                { borderColor: color },
-                selected && { backgroundColor: color },
-              ]}
-              key={reply.value}
-            >
-              <Text
-                numberOfLines={2}
-                ellipsizeMode={'tail'}
+        {currentMessage!.quickReplies!.values.map(
+          (reply: Reply, index: number) => {
+            const selected =
+              type === 'checkbox' && replies.find(sameReply(reply))
+            return (
+              <TouchableOpacity
+                onPress={this.handlePress(reply)}
                 style={[
-                  styles.quickReplyText,
-                  { color: selected ? Color.white : color },
+                  styles.quickReply,
+                  quickReplyStyle,
+                  { borderColor: color },
+                  selected && { backgroundColor: color },
                 ]}
+                key={`${reply.value}-${index}`}
               >
-                {reply.title}
-              </Text>
-            </TouchableOpacity>
-          )
-        })}
+                <Text
+                  numberOfLines={2}
+                  ellipsizeMode={'tail'}
+                  style={[
+                    styles.quickReplyText,
+                    { color: selected ? Color.white : color },
+                  ]}
+                >
+                  {reply.title}
+                </Text>
+              </TouchableOpacity>
+            )
+          },
+        )}
         {replies.length > 0 && this.renderQuickReplySend()}
       </View>
     )

src/Time.tsx

@@ -52,7 +52,7 @@ export interface TimeProps<TMessage extends IMessage> {
   position: 'left' | 'right'
   currentMessage?: TMessage
   containerStyle?: LeftRightStyle<ViewStyle>
-  textStyle?: LeftRightStyle<TextStyle>
+  timeTextStyle?: LeftRightStyle<TextStyle>
   timeFormat?: string
 }
 
@@ -69,7 +69,6 @@ export default class Time<
       createdAt: null,
     },
     containerStyle: {},
-    textStyle: {},
     timeFormat: TIME_FORMAT,
     timeTextStyle: {},
   }
@@ -81,10 +80,6 @@ export default class Time<
       left: ViewPropTypes.style,
       right: ViewPropTypes.style,
     }),
-    textStyle: PropTypes.shape({
-      left: PropTypes.any,
-      right: PropTypes.any,
-    }),
     timeFormat: PropTypes.string,
     timeTextStyle: PropTypes.shape({
       left: PropTypes.any,
@@ -98,7 +93,7 @@ export default class Time<
       containerStyle,
       currentMessage,
       timeFormat,
-      textStyle,
+      timeTextStyle,
     } = this.props
 
     if (!!currentMessage) {
@@ -113,7 +108,7 @@ export default class Time<
             style={
               [
                 styles[position].text,
-                textStyle && textStyle[position],
+                timeTextStyle && timeTextStyle[position],
               ] as TextStyle
             }
           >

src/__tests__/__snapshots__/Bubble.test.tsx.snap

@@ -38,35 +38,37 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
     >
-      <View
-        style={
-          Array [
-            Object {},
-            undefined,
-          ]
-        }
-      >
-        <Text
+      <View>
+        <View
           style={
             Array [
-              Object {
-                "color": "black",
-                "fontSize": 16,
-                "lineHeight": 20,
-                "marginBottom": 5,
-                "marginLeft": 10,
-                "marginRight": 10,
-                "marginTop": 5,
-              },
-              undefined,
               Object {},
+              undefined,
             ]
           }
         >
-          <Text>
-            test
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "black",
+                  "fontSize": 16,
+                  "lineHeight": 20,
+                  "marginBottom": 5,
+                  "marginLeft": 10,
+                  "marginRight": 10,
+                  "marginTop": 5,
+                },
+                undefined,
+                Object {},
+              ]
+            }
+          >
+            <Text>
+              test
+            </Text>
           </Text>
-        </Text>
+        </View>
       </View>
       <View
         style={