Skip to content

onLayout in Flatlist item sometimes returns incorrect values #16782

@elliscwc

Description

@elliscwc

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.1.3
Yarn: 0.27.5
npm: 4.6.1
react-native: 0.49.1
react: 16.0.0-beta.5
Target Platform: iOS and Android

Steps to Reproduce

I am using Flatlist with a very long list of array data, because the items have variable heights, scrolling from bottom to top of the long list will cause jumpiness (due to unmounting/mounting), so I use onLayout on the item view to calculate the height and then pass to the parent component so that every time the item is mounted again, it has the fixed height, thus fix the jumpiness, however the onLayout function does not always return the actual height on some items at the bottom of the list.

  1. Create a Flatlist with large amount of items
  2. Each item has the onLayout to calculate the height
  3. Set the height to the item

Expected Behavior

The onLayout should return the correct height so that the list shows correctly. To clarify, inside each of the item's child, it has to go through a few if-else statements to return what to render. My opinion in this is that it causes a race condition, where the onLayout calculation is called first before all the operation and rendering processes has complete, thereby giving wrong height value. The onLayout should wait for the rendering to complete only then it should do the layout calculation.

Actual Behavior

onLayout returns incorrect value.

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions