MARKDOWN TEXT TABLE FORMAT HORIZONTAL SCROLL NOT WORKING ANDROID AND IOS

[selvakumarmg]

when passed markdown text with table format mobile horizontal scroll not working in android and ios

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10
Data 1	Data 2	Data 3	Data 4	Data 5	Data 6	Data 7	Data 8	Data 9	Data 10
Data 11	Data 12	Data 13	Data 14	Data 15	Data 16	Data 17	Data 18	Data 19	Data 20
Data 21	Data 22	Data 23	Data 24	Data 25	Data 26	Data 27	Data 28	Data 29	Data 30
Data 31	Data 32	Data 33	Data 34	Data 35	Data 36	Data 37	Data 38	Data 39	Data 40
Data 41	Data 42	Data 43	Data 44	Data 45	Data 46	Data 47	Data 48	Data 49	Data 50

[danielcdcj]

Haven't seen any solutions so far so I hacked up one myself.
If anyone can come up with something cleaner, please post below.
What I did was to extract all the td from table body and table head and organize them all into columns.
Then in rendering, each cell reports its own height to get the maxHeight for each of the row; the minHeight will ensure they all have the same height in the end.

<Markdown rules={{table: renderTable}}>{markdownText}</Markdown>

function renderTable(node, children, parent, styles) {
    try {
        // resolve table body contents
        let numRows = children[1].props.children.length;
        let numCols = children[1].props.children[0].props.children.length;
        let columns: (any[])[] = Array(numCols);
        for(let rInd = 0; rInd < numRows; rInd++) {
            let row = children[1].props.children[rInd];
            for(let cInd = 0; cInd < numCols; cInd++) {
                if(columns[cInd] === undefined) columns[cInd] = Array(numRows);
                columns[cInd][rInd] = row.props.children[cInd];
            }
        }
        // resolve table header
        for(let cInd = 0; cInd < numCols; cInd++) {
            let headerCell = children[0].props.children[0].props.children[cInd];
            columns[cInd].unshift(<View style={{backgroundColor: "#ccc"}}>{headerCell}</View>);
        }

        return (
            <ScrollView horizontal={true}>
                <CustomTable columns={columns} />
            </ScrollView>
        );
    } catch(e) {
        return children;
    }
}
function CustomTable(props: {
    columns: (any[])[],
}) {
    let {columns} = props;
    let [maxRowHeights, setMaxRowHeights] = useState<number[]>(Array(columns[0].length).fill(0));
    let windowLayout = useWindowDimensions();
    return (
        <View style={{flexDirection: "row"}}>
            {columns.map((c, cInd) => {
                return (
                    <View
                        key={cInd}
                        style={{
                            flexDirection: "column",
                            borderLeftWidth: (cInd === 0) ? 2 : 1,
                            borderLeftColor: (cInd === 0) ? "black" : "#aaa",
                            borderRightWidth: (cInd === columns.length - 1) ? 2 : 0,
                            borderTopWidth: 2,
                            borderBottomWidth: 2,
                            borderTopLeftRadius: (cInd === 0) ? 5 : 0,
                            borderBottomLeftRadius: (cInd === 0) ? 5 : 0,
                            borderTopRightRadius: (cInd === columns.length - 1) ? 5 : 0,
                            borderBottomRightRadius: (cInd === columns.length - 1) ? 5 : 0,
                        }}
                    >
                        {c.map(((r, rInd) => {
                            return <View
                                onLayout={({nativeEvent: {layout}}) => {
                                    let currentHeight = layout.height;
                                    let maxPeerHeight = maxRowHeights[rInd];
                                    if(maxPeerHeight < currentHeight) {
                                        maxRowHeights[rInd] = currentHeight;
                                        setMaxRowHeights([...maxRowHeights])
                                    }
                                }}
                                key={rInd}
                                style={{
                                    borderBottomWidth: (rInd === c.length - 1) ? 0 : 1,
                                    borderColor: "#aaa",
                                    maxWidth: windowLayout.width * 2 / 3,
                                    minHeight: (maxRowHeights[rInd] > 0) ? maxRowHeights[rInd] : undefined,
                                }}
                            >{r}</View>
                        }))}
                    </View>
                )
            })}
        </View>
    )
}

This is how it looks in iOS simulator