1/5 Avoid using transform scaleY or scaleX in inverted flatlist when TalkBack and enabledTalkbackCompatibleInvertedList prop are enabled

Libraries/Lists/VirtualizedList.js

@@ -32,6 +32,8 @@ import {
   computeWindowedRenderLimits,
   keyExtractor as defaultKeyExtractor,
 } from './VirtualizeUtils';
+import AccessibilityInfo from '../Components/AccessibilityInfo/AccessibilityInfo';
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import * as VirtualizedListInjection from './VirtualizedListInjection';
 import CellRenderer from './VirtualizedListCellRenderer';
 import * as React from 'react';
@@ -47,6 +49,7 @@ const StyleSheet = require('../StyleSheet/StyleSheet');
 const infoLog = require('../Utilities/infoLog');
 const FillRateHelper = require('./FillRateHelper');
 const ViewabilityHelper = require('./ViewabilityHelper');
+const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 
 const ON_END_REACHED_EPSILON = 0.001;
@@ -67,6 +70,7 @@ type ViewabilityHelperCallbackTuple = {
 type State = {
   first: number,
   last: number,
+  screenreaderEnabled: ?boolean,
 };
 
 /**
@@ -138,6 +142,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   // scrollToEnd may be janky without getItemLayout prop
   scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
+    if (__DEV__ && this.props.enabledTalkbackCompatibleInvertedList) {
+      console.log(
+        'scrollToEnd is not compatible with enabledTalkbackCompatibleInvertedList,' +
+          'use instead scrollToOffset. An example implementation is available in rn-tester flatlist-inverted.',
+      );
+    }
     const animated = params ? params.animated : true;
     const veryLast = this.props.getItemCount(this.props.data) - 1;
     const frame = this.__getFrameMetricsApprox(veryLast);
@@ -424,6 +434,19 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       }
     }
 
+    if (Platform.OS === 'android') {
+      this._screenreaderEventListener = AccessibilityInfo.addEventListener(
+        'screenReaderChanged',
+        screenreaderEnabled => {
+          if (
+            typeof screenreaderEnabled === 'boolean' &&
+            screenreaderEnabled !== this.state.screenreaderEnabled
+          ) {
+            this.setState({screenreaderEnabled});
+          }
+        },
+      );
+    }
     invariant(
       !this.context,
       'Unexpectedly saw VirtualizedListContext available in ctor',
@@ -437,6 +460,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           (this.props.initialScrollIndex || 0) +
             initialNumToRenderOrDefault(this.props.initialNumToRender),
         ) - 1,
+      screenreaderEnabled: undefined,
     };
   }
 
@@ -447,6 +471,31 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         cellKey: this.context.cellKey,
       });
     }
+
+    // updates the initial state of the screenreaderReader
+    if (
+      Platform.OS === 'android' &&
+      this.state.screenreaderEnabled === undefined
+    ) {
+      AccessibilityInfo.isScreenReaderEnabled().then(
+        screenreaderEnabled => {
+          if (
+            typeof screenreaderEnabled === 'boolean' &&
+            screenreaderEnabled !== this.state.screenreaderEnabled
+          ) {
+            this.setState({screenreaderEnabled});
+          }
+        },
+        e => {
+          if (__DEV__) {
+            console.log(
+              'isScreenReaderEnabled() raised an error, in this case the default inverted FlatList will be used with Talkback. ' +
+                e.toString(),
+            );
+          }
+        },
+      );
+    }
   }
 
   componentWillUnmount() {
@@ -459,6 +508,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       tuple.viewabilityHelper.dispose();
     });
     this._fillRateHelper.deactivateAndFlush();
+    if (this._screenreaderEventListener) {
+      this._screenreaderEventListener.remove();
+    }
   }
 
   static getDerivedStateFromProps(newProps: Props, prevState: State): State {
@@ -474,6 +526,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         Math.min(prevState.first, getItemCount(data) - 1 - maxToRenderPerBatch),
       ),
       last: Math.max(0, Math.min(prevState.last, getItemCount(data) - 1)),
+      screenreaderEnabled: prevState.screenreaderEnabled,
     };
   }
 
@@ -587,13 +640,48 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
     const {ListEmptyComponent, ListFooterComponent, ListHeaderComponent} =
       this.props;
-    const {data, horizontal} = this.props;
+    const {data, horizontal, inverted, enabledTalkbackCompatibleInvertedList} =
+      this.props;
+    const {first, last, screenreaderEnabled} = this.state;
+    const {contentLength, visibleLength} = this._scrollMetrics;
+    const talkbackCompatibility =
+      screenreaderEnabled &&
+      inverted &&
+      Platform.OS === 'android' &&
+      enabledTalkbackCompatibleInvertedList;
     const isVirtualizationDisabled = this._isVirtualizationDisabled();
-    const inversionStyle = this.props.inverted
-      ? horizontalOrDefault(this.props.horizontal)
+    let inversionStyle = inverted
+      ? horizontalOrDefault(horizontal)
         ? styles.horizontallyInverted
         : styles.verticallyInverted
       : null;
+    let style = inversionStyle
+      ? [inversionStyle, this.props.style]
+      : this.props.style;
+    let contentContainerStyle = this.props.contentContainerStyle;
+    if (
+      talkbackCompatibility &&
+      contentLength != null &&
+      visibleLength != null
+    ) {
+      const diff = visibleLength - contentLength;
+      if (diff > 0) {
+        style = horizontalOrDefault(horizontal)
+          ? [{flexDirection: 'row-reverse'}, this.props.style]
+          : [{flexDirection: 'column-reverse'}, this.props.style];
+      } else {
+        style = this.props.style;
+      }
+    }
+    if (talkbackCompatibility) {
+      contentContainerStyle = horizontalOrDefault(horizontal)
+        ? [{flexDirection: 'row-reverse'}, this.props.contentContainerStyle]
+        : [{flexDirection: 'column-reverse'}, this.props.contentContainerStyle];
+      inversionStyle = null;
+      if (contentLength == null || visibleLength == null) {
+        style = this.props.style;
+      }
+    }
     const cells = [];
     const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     const stickyHeaderIndices = [];
@@ -634,7 +722,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       const lastInitialIndex = this.props.initialScrollIndex
         ? -1
         : initialNumToRenderOrDefault(this.props.initialNumToRender) - 1;
-      const {first, last} = this.state;
+      // scroll to top optimization. The first page is always rendered.
       this._pushCells(
         cells,
         stickyHeaderIndices,
@@ -788,9 +876,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           ? this.props.invertStickyHeaders
           : this.props.inverted,
       stickyHeaderIndices,
-      style: inversionStyle
-        ? [inversionStyle, this.props.style]
-        : this.props.style,
+      style,
+      contentContainerStyle,
     };
 
     this._hasMore =
@@ -921,6 +1008,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _totalCellsMeasured = 0;
   _updateCellsToRenderBatcher: Batchinator;
   _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];
+  _screenreaderEventListener: EventSubscription;
 
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
@@ -1191,9 +1279,26 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   _maybeCallOnEndReached() {
-    const {data, getItemCount, onEndReached, onEndReachedThreshold} =
-      this.props;
+    const {
+      data,
+      getItemCount,
+      onEndReached,
+      onEndReachedThreshold,
+      inverted,
+      enabledTalkbackCompatibleInvertedList,
+    } = this.props;
     const {contentLength, visibleLength, offset} = this._scrollMetrics;
+    if (
+      __DEV__ &&
+      inverted &&
+      enabledTalkbackCompatibleInvertedList &&
+      onEndReached != null
+    ) {
+      console.log(
+        'The prop enabledTalkbackCompatibleInvertedList is not compatible with onEndReached. ' +
+          'An example implementation is available in rn-tester flatlist-inverted.',
+      );
+    }
     let distanceFromEnd = contentLength - visibleLength - offset;
 
     // Especially when oERT is zero it's necessary to 'floor' very small distanceFromEnd values to be 0
@@ -1223,6 +1328,21 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   _onContentSizeChange = (width: number, height: number) => {
+    const {
+      initialScrollIndex,
+      inverted,
+      enabledTalkbackCompatibleInvertedList,
+    } = this.props;
+    if (
+      __DEV__ &&
+      initialScrollIndex != null &&
+      inverted &&
+      enabledTalkbackCompatibleInvertedList
+    ) {
+      console.error(
+        'The prop enabledTalkbackCompatibleInvertedList can not be used with initialScrollIndex.',
+      );
+    }
     if (
       width > 0 &&
       height > 0 &&
@@ -1464,6 +1584,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           // - initialScrollIndex > 0 AND scrolling is complete
           // - initialScrollIndex > 0 AND the end of the list is visible (this handles the case
           //   where the list is shorter than the visible area)
+          const {first, last} = state;
           if (
             !this.props.initialScrollIndex ||
             this._scrollMetrics.offset ||
@@ -1473,7 +1594,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               this.props,
               maxToRenderPerBatchOrDefault(this.props.maxToRenderPerBatch),
               windowSizeOrDefault(this.props.windowSize),
-              state,
+              {first, last},
               this.__getFrameMetricsApprox,
               this._scrollMetrics,
             );

Libraries/Lists/VirtualizedListProps.js

@@ -66,6 +66,16 @@ type OptionalProps = {|
    * this for debugging purposes. Defaults to false.
    */
   disableVirtualization?: ?boolean,
+
+  /**
+   * Enable TalkBack support for inverted FlatList
+   * The default implementation of inverted FlatList uses transform scaleX or scaleY and is not compatible
+   * with TalkBack. This implementation manually inverts the order of the items, but does not yet support all
+   * FlatList functionalities, by default is disabled.
+   * Experimental - Example of implementation available in rn-tester flatlist-inverted.
+   */
+  enabledTalkbackCompatibleInvertedList?: ?boolean,
+
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the