Typing indicator ellipses

src/languages/en.js

@@ -160,7 +160,7 @@ export default {
         newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
     },
     reportTypingIndicator: {
-        isTyping: 'is typing...',
+        isTyping: 'is typing',
         areTyping: 'are typing...',
         multipleUsers: 'Multiple users',
     },

src/languages/es.js

@@ -160,7 +160,7 @@ export default {
         newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,
     },
     reportTypingIndicator: {
-        isTyping: 'está escribiendo...',
+        isTyping: 'está escribiendo',
         areTyping: 'están escribiendo...',
         multipleUsers: 'Varios usuarios',
     },

src/pages/home/report/ReportTypingIndicator.js

@@ -5,16 +5,18 @@ import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import compose from '../../../libs/compose';
 import ONYXKEYS from '../../../ONYXKEYS';
-import styles from '../../../styles/styles';
+import styles, {getTypingIndicatorTextStyle} from '../../../styles/styles';
 import {getDisplayName} from '../../../libs/actions/PersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import Text from '../../../components/Text';
 
 const propTypes = {
     /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
     userTypingStatuses: PropTypes.objectOf(PropTypes.bool),
 
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -53,33 +55,25 @@ class ReportTypingIndicator extends React.Component {
                 return <View style={[styles.chatItemComposeSecondaryRow]} />;
             case 1:
                 return (
-                    <View style={[styles.chatItemComposeSecondaryRow]}>
+                    <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow]}>
                         <Text
                             style={[
                                 styles.chatItemComposeSecondaryRowSubText,
                                 styles.chatItemComposeSecondaryRowOffset,
+                                getTypingIndicatorTextStyle(this.props.isSmallScreenWidth),
                             ]}
                             numberOfLines={1}
                         >
                             {getDisplayName(this.state.usersTyping[0])}
-                            {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         </Text>
-                    </View>
-                );
-            case 2:
-                return (
-                    <View style={[styles.chatItemComposeSecondaryRow]}>
                         <Text
                             style={[
                                 styles.chatItemComposeSecondaryRowSubText,
-                                styles.chatItemComposeSecondaryRowOffset,
+                                styles.ml1,
                             ]}
                             numberOfLines={1}
                         >
-                            {getDisplayName(this.state.usersTyping[0])}
-                            {` ${this.props.translate('common.and')} `}
-                            {getDisplayName(this.state.usersTyping[1])}
-                            {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
+                            {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         </Text>
                     </View>
                 );
@@ -108,6 +102,7 @@ ReportTypingIndicator.displayName = 'ReportTypingIndicator';
 
 export default compose(
     withLocalize,
+    withWindowDimensions,
     withOnyx({
         userTypingStatuses: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`,

src/styles/styles.js

@@ -2179,6 +2179,22 @@ const webViewStyles = {
     },
 };
 
+/**
+ * Return typing indicator text style
+ * @param {Boolean} isSmallScreenWidth
+ *
+ * @returns {Object}
+ */
+function getTypingIndicatorTextStyle(isSmallScreenWidth) {
+    return isSmallScreenWidth
+        ? {
+            maxWidth: 200,
+        }
+        : {
+            maxWidth: 500,
+        };
+}
+
 /**
  * Takes safe area insets and returns padding to use for a View
  *
@@ -2461,4 +2477,5 @@ export {
     getModalPaddingStyles,
     getFontFamilyMonospace,
     getEmojiPickerStyle,
+    getTypingIndicatorTextStyle,
 };