Merge pull request #972 from GetStream/develop

Next Release

Author: vishalnarkhede

.github/workflows/e2e-native-android.yml

@@ -197,11 +197,11 @@ dependencies {
     implementation platform('com.google.firebase:firebase-bom:25.12.0')
 
     // For animated GIF support
-    implementation 'com.facebook.fresco:animated-gif:2.0.0'
+    implementation 'com.facebook.fresco:animated-gif:2.6.0'
 
     // For WebP support, including animated WebP
-    implementation 'com.facebook.fresco:animated-webp:2.1.0'
-    implementation 'com.facebook.fresco:webpsupport:2.0.0'
+    implementation 'com.facebook.fresco:animated-webp:2.6.0'
+    implementation 'com.facebook.fresco:webpsupport:2.6.0'
 
     implementation 'com.google.firebase:firebase-crashlytics'
     implementation 'com.google.firebase:firebase-analytics'

.github/workflows/e2e-native-ios.yml

@@ -189,11 +189,11 @@ dependencies {
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
     // For animated GIF support
-    implementation 'com.facebook.fresco:animated-gif:2.0.0'
+    implementation 'com.facebook.fresco:animated-gif:2.6.0'
 
     // For WebP support, including animated WebP
-    implementation 'com.facebook.fresco:animated-webp:2.1.0'
-    implementation 'com.facebook.fresco:webpsupport:2.0.0'
+    implementation 'com.facebook.fresco:animated-webp:2.6.0'
+    implementation 'com.facebook.fresco:webpsupport:2.6.0'
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'

.github/workflows/e2e-sample-android.yml

@@ -41,6 +41,7 @@ export const Skeleton: React.FC = () => {
         gradientStart,
         gradientStop,
         height = 64,
+        maskFillColor,
       },
       colors: { border, grey_gainsboro, white_snow },
     },
@@ -138,7 +139,7 @@ export const Skeleton: React.FC = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path d={d.value} fill={white_snow} />
+        <Path d={d.value} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );

.github/workflows/e2e-sample-ios.yml

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GestureResponderEvent, Linking, Text } from 'react-native';
+import { GestureResponderEvent, Linking, Text, View } from 'react-native';
 import anchorme from 'anchorme';
 import truncate from 'lodash/truncate';
 // @ts-expect-error
@@ -11,6 +11,7 @@ import {
   ParseFunction,
   parseInline,
   ReactNodeOutput,
+  SingleASTNode,
 } from 'simple-markdown';
 
 import type { MessageType } from '../../../MessageList/hooks/useMessageList';
@@ -38,9 +39,15 @@ const defaultMarkdownStyles: MarkdownStyle = {
     marginBottom: 8,
     marginTop: 8,
   },
+  listItemNumber: {
+    fontWeight: 'bold',
+  },
   listItemText: {
     flex: 0,
   },
+  listRow: {
+    flexDirection: 'row',
+  },
   mentions: {
     fontWeight: '700',
   },
@@ -182,20 +189,17 @@ export const renderText = <
       }
     };
 
-    state.withinLink = true;
-    const link = React.createElement(
-      Text,
-      {
-        key: state.key,
-        onLongPress,
-        onPress,
-        style: styles.autolink,
-        suppressHighlighting: true,
-      },
-      output(node.content, state),
+    return (
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={styles.autolink}
+        suppressHighlighting={true}
+      >
+        {output(node.content, { ...state, withinLink: true })}
+      </Text>
     );
-    state.withinLink = false;
-    return link;
   };
 
   const mentionedUsers = Array.isArray(mentioned_users)
@@ -230,22 +234,61 @@ export const renderText = <
       }
     };
 
-    return React.createElement(
-      Text,
-      {
-        key: state.key,
-        onLongPress,
-        onPress,
-        style: styles.mentions,
-      },
-      Array.isArray(node.content) ? node.content[0]?.content || '' : output(node.content, state),
+    return (
+      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+        {Array.isArray(node.content) ? node.content[0].content || '' : output(node.content, state)}
+      </Text>
     );
   };
 
+  const listLevels = {
+    sub: 'sub',
+    top: 'top',
+  };
+
+  /**
+   * For lists and sublists, the default behavior of the markdown library we use is
+   * to always renumber any list, so all ordered lists start from 1.
+   *
+   * This custom rule overrides this behavior both for top level lists and sublists,
+   * in order to start the numbering from the number of the first list item provided.
+   * */
+  const customListAtLevel =
+    (level: keyof typeof listLevels): ReactNodeOutput =>
+    (node, output, { ...state }) => {
+      const items = node.items.map((item: Array<SingleASTNode>, index: number) => {
+        const withinList = item.length > 1 && item[1].type === 'list';
+        const content = output(item, { ...state, withinList });
+
+        const isTopLevelText =
+          ['text', 'paragraph', 'strong'].includes(item[0].type) && withinList === false;
+
+        return (
+          <View key={index} style={styles.listRow}>
+            <Text style={styles.listItemNumber}>
+              {node.ordered ? `${node.start + index}. ` : `\u2022`}
+            </Text>
+            <Text style={[styles.listItemText, isTopLevelText && { marginBottom: 0 }]}>
+              {content}
+            </Text>
+          </View>
+        );
+      });
+
+      const isSublist = level === 'sub';
+      return (
+        <View key={state.key} style={[isSublist ? styles.list : styles.sublist]}>
+          {items}
+        </View>
+      );
+    };
+
   const customRules = {
     link: { react },
+    list: { react: customListAtLevel('top') },
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
+    sublist: { react: customListAtLevel('sub') },
     ...(mentionedUsers
       ? {
           mentions: {

examples/SampleApp/android/app/build.gradle

@@ -1,7 +1,7 @@
 import { vh } from '../../../utils/utils';
 
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { CircleProps, StopProps } from 'react-native-svg';
+import type { CircleProps, Color, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
 
@@ -124,6 +124,7 @@ export type Theme = {
     gradientStart: StopProps;
     gradientStop: StopProps;
     height: number;
+    maskFillColor?: Color;
   };
   channelPreview: {
     checkAllIcon: IconProps;