addresses issues explained in facebook#30373 (comment)

handles cases when adding new item to inverted flatlist (flatlist has to
scroll up to the new item)

test cases
facebook#30373 (comment)

https://app.circleci.com/pipelines/github/facebook/react-native/14085/workflows/4d1b9303-2f2b-4cd1-877a-6e863b1a0afc/jobs/264493
https://app.circleci.com/pipelines/github/facebook/react-native/14085/workflows/6f1e7d35-d7cd-4971-80ec-c94417293378/jobs/264496
https://app.circleci.com/pipelines/github/facebook/react-native/14085/workflows/4d1b9303-2f2b-4cd1-877a-6e863b1a0afc/jobs/264500

removing this logic creates a regression in not-nested inverted flatlist

…osition

<video src="https://user-images.githubusercontent.com/24992535/178283738-194b36af-3e59-4a89-b665-9886620a8166.mov" width="1000" />

the code triggers a scrollUp to the end of the inverted flatlist, when
we delete the item on top of the flatlist.

…s to stay in the same position

it works when _onScroll is triggered:
- the user scroll the list
- the bottomY state is updated
- appending item to the list will not change position

still does not work when the user appends a second item

Related facebook#30373 (comment)
Was implemented on a Javascript example above, which had similar issues
- did not work if no scroll was triggered
- did not work if triggering many times fast appends of items

Reason for this issues needs to be investigated, but the solution only
be for TalkBack users to avoid using transform

…y in the same position

>when items are appended to the end of the list, the view needs to stay in the same position

This functionality will be introduced with a separate PR with the
following improvement
(OPTIONAL) instead of using onScroll to save scroll x/y coordinates, use the screenreaderFocus
facebook#30373 (comment)

Related
facebook#34141 (comment)

https://app.circleci.com/pipelines/github/facebook/react-native/14177/workflows/34960ddb-df74-4d4a-a748-5080124487ac/jobs/265768

when items are appended to the end of the list, the view needs to stay in the same position
was removed with 5e81716

(OPTIONAL) instead of using onScroll to save scroll x/y coordinates, use the screenreaderFocus

when items are appended to the end of the list, the view needs to stay in the same position
keep a constant scroll position after triggering onEndReached
to be used only with inverted FlatList and TalkBack

TalkBack user scroll flatlist in different ways then normal users
- onMomentumScrollEnd/Begin and other callbacks dont trigger
- onScroll will trigger 10 times per page scroll (aproximately)
This logic is meant to keep the same position when scrolling on top of
the Inverted FlatList, when more items are appended (infinite loading)

TalkBack Inverted FlastList uses a custom onEndReached callback

The below check does not work in the TalkBack Inverted Flastlist

>Only call onEndReached once for a given content length
```javascript
this._sentEndForContentLength = this._scrollMetrics.contentLength;
```

because we are scrolling up to Y = 0 and detect Y = 0 to trigged
onEndReached

while the default functionality scrolls Up in visually inverted flatlist
  to Y = contentHeight

…down in very big list

facebook#34141 (comment)

Disabled with TalkBack inverted FlatList Triggers a scrollTo bottom and subsequent top when scrolling down
fast, documented in facebook#34141 (comment)

the timeout was introduced with commit
facebook@88c68b2

The Motivation was:
talkback inverted flatlist, height is used to compute an inverted flatlist contentLength from the bottom of the screen setTimeout is required as animated false will not work.

The real cause was conflict with another scrollToOffset called here
https://github.com/facebook/react-native/blob/ffe959efb09028fc18a9385d0c6161125232e7bc/Libraries/Lists/VirtualizedList.js#L1692-L1705

adding the check this._hasTriggeredInitialScrollToIndex fixes the issue

Previous commit facebook@88c68b2
when items are appended to the end of the list, the view needs to stay in the same position
keep a constant scroll position after triggering onEndReached
to be used only with inverted FlatList and TalkBack

TalkBack user scroll flatlist in different ways then normal users
- onMomentumScrollEnd/Begin and other callbacks dont trigger
- onScroll will trigger 10 times per page scroll (aproximately)
This logic is meant to keep the same position when scrolling on top of
the Inverted FlatList, when more items are appended (infinite loading)

onMomentumScrollToEnd requires TalkBack implementation of event TYPE_VIEW_SCROLLED
facebook#34141 (comment)

this is a quick fix that could be replaced in my future PR when I
implemented onMomentumScrollToEnd for TalkBack

facebook#34141 (comment)

Related facebook@0912944

most important, the functionality is disabled if initialScrollIndex is
passed, because not yet compatible with initialScrollIndex.

I can add compatibility with initialScrollIndex in the next PR. It is
easy to introduce.

https://app.circleci.com/pipelines/github/facebook/react-native/14315/workflows/41782e29-7ab8-40d2-af0a-ef6643b42da6/jobs/267683

facebook@03b4764

I designed a solution for the scenario reported by Samuel Susla.
The existing inverted FlatList implementation would visually invert the FlatList using scaleY -1.
For example, if a WhatApp chat thread had only a single message, the message would show at the bottom of the page.
Visually inverting it would correctly handle this scenario and may have been one of the reasons to use scaleY.

The ScrollView consists of two different components on Android:
The NativeDirectionalScrollView is backed on Android by the ReactScrollViewManager and the ReactScrollView widget.
The ReactScrollViewManager manages the ReactScrollView android widget, setting properties like pagingEnabled and adding the content passed with props.children (views, text, images displayed inside the ScrollView).
The NativeDirectionalScrollView clips and scrolls the content included in the ScrollView.
The FlatList style prop is applied to the NativeDirectionalScrollView component, the parent component that clips and scrolls the child content.
The onScroll events are triggered with touch gestures in the Android ReactScrollView and delegated to the javascript ScrollView component, which handles scrolling in JavaScript.
The contentContainer is children of NativeDirectionalScrollView and corresponds to the content rendered inside NativeDirectionalScrollView (views, text, images, and other content).
The contentContainer includes the content to be scrolled and is styled with the contentContainerStyle.
The contentContainerStyle accepts style options like flex, flexDirection, justifyContent, and alignItems, while flex and other properties cause issues with the NativeDirectionalScrollView style.
The NativeDirectionalScrollView uses position or other styles to scroll and clip the underlying content, NativeDirectionalScrollView scaleX and scaleY do not cause issues with scrolling.

The solution (example available here) for the issue is to handle this specific scenario with TalkBack on Android without transform scaleX, which causes accessibility issues on Android.
Detecting when TalkBack is enabled on Android
Apply the style (position: relative) if the content height does not exceed ScrollView height.
An example of the implementation is available in the PR. I will add the required changes to VirtualizedList on Thursday 15th, of September.

Work in Progress
Summary:
- use column-reverse instead of reversing order of items
- handle short list (3 items) using column-reverse. see facebook#34141 (comment)
- fix regression with the initial index position (inverted list needs to
  start from the last index instead of the first index)

More Info

"Adapt current solution to use column-reverse instead of position relative:
Remove logic that inverts the order of the list
Add column-reverse logic to style and contentContainerStyle
Test logic disabled when adding more items to FlatList"	Sep 15 2:01 PM

"Implement the solution in VirtualizedList
Apply column-reverse style depending on the contentHeight (scrollEnabled and talkbackStyle)
Review changes"	Sep 15 6:50 PM

"Review diff
Reintroduce example from commit
Test other scenarios (infinite list, scrollToTop, horizontal flatlist)"	Sep 19 10:59 AM

"Column-reverse introduced several regressions with infinite list and other scenarios:

Expected: https://user-images.githubusercontent.com/24992535/191270491-4abfc24d-84b7-4b44-93ca-9e9adee8b0df.png
Actual: https://user-images.githubusercontent.com/24992535/191270513-34573184-04c9-4f90-abef-9ea1fdf199df.png

The inverted flatlist does not start at the bottom
scrollTo a specific index works correctly with column-reverse:
Understand reason _lastOffsetFromBottomOfScreen is null. Debug _maybeCallOnEndReached which is responsible for setting the value of _lastOffsetFromBottomOfScreen.
The value of lastOffset is used to scroll to the bottom, but the value of lastOffset is not set before calling _onContentSizeChanged
The previous issue is caused by triggering onEndReached when loading the FlatList. The FlatList should only render 10 items, but while adding the items to the FlatList, scroll to the top triggers to add 3 more items (11, 12, 13th).
Comment logic adding additional items when scrolling to the top in the inverted-flatlist example.
Fix the condition in the example and avoid adding new items when FlatList is loading.
The following regression was introduced after removing the logic to add more items to the flatlist onEndReached (infinite list).
The FlatList displays a blank screen after loading for the first time. The issue is caused by column-reverse adding 1 additional page to the flatlist. The FlatList starts scrolled to the last page (an empty page), and the last page consists of an empty screen.
After scrolling to the top, the BlankScreen disappears.
The pages are not aligned correctly. The first page displays items 5 to 10; the second page displays an empty page. The correct behavior would be:
- Page 1 => items 5 to 10
- Page 2 => Items 1 to 5 => Start Position here (inverted)
The issue reproduces in the previous example after removing onLayout and onContentSizeChange.
The infinite list does not keep scroll position when scrolling up."	Sep 19 11:56 AM

"The FlatList displays a blank screen after loading for the first time.
The issue is caused by not verifying that contentLength and visibleLength are not undefined.
Understand the reason onLayout and onContentSizeChange trigger the issue in the content position
Debug the value of contentLength and visibleLength"	Sep 19 4:11 PM

"Rewrite inversion style logic:
Add the logic from the flatlist inverted example to VirtList#scrollProps.
Avoid updates when contentLength and visibleLength are undefined."	Sep 20 12:49 PM

"Removing onLayout and onContentSizeChanged from the flatlist-inverted example triggers a regression. Items are displayed upside down. The inversionStyle scaleY: -1 is applied when TalkBack is enabled. The inversionStyle is applied on the Cell, but not the FlatList.
Verify that the inversionStyle applied on the Cell is causing the issue.
The issue was caused by adding inversionStyle to FlatList style when contentLength/visibileLength was undefined.
Solved by adding a condition that changes style to flexDirection: “column”"	Sep 20 1:47 PM

"FlatList inverted does not start scrolled to the bottom (expected, actual) when TalkBack is enabled.
Find the reason scrollTo is not triggered.
scrollToOffset is called onContentSizeChanged. The scrollTo is calculated using _lastOffsetFromBottomOfScreen, which is undefined. _lastOffsetFromBottomOfScreen is computed when the end of the page is reached (maybeCallOnEndReached).
Understand why maybeCallOnEndReached does not update _lastOffsetFromBottomOfScreen.
The logic inside onContentSizeChanged is responsible for keeping the scroll position in an infinite list. The current behavior is correct; _lastOffsetFromBottomOfScreen is not updated because of the missing onEndReached callback.
Find logic responsible for triggering scrollTo bottom of the list after the first render and understand the root cause of the issue.
Review diff with the main branch.
_hasTriggeredInitialScrollToIndex is true. An initial scroll to an index was triggered with a different _scrollMetrics.contentLength. The FlatList scrolls down 1 page instead of 3 pages."	Sep 20 2:24 PM

"Implement the below solution to handle long lists that may trigger multiple onContentSizeChanged when loading for the first time. The current behavior is that the flatlist starts not scrolled to the end (for ex. Page 3/3), instead is scrolled at Page 2/3:
save the last _scrollMetrics.contentLength
save the last item in the list (the first one in an inverted list)
if the contentLength changes and the lastItem does not change, trigger the scroll to the bottom
Review existing solution
- review the diff
- try to prepend items
Adding logic to avoid issues with multiple scrollTo animations with TalkBack. onMomentumScrollEnd and other ScrollView APIs are not compatible with the TalkBack gestures "	Sep 20 9:12 PM

Example from b3050bd
facebook@c7b2200

Expected: https://www.icloud.com/iclouddrive/020_5sOmaZKhm7-U7SACypf_w#infinite_list_working_without_talkback
Actual: https://www.icloud.com/iclouddrive/0f7d5Udp1AjPbFgldIxrmmA6w#infinite_list_not_working_with_talkback

- Callback _maybeCallOnEndReached is triggered
- Callback onEndReached is not triggered with TalkBack enabled.

Task: Debug _maybeCallOnEndReached and understand reason onEndReached is not triggered with TalkBack
Solution: The issue was caused by missing _hasTriggeredInitialScrollToIndex = true at the initial scroll to bottom.

Tasks:
1) Test functionality with the infinite list (commit b3050bd)"
Example from b3050bd

2) The infinite list does not work when TalkBack is enabled (expected, actual):

Expected: https://www.icloud.com/iclouddrive/020_5sOmaZKhm7-U7SACypf_w#infinite_list_working_without_talkback
Actual: https://www.icloud.com/iclouddrive/0f7d5Udp1AjPbFgldIxrmmA6w#infinite_list_not_working_with_talkback
TalkBack Test Case after the fix: https://www.icloud.com/iclouddrive/064T0QQSHLVsBx68Bf03NClrQ#infinite_list_working_with_talkback

- Callback _maybeCallOnEndReached is triggered
- Callback onEndReached is not triggered with TalkBack enabled.
- Debug _maybeCallOnEndReached and understand reason onEndReached is not triggered with TalkBack

The issue was caused by missing _hasTriggeredInitialScrollToIndex = true at the initial scroll to bottom (talkback test case after fix).

3) Test horizontal list

Test Infinite List with Horizontal FlatList https://www.icloud.com/iclouddrive/0fexoaRsobWIbHJARVGHtqv3w#horizontal_flatlist_infinite_scroll_with_talkback

- Commit vertical example in flatlist-inverted
- Add a test case of horizontal flatlist
- Add style row-reverse for horizontal FlatList
- Test infinite list, scrollTo index, append/prepend item
- Save Video recording (infinite list with horizontal flatlist)

Long List on real device (incrase by 3 items when scrolling up)
https://www.icloud.com/iclouddrive/04a4ruftC-pRkZHkTsrf3RvJg#testing_infinite_list_on_real_device_after_fixing_scroll_issue

Long List on real device (incrase by 11 items when scrolling up)
https://www.icloud.com/iclouddrive/020qgsDwgA7r6F5zcMjTsQgCQ#testing_long_list_in_real_device

Long List in emulator (increasing by 11 items when scrolling up)
https://www.icloud.com/iclouddrive/02cOvpBJdAaX4NDjTtxN1_KNw#testing_infinite_list_emulator_after_fix_with_11_items_increase

testing_scroll_up_after_fix_on_emulator (3 items)
https://www.icloud.com/iclouddrive/00340Pa2ha6AP-4ptCJ-VDxiQ#testing_scroll_up_after_fix_on_emulator

testing_mantain_content_position_api
https://github.com/fabriziobertoglio1987/react-native/commits/inverted-flatlist-mantain-position
https://www.icloud.com/iclouddrive/051-C9g_yFF2UDecA44dCEUIA#testing_mantain_content_position_api