Unexpected scroll behaviors when using FlatList

[Neopentene]

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

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[Neopentene]

⚠️ Newer Version of React Native is Available! ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.73.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

Upgraded the version yet the issue is still persists.

[Neopentene]

Added link to a snack to reproduce this issue: https://staging-snack.expo.dev/kawPQ53xi5xNUpxnPKYfB

[boiboif]

Temporary solution for the issue is adding this line to FlatList contentContainerStyle={{ flexGrow: 1 }}

[Neopentene]

Temporary solution for the issue is adding this line to FlatList contentContainerStyle={{ flexGrow: 1 }}

Thanks for the temporary fix but this issue needs fixing even without flexGrow: 1 or minHeight: '100%'. If there is no content to scroll then scroll should not bug out like this.

[chanphiromsok]

I also had this issue with nested scroll using ScrollView