react-native-gifted-chat 3.1.0 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.1.0",
+  "version": "3.1.3",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/Bubble/index.tsx

@@ -13,7 +13,7 @@ import { MessageVideo } from '../MessageVideo'
 import { IMessage } from '../Models'
 import { QuickReplies } from '../QuickReplies'
 
-import stylesCommon, { getStyleWithPosition } from '../styles'
+import { getStyleWithPosition } from '../styles'
 import { Time } from '../Time'
 
 import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
@@ -237,19 +237,19 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       (currentMessage.sent || currentMessage.received || currentMessage.pending)
     )
       return (
-        <View style={styles.tickView}>
+        <View style={styles.messageStatusContainer}>
           {!!currentMessage.sent && (
-            <Text style={[styles.tick, props.tickStyle]}>
+            <Text style={[styles.messageStatus, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.received && (
-            <Text style={[styles.tick, props.tickStyle]}>
+            <Text style={[styles.messageStatus, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.pending && (
-            <Text style={[styles.tick, props.tickStyle]}>
+            <Text style={[styles.messageStatus, props.tickStyle]}>
               {'🕓'}
             </Text>
           )}
@@ -362,7 +362,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
             ]}
           >
             {renderUsername()}
-            <View style={stylesCommon.fill}>
+            <View style={styles.messageTimeAndStatusContainer}>
               {renderTime()}
               {renderTicks()}
             </View>

package/src/Bubble/styles.ts

@@ -37,14 +37,21 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 3,
   },
 
-  tick: {
-    fontSize: 10,
-    color: Color.white,
+  messageTimeAndStatusContainer: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
-  tickView: {
+
+  messageStatusContainer: {
     flexDirection: 'row',
     marginLeft: 5,
   },
+  messageStatus: {
+    fontSize: 10,
+    color: Color.white,
+  },
 
   usernameContainer: {
     flexDirection: 'row',

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

@@ -97,7 +97,10 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
         <View
           style={
             {
-              "flex": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "justifyContent": "flex-end",
             }
           }
         >

package/src/__tests__/__snapshots__/Message.test.tsx.snap

@@ -120,7 +120,10 @@ exports[`Message component should render <Message /> and compare with snapshot 1
             <View
               style={
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "justifyContent": "flex-end",
                 }
               }
             >
@@ -307,7 +310,10 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
             <View
               style={
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "justifyContent": "flex-end",
                 }
               }
             >
@@ -494,7 +500,10 @@ exports[`Message component should render null if user has no Avatar 1`] = `
             <View
               style={
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "justifyContent": "flex-end",
                 }
               }
             >