Fix: Tooltip and message date position

src/components/DisplayNames/index.js

@@ -95,7 +95,7 @@ class DisplayNames extends PureComponent {
                             <Tooltip
                                 key={index}
                                 text={tooltip}
-                                containerStyle={styles.dInline}
+                                containerStyles={[styles.dInline]}
                                 shiftHorizontal={() => this.getTooltipShiftX(index)}
                             >
                                 {/*  // We need to get the refs to all the names which will be used to correct

src/components/Hoverable/HoverablePropTypes.js

@@ -9,7 +9,7 @@ const propTypes = {
 
     /** Styles to be assigned to the Hoverable Container */
     // eslint-disable-next-line react/forbid-prop-types
-    containerStyle: PropTypes.object,
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Function that executes when the mouse moves over the children. */
     onHoverIn: PropTypes.func,
@@ -22,7 +22,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    containerStyle: {},
+    containerStyles: [],
     onHoverIn: () => {},
     onHoverOut: () => {},
     resetsOnClickOutside: false,

src/components/Hoverable/index.js

@@ -80,7 +80,7 @@ class Hoverable extends Component {
     render() {
         return (
             <View
-                style={this.props.containerStyle}
+                style={this.props.containerStyles}
                 ref={el => this.wrapperView = el}
                 onMouseEnter={() => this.setIsHovered(true)}
                 onMouseLeave={() => this.setIsHovered(false)}

src/components/Tooltip/TooltipPropTypes.js

@@ -6,7 +6,7 @@ const propTypes = {
     text: PropTypes.string.isRequired,
 
     /** Styles to be assigned to the Tooltip wrapper views */
-    containerStyle: PropTypes.object,
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Children to wrap with Tooltip. */
     children: PropTypes.node.isRequired,
@@ -26,6 +26,7 @@ const propTypes = {
 const defaultProps = {
     shiftHorizontal: 0,
     shiftVertical: 0,
+    containerStyles: [],
 };
 
 export {

src/components/Tooltip/index.js

@@ -175,13 +175,13 @@ class Tooltip extends PureComponent {
                 />
                 )}
                 <Hoverable
-                    containerStyle={this.props.containerStyle}
+                    containerStyles={this.props.containerStyles}
                     onHoverIn={this.showTooltip}
                     onHoverOut={this.hideTooltip}
                 >
                     <View
                         ref={el => this.wrapperView = el}
-                        style={this.props.containerStyle}
+                        style={this.props.containerStyles}
                     >
                         {this.props.children}
                     </View>

src/components/Tooltip/index.native.js

@@ -1,18 +1,35 @@
+import React from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 
 // We can't use the common component for the Tooltip as Web implementation uses DOM specific method to
 // render the View which is not present on the Mobile.
 const propTypes = {
-    children: PropTypes.element,
+    /** Styles to be assigned to the Tooltip wrapper views */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Children to wrap with Tooltip. */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    containerStyles: [],
 };
 
 /**
- * There is no native support for the Hover on the Mobile platform so we just return the enclosing childrens
+ * There is no native support for the Hover on the Mobile platform, but as we use the Tooltip as a
+ * container we must past pass that containerStyle to a simple View in order to avoid different
+ * styles across platforms.
  * @param {propTypes} props
  * @returns {ReactNodeLike}
  */
-const Tooltip = props => props.children;
+const Tooltip = props => (
+    <View style={props.containerStyles}>
+        {props.children}
+    </View>
+);
 
 Tooltip.propTypes = propTypes;
+Tooltip.defaultProps = defaultProps;
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

src/pages/home/report/ReportActionItemFragment.js

@@ -83,7 +83,7 @@ class ReportActionItemFragment extends React.PureComponent {
                     );
             case 'TEXT':
                 return (
-                    <Tooltip text={tooltipText} containerStyle={styles.w100}>
+                    <Tooltip text={tooltipText} containerStyles={[styles.flexShrink1]}>
                         <Text
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}

src/styles/styles.js

@@ -875,7 +875,7 @@ const styles = {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'row',
-        flexWrap: 'wrap',
+        flexWrap: 'nowrap',
     },
 
     chatItemMessageHeaderSender: {
@@ -890,6 +890,7 @@ const styles = {
     },
 
     chatItemMessageHeaderTimestamp: {
+        flexShrink: 0,
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeSmall,
         height: 24,

src/styles/utilities/flex.js

@@ -87,4 +87,8 @@ export default {
     flexGrow4: {
         flexGrow: 4,
     },
+
+    flexShrink1: {
+        flexShrink: 1,
+    },
 };