Skip to content

Fix inverted flatlist #2

Merged
thienlnam merged 1 commit intoExpensify:masterfrom
azimgd:fix-reverted-flatlist-signed
Nov 3, 2021
Merged

Fix inverted flatlist #2
thienlnam merged 1 commit intoExpensify:masterfrom
azimgd:fix-reverted-flatlist-signed

Conversation

@azimgd
Copy link

@azimgd azimgd commented Nov 3, 2021

Expected Result:

  • When copying text in <FlatList inverted={true} /> that when you highlight lines of text, including across multiple messages, that the text is highlighted in order from top to bottom or bottom to top.
  • When pasting text that has been copied from Flatlist, that it shows up in the correct order.

Actual Result:

  • Copying is sporadic and 'jumps around' when you highlight text over multiple messages.
  • Pasting - When pasting copied text from multiple e.cash messages, it's out of order
Highlighting glitch Copy order

This has been reviewed and tested by multiple developers. Some references are:

Implementation

I have removed flatlist inversion (by inverted=true prop) which used [transform: translate] css hack and instead adding flatlist array items in reverse order [unshift instead of push]; It also reverses ScrollView event response received from browser [e.nativeEvent.configOffset *= -1];

Sidenote

I was not able to fix this issue by applying this code directly in React Native repo. The reason is that RN column-reverse won't anchor scroll position to the bottom on Mobile device as it does on Web
facebook/yoga#866 (comment)

…orm: translate] css hack and instead adding flatlist array items in reverse order [unshift instead of push]; It also reverses ScrollView event response received from browser [e.nativeEvent.configOffset *= -1];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants