microsoft / microsoft/react-native-windows

Inverting Flatlist does not render properly nor does scroll behavior work as expected

Open
#4,098 24 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: FlatList bug Needs WinUI 3 Partner: Facebook Partner: Xbox Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

"react-native@0.60.6"
"react-native-windows@0.60.0-vnext.133",
node -v: 10.15.0
npm -v: 6.4.1

  • Target Platform Version(s): 10.0.18362.0
  • Target Device(s): Desktop
  • Visual Studio Version: VS 2017
  • Build Configuration: Debug & Release
Steps to Reproduce
  1. Create a component that has a FlatList in it.
  2. Set the inverted property to true
Expected Behavior

Assuming a list of items 0-100, the FlatList with inverted set to true should render with item 0 at the bottom of the list, and item 100 at the top of the list.

If you were to scroll up, the list should scroll up, and if you were to scroll down, the list should scroll down.

Actual Behavior

While the flat list does indeed have the items in the correct order, the whole flat list is flipped on its top edge, meaning that it renders entirely outside of its normal bounds.

The scroll behavior is also inverted. If you were to scroll up, the list scrolls down, and if you were to scroll down, the list scrolls up.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing a FlatList with inverted set to true using the React Native Windows versions and environment listed in the issue. Compare its rendered bounds and scroll direction with the expected behavior; done when item order, placement, and scrolling all match the described expectations.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.