fix scroll issue on native

Author: dukenv0307

src/components/HTMLEngineProvider/HTMLRenderers/HTMLTableScroll/index.native.tsx

@@ -0,0 +1,49 @@
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {useMemo} from 'react';
+import {View} from 'react-native';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import Animated, {cancelAnimation, useAnimatedStyle, useSharedValue, withDecay} from 'react-native-reanimated';
+
+import type HTMLTableScrollProps from './types';
+
+/**
+ * Native horizontal scroller for HTML tables. A plain ScrollView rendered inside react-native-render-html never wins the
+ * pan on native, and a gesture-handler ScrollView can only ever claim one axis (blocking the chat's vertical scroll).
+ * This custom pan scrolls the table horizontally while activeOffsetX/failOffsetY let vertical drags fall through to the
+ * chat's vertical scroll.
+ */
+function HTMLTableScroll({viewportWidth, contentWidth, children}: HTMLTableScrollProps) {
+    const styles = useThemeStyles();
+    const maxScroll = Math.max(0, contentWidth - viewportWidth);
+
+    const translateX = useSharedValue(0);
+    const panGesture = useMemo(
+        () =>
+            Gesture.Pan()
+                .activeOffsetX([-10, 10])
+                .failOffsetY([-10, 10])
+                .onBegin(() => {
+                    cancelAnimation(translateX);
+                })
+                .onChange((event) => {
+                    translateX.set(Math.min(0, Math.max(-maxScroll, translateX.get() + event.changeX)));
+                })
+                .onEnd((event) => {
+                    translateX.set(withDecay({velocity: event.velocityX, clamp: [-maxScroll, 0]}));
+                }),
+        [maxScroll, translateX],
+    );
+
+    const animatedStyle = useAnimatedStyle(() => ({transform: [{translateX: translateX.get()}]}));
+
+    return (
+        <View style={[styles.htmlTable, {width: viewportWidth}]}>
+            <GestureDetector gesture={panGesture}>
+                <Animated.View style={[{width: contentWidth}, animatedStyle]}>{children}</Animated.View>
+            </GestureDetector>
+        </View>
+    );
+}
+
+export default HTMLTableScroll;

src/components/HTMLEngineProvider/HTMLRenderers/HTMLTableScroll/index.tsx

@@ -0,0 +1,28 @@
+import ScrollView from '@components/ScrollView';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {View} from 'react-native';
+
+import type HTMLTableScrollProps from './types';
+
+/**
+ * Web/default horizontal scroller for HTML tables. A plain ScrollView scrolls fine here because web is not affected by
+ * the native responder issue that requires the custom pan gesture in the native variant. The rows are wrapped in a
+ * column View because a horizontal ScrollView's content container lays its children out in a row by default.
+ */
+function HTMLTableScroll({viewportWidth, contentWidth, children}: HTMLTableScrollProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{width: viewportWidth}}
+        >
+            <View style={[styles.htmlTable, {width: contentWidth}]}>{children}</View>
+        </ScrollView>
+    );
+}
+
+export default HTMLTableScroll;

src/components/HTMLEngineProvider/HTMLRenderers/HTMLTableScroll/types.ts

@@ -0,0 +1,14 @@
+import type {ReactNode} from 'react';
+
+type HTMLTableScrollProps = {
+    /** Width of the visible scroll viewport, i.e. the available message width. */
+    viewportWidth: number;
+
+    /** Full width of the table content; at least the viewport width. */
+    contentWidth: number;
+
+    /** The rendered table rows. */
+    children: ReactNode;
+};
+
+export default HTMLTableScrollProps;

src/components/HTMLEngineProvider/HTMLRenderers/TableRenderer.tsx

@@ -1,16 +1,13 @@
-import useThemeStyles from '@hooks/useThemeStyles';
-
 import variables from '@styles/variables';
 
 import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
 
 import {useContext, useMemo} from 'react';
-import {View} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
 import {useContentWidth} from 'react-native-render-html';
 
 import type {CellHorizontalAlignment} from './TableColumnAlignmentContext';
 
+import HTMLTableScroll from './HTMLTableScroll';
 import TableChildrenRenderer, {getElementChildren} from './TableChildrenRenderer';
 import TableColumnAlignmentContext from './TableColumnAlignmentContext';
 import TableContentWidthContext from './TableContentWidthContext';
@@ -33,11 +30,10 @@ function getColumnAlignments(tableNode: TNode): CellHorizontalAlignment[] {
 }
 
 function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
-    const styles = useThemeStyles();
     const columnAlignments = useMemo(() => getColumnAlignments(tnode), [tnode]);
 
     // The comment-level width fills the message exactly; fall back to the HTML content width when the table is rendered
-    // outside a comment. A concrete number is required because a percentage does not resolve inside a horizontal ScrollView.
+    // outside a comment. A concrete number is required because the scroller needs a fixed viewport and content width.
     const measuredContentWidth = useContext(TableContentWidthContext);
     const fallbackContentWidth = useContentWidth();
     const viewportWidth = measuredContentWidth || fallbackContentWidth;
@@ -46,17 +42,12 @@ function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
 
     return (
         <TableColumnAlignmentContext.Provider value={columnAlignments}>
-            <ScrollView
-                horizontal
-                shouldActivateOnStart
-                showsHorizontalScrollIndicator={false}
-                style={{width: viewportWidth}}
-                contentContainerStyle={{width: contentWidth}}
+            <HTMLTableScroll
+                viewportWidth={viewportWidth}
+                contentWidth={contentWidth}
             >
-                <View style={styles.htmlTable}>
-                    <TableChildrenRenderer tnode={tnode} />
-                </View>
-            </ScrollView>
+                <TableChildrenRenderer tnode={tnode} />
+            </HTMLTableScroll>
         </TableColumnAlignmentContext.Provider>
     );
 }

src/styles/index.ts

@@ -2726,10 +2726,9 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         htmlTableCell: {
-            // A definite flexBasis (not flex: 1 / basis 0) keeps columns aligned across rows inside the horizontal
-            // ScrollView, where the indefinite main-axis width otherwise collapses each cell to its content width.
-            // flexShrink: 0 stops columns from shrinking to fit the viewport, so a wide table overflows and can be
-            // scrolled horizontally; flexGrow: 1 still lets columns expand to fill the message width when it is wider.
+            // A definite flexBasis with flexShrink: 0 gives every column a fixed width so a wide table keeps its size
+            // and can be scrolled horizontally, and columns stay aligned across rows; flexGrow: 1 still lets columns
+            // expand to fill the message width when the table is narrower than it.
             flexGrow: 1,
             flexShrink: 0,
             flexBasis: variables.htmlTableColumnMaxWidth,