Unexpected scroll behaviors when using FlatList

Description

Content teleports to right when over-scrolling, if the content is less.

What I am trying to do? 🤔

Two FlatList components are nested inside a ScrollView for a custom component to emulate a grid like structure.

Example:

_________
         |
         |
[] [] [] | [] []
[] [] [] | [] []
[] [] [] | [] []
[] [] [] | []
         |
         |
▔▔▔▔▔

[] represent grid items and | represents edge of the screen. The items are accessed by scrolling horizontally.

How am I doing this? ❓

export function HorizontalRowList({
    rows, data, renderItem,
    bounces = false,
    itemSeparatorComponent,
    style, columnStyle
}) {
    const columns = divideArrayIntoChunks(rows, data);
    return (
        <ScrollView style={{ ...style, overflow: "hidden" }}
            showsVerticalScrollIndicator={false}
            nestedScrollEnabled={true}
            alwaysBounceHorizontal={bounces}
            bounces={bounces}>
            <FlatList data={columns}
                style={{ borderColor: "blue", borderWidth: 1, overflow: "hidden" }}
                ItemSeparatorComponent={itemSeparatorComponent}
                nestedScrollEnabled={true}
                legacyImplementation={false}
                initialNumToRender={columns.length}
                horizontal={true}
                alwaysBounceHorizontal={bounces}
                bounces={bounces}
                renderItem={(column) => {
                    return <FlatList data={column.item}
                        style={columnStyle}
                        ItemSeparatorComponent={itemSeparatorComponent}
                        legacyImplementation={false}
                        bounces={bounces}
                        renderItem={({ item }) => {
                            return renderItem(item);
                        }} />
                }} />
        </ScrollView >
    )
}

function divideArrayIntoChunks(chunkSize, array) {
    const chuckedArray = []
    for (let i = 0; i < array.length; i += chunkSize) {
        chuckedArray.push(array.slice(i, i + chunkSize))
    }
    return chuckedArray;
}

ScrollView to disable individual vertical scroll bars for the columns when the component has less space.
The first FlatList to enable horizontal behavior of grid
The second FlatList component are columns. The component can be given used to render list of varying sizes.

When the bug occurs? 🪲

The bug happens when data is less and rows to render are more. This causes the array to be chunked in the following way:

[] []     |
[] []     |
[] []     |
[]        |

Steps to reproduce

• Create a new project
• Add the code for HorizontalRowList component given in the description
• Import and add the component in App.js
• Create a random list of strings or any other object
• Pass this list to data attribute of HorizontalRowList
• Set the row attribute in such a way that there is considerable space to the right of the HorizontalRowList
• Try scrolling HorizontalRowList and observe the behavior

React Native Version

0.73.6

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz
  Memory: 5.68 GB / 15.78 GB
Binaries:
  Node:
    version: 21.0.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.4.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.8.34408.163 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: ^0.73.6
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No Errors

Reproducer

Please check this snack

https://staging-snack.expo.dev/kawPQ53xi5xNUpxnPKYfB

Screenshots and Videos

Inizia con l’esempio HorizontalRowList in App.js e con lo Snack collegato, usando React Native 0.73.6 su Android. Riproduci il caso di uno ScrollView e un FlatList annidati in cui i dati sono inferiori al numero di righe richiesto, quindi analizza il comportamento dello scorrimento. Il lavoro è completato quando il contenuto non si teletrasporta più orizzontalmente durante lo scorrimento oltre il limite.