Support inverted ScrollView on macOS

Allow to render a scrollView's content in inverted order which is especially helpful in messaging applications.

We can't rely on -1 scale hacks on macOS because of inverse issues with trackpad/scrollwheel, dragging scrollbars, tracking hovers, etc.

Hence we added 'native' support for inverted views

Author: appden

Libraries/Components/ScrollView/ScrollView.js

@@ -499,6 +499,10 @@ export type Props = $ReadOnly<{|
    * ScrollView. This is usually used with inverted ScrollViews.
    */
   invertStickyHeaders?: ?boolean,
+  /**
+   * Reverses the direction of scroll. Uses native inversion on macOS and scale transforms of -1 elsewhere
+   */
+  inverted?: ?boolean,  
   /**
    * Determines whether the keyboard gets dismissed in response to a drag.
    *
@@ -1758,6 +1762,7 @@ class ScrollView extends React.Component<Props, State> {
             : this.props.removeClippedSubviews
         }
         key={this.state.contentKey} // TODO(macOS GH#774)
+        inverted={this.props.inverted} // TODO(macOS GH#774)
         collapsable={false}
       >
         {children}

Libraries/Lists/FlatList.js

@@ -112,7 +112,7 @@ type OptionalProps<ItemT> = {|
    */
   initialScrollIndex?: ?number,
   /**
-   * Reverses the direction of scroll. Uses scale transforms of -1.
+   * Reverses the direction of scroll. Uses native inversion on macOS and scale transforms of -1 elsewhere
    */
   inverted?: ?boolean,
   /**

Libraries/Lists/VirtualizedList.js

@@ -960,7 +960,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     } = this.props;
     const {data, horizontal} = this.props;
     const isVirtualizationDisabled = this._isVirtualizationDisabled();
-    const inversionStyle = this.props.inverted
+    // macOS natively supports inverted lists, thus not needing an inversion style
+    const inversionStyle = this.props.inverted && Platform.OS !== 'macos' // TODO(macOS GH#774)
       ? horizontalOrDefault(this.props.horizontal)
         ? styles.horizontallyInverted
         : styles.verticallyInverted

React/Views/ScrollView/RCTScrollContentView.h

@@ -11,4 +11,8 @@
 
 @interface RCTScrollContentView : RCTView
 
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+@property (nonatomic, assign, getter=isInverted) BOOL inverted;
+#endif // ]TODO(macOS GH#774)
+
 @end

React/Views/ScrollView/RCTScrollContentView.m

@@ -18,6 +18,12 @@
 #import "RCTScrollView.h"
 
 @implementation RCTScrollContentView
+#if TARGET_OS_OSX // TODO(macOS GH#774)
+- (BOOL)isFlipped
+{
+  return !self.inverted;
+}
+#endif // ]TODO(macOS GH#774)
 
 - (void)reactSetFrame:(CGRect)frame
 {

React/Views/ScrollView/RCTScrollContentViewManager.m

@@ -14,6 +14,8 @@ @implementation RCTScrollContentViewManager
 
 RCT_EXPORT_MODULE()
 
+RCT_EXPORT_OSX_VIEW_PROPERTY(inverted, BOOL) // TODO(macOS GH#774)
+
 - (RCTScrollContentView *)view
 {
   return [RCTScrollContentView new];

React/Views/ScrollView/RCTScrollView.m

@@ -43,6 +43,7 @@ @interface RCTCustomScrollView :
 @property (nonatomic, assign) BOOL pinchGestureEnabled;
 #else // [TODO(macOS GH#774)
 + (BOOL)isCompatibleWithResponsiveScrolling;
+@property (nonatomic, assign, getter=isInverted) BOOL inverted;
 @property (nonatomic, assign, getter=isScrollEnabled) BOOL scrollEnabled;
 @property (nonatomic, strong) NSPanGestureRecognizer *panGestureRecognizer;
 #endif // ]TODO(macOS GH#774)
@@ -549,6 +550,11 @@ - (void)setAccessibilityLabel:(NSString *)accessibilityLabel
 {
   [_scrollView setAccessibilityLabel:accessibilityLabel];
 }
+
+- (void)setInverted:(BOOL)inverted
+{
+  _inverted = inverted;
+}
 #endif // ]TODO(macOS GH#774)
 
 RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -270,6 +270,19 @@ const examples = ([
   },
 ]: Array<RNTesterModuleExample>);
 
+// TODO [(macOS GH#774)
+if (Platform.OS === 'macos') {
+  examples.push({
+    title: '<ScrollView> (inverted = true)\n',
+    description:
+      "You can display <ScrollView>'s child components in inverted order",
+    render: function (): React.Node {
+      return <InvertedContentExample />;
+    },
+  });
+}
+// ]TODO(macOS GH#774)
+
 if (Platform.OS === 'ios') {
   examples.push({
     title: '<ScrollView> smooth bi-directional content loading\n',
@@ -548,6 +561,20 @@ const HorizontalScrollView = (props: {direction: 'ltr' | 'rtl'}) => {
   );
 };
 
+const InvertedContentExample = () => {
+  return (
+    <View>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        contentOffset={{x: 100, y: 0}}
+        inverted={true}  
+        nestedScrollEnabled>
+        {ITEMS.map(createItemRow)}        
+      </ScrollView>
+    </View>
+  );
+};
+
 const EndFillColorFadingEdgeLen = () => {
   const [endFillColor, setEndFillColor] = useState('');
   const [fadingEdgeLen, setFadingEdgeLen] = useState(0);