Next Release

.github/ISSUE_TEMPLATE/bug_report.md

@@ -33,7 +33,6 @@ Your co-operation is really-really appreciated in this manner. Thanks and happy
 
 Describe your issue here
 
----
 
 ### Steps to reproduce
 Steps to reproduce the behavior:
@@ -44,14 +43,10 @@ Steps to reproduce the behavior:
 4. See error
    etc...
 
----
-
-
 ### Expected behavior
 
 <!-- A clear and concise description of what you expected to happen. -->
 
----
 
 ## Project Related Information
 
@@ -76,17 +71,13 @@ Steps to reproduce the behavior:
 </p>
 </details>
 
----
-
 ### Offline support
 
 <!--- Mark any options that apply below -->
 
 - [ ] I have enabled offline support.
 - [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)
 
----
-
 ## Environment
 
 <details><summary>Click To Expand</summary>
@@ -130,15 +121,10 @@ Steps to reproduce the behavior:
 <!-- For bonus points, if you put a 🔥 (:fire:) emojii at the start of the issue title we'll know -->
 <!-- that you took the time to fill this out correctly, or, at least read this far -->
 
----
-
-
 ### Additional context
 
 <!-- Add any other context about the problem here. -->
 
----
-
 ### Screenshots
 
 <details><summary>Click To Expand</summary>

examples/TypeScriptMessaging/ios/TypeScriptMessaging.xcodeproj/project.pbxproj

@@ -500,8 +500,12 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TypeScriptMessaging;
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = YES;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -526,7 +530,11 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TypeScriptMessaging;
+				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
+				SUPPORTS_MACCATALYST = NO;
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = YES;
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

package/package.json

@@ -72,7 +72,7 @@
     "dayjs": "1.10.5",
     "file-loader": "6.2.0",
     "i18next": "20.2.4",
-    "linkify-it": "^4.0.1",
+    "linkifyjs": "^4.1.1",
     "lodash-es": "4.17.21",
     "metro-react-native-babel-preset": "0.66.2",
     "mime-types": "^2.1.34",

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -61,8 +61,11 @@ const getMentionUsers = <
       }
       return acc;
     }, '');
-    return mentionUserString;
+
+    // escape special characters
+    return mentionUserString.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
+
   return '';
 };
 

package/src/components/Message/MessageSimple/MessageReplies.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorValue, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ColorValue, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -28,15 +28,9 @@ const styles = StyleSheet.create({
   },
   leftMessageRepliesCurve: {
     borderBottomLeftRadius: 16,
-    borderRightColor: 'transparent',
-    ...Platform.select({
-      android: {
-        borderRightWidth: 0,
-      },
-    }),
+    borderRightWidth: 0,
   },
   messageRepliesCurve: {
-    borderTopColor: 'transparent',
     borderTopWidth: 0,
     borderWidth: 1,
     height: 16,
@@ -46,16 +40,11 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
     paddingBottom: 5,
-    paddingLeft: 8,
+    paddingHorizontal: 8,
   },
   rightMessageRepliesCurve: {
     borderBottomRightRadius: 16,
-    borderLeftColor: 'transparent',
-    ...Platform.select({
-      android: {
-        borderLeftWidth: 0,
-      },
-    }),
+    borderLeftWidth: 0,
   },
 });
 
@@ -112,7 +101,7 @@ const MessageRepliesWithContext = <
   return (
     <View style={styles.curveContainer}>
       {alignment === 'left' && (
-        <View testID='message-replies-left'>
+        <View style={styles.curveContainer} testID='message-replies-left'>
           {!noBorder && (
             <View
               style={[
@@ -166,7 +155,7 @@ const MessageRepliesWithContext = <
         </Text>
       </TouchableOpacity>
       {alignment === 'right' && (
-        <View testID='message-replies-right'>
+        <View style={styles.curveContainer} testID='message-replies-right'>
           <MessageRepliesAvatars alignment={alignment} message={message} />
           {!noBorder && (
             <View

package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx

@@ -54,7 +54,7 @@ export const MessageRepliesAvatarsWithContext = <
     <View
       style={[
         styles.avatarContainer,
-        alignment === 'right' ? { marginLeft: 8, ...rightAvatarsContainer } : leftAvatarsContainer,
+        alignment === 'right' ? rightAvatarsContainer : leftAvatarsContainer,
       ]}
     >
       {avatars.map((user, i) => (

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -147,7 +147,7 @@ const ReactionListWithContext = <
   }
 
   const alignmentLeft = alignment === 'left';
-  const fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;
+  const fill = propFill || (alignmentLeft ? grey_gainsboro : grey_whisper);
   const radius = propRadius || themeRadius;
   const reactionSize = propReactionSize || themeReactionSize;
   const highlighted = message.pinned || targetedMessage === message.id;
@@ -178,6 +178,7 @@ const ReactionListWithContext = <
 
   return (
     <View
+      pointerEvents='box-none'
       style={[
         styles.container,
         {
@@ -189,8 +190,8 @@ const ReactionListWithContext = <
       testID='reaction-list'
     >
       {reactions.length ? (
-        <View style={[StyleSheet.absoluteFill]}>
-          <Svg>
+        <View pointerEvents='box-none' style={[StyleSheet.absoluteFill]}>
+          <Svg pointerEvents='none'>
             <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />
             <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />
             <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />
@@ -213,7 +214,7 @@ const ReactionListWithContext = <
               reactionBubbleBackground,
             ]}
           />
-          <View style={[StyleSheet.absoluteFill]}>
+          <View pointerEvents='none' style={[StyleSheet.absoluteFill]}>
             <Svg>
               <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
             </Svg>

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageReplies.test.js.snap

@@ -9,6 +9,11 @@ exports[`MessageReplies should render message replies 1`] = `
   }
 >
   <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
     testID="message-replies-left"
   >
     <View
@@ -18,15 +23,14 @@ exports[`MessageReplies should render message replies 1`] = `
             "borderColor": undefined,
           },
           Object {
-            "borderTopColor": "transparent",
             "borderTopWidth": 0,
             "borderWidth": 1,
             "height": 16,
             "width": 16,
           },
           Object {
             "borderBottomLeftRadius": 16,
-            "borderRightColor": "transparent",
+            "borderRightWidth": 0,
           },
           Object {},
         ]
@@ -73,7 +77,7 @@ exports[`MessageReplies should render message replies 1`] = `
             "fontSize": 12,
             "fontWeight": "700",
             "paddingBottom": 5,
-            "paddingLeft": 8,
+            "paddingHorizontal": 8,
           },
           Object {
             "color": "#005FFF",

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -14,7 +14,8 @@ describe('parseLinksFromText', () => {
       'https://localhost/with/path?and=query#fragment',
       'https://localhost/with/path?and=query#fragment',
     ],
-    ['reactnative.stream', undefined],
+    ['reactnative.dev', 'http://reactnative.dev'],
+    ['hinge.health/schedule-with-a-coach', 'http://hinge.health/schedule-with-a-coach'],
     [
       'https://zh.wikipedia.org/wiki/挪威牛油危機',
       'https://zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
@@ -87,29 +88,4 @@ describe('parseLinksFromText', () => {
       raw: input,
     });
   });
-  it('doest not report invalid tlds as urls', () => {
-    const input = `
-    %
-    % Not links
-    %
-    example.invalid
-    example.invalid/
-    http://.example.com
-    http://-example.com
-    hppt://example.com
-    example.coma
-    -example.coma
-        `;
-    const result = parseLinksFromText(input);
-    expect(result).toHaveLength(0);
-  });
-  it('does not parse a decimal number as a URL', () => {
-    const input = '123.456';
-    const result = parseLinksFromText(input);
-    expect(result).toHaveLength(0);
-  });
-  it.each([['@user'], ['@user.name']])('does not parse %p as a URL', (input) => {
-    const result = parseLinksFromText(input);
-    expect(result).toHaveLength(0);
-  });
 });

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -1,4 +1,4 @@
-import Linkify from 'linkify-it';
+import { find } from 'linkifyjs';
 
 interface LinkInfo {
   encodedUrl: string;
@@ -23,13 +23,13 @@ export const parseLinksFromText = (input: string): LinkInfo[] => {
     input,
   );
 
-  const linkify = Linkify();
-  const matches = linkify.match(strippedInput) ?? [];
+  const links = find(strippedInput, 'url');
+  const emails = find(strippedInput, 'email');
 
-  const result: LinkInfo[] = matches.map((match) => {
-    const { raw, url } = match;
-    return { encodedUrl: encodeURI(url), raw };
-  });
+  const result: LinkInfo[] = [...links, ...emails].map(({ href, value }) => ({
+    encodedUrl: encodeURI(href),
+    raw: value,
+  }));
 
   return result;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -210,7 +210,7 @@ export const renderText = <
         if (userName) {
           acc += `${acc.length ? '|' : ''}@${userName}`;
         }
-        return acc;
+        return acc.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
       }, '')
     : '';
 

package/src/components/MessageList/MessageList.tsx

@@ -84,9 +84,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   },
-  messagePadding: {
-    paddingHorizontal: 8,
-  },
   stickyHeader: {
     position: 'absolute',
     top: 0,
@@ -292,7 +289,8 @@ const MessageListWithContext = <
 
   const {
     colors: { white_snow },
-    messageList: { container, contentContainer, listContainer },
+    messageList: { container, contentContainer, listContainer, messageContainer },
+    screenPadding,
   } = theme;
 
   const modifiedTheme = useMemo(
@@ -555,14 +553,18 @@ const MessageListWithContext = <
     }
 
     const isCurrentMessageUnread = isMessageUnread(index);
-    const showUnreadUnderlay = isCurrentMessageUnread && scrollToBottomButtonVisible;
+    const showUnreadUnderlay =
+      !channel.muteStatus().muted && isCurrentMessageUnread && scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1); // show only if previous message is read
 
     if (message.type === 'system') {
       return (
         <>
           <View testID={`message-list-item-${index}`}>
-            <MessageSystem message={message} style={styles.messagePadding} />
+            <MessageSystem
+              message={message}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+            />
           </View>
           {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </>
@@ -587,7 +589,7 @@ const MessageListWithContext = <
               message={message}
               onThreadSelect={onThreadSelect}
               showUnreadUnderlay={showUnreadUnderlay}
-              style={styles.messagePadding}
+              style={[{ paddingHorizontal: screenPadding }, messageContainer]}
               threadList={threadList}
             />
           </View>
@@ -618,7 +620,7 @@ const MessageListWithContext = <
             message={message}
             onThreadSelect={onThreadSelect}
             showUnreadUnderlay={showUnreadUnderlay}
-            style={styles.messagePadding}
+            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
             threadList={threadList}
           />
         </View>