Migrate RefreshControl to Native Commands

Summary:
Changelog: [Internal]

Introduce native command `setNativeRefreshing`, it has the word Native in order to avoid name conflict with setRefreshing in Android implementation. Even this component is iOS only, it would make it easier to merge them in the future.

Introduce `RCTRefreshableProtocol` and make `RCTRefreshControl` and `RCTPullToRefreshViewComponentView` to conform to the protocol so view manager can forward command to both, Paper and Fabric component.

Reviewed By: mmmulani

Differential Revision: D18475804

fbshipit-source-id: 4c19225784efc931b7b8f2d2671cc839bce429bf

Libraries/Components/RefreshControl/PullToRefreshViewNativeComponent.js

@@ -13,9 +13,11 @@
 import type {DirectEventHandler, WithDefault} from '../../Types/CodegenTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
+import * as React from 'react';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
@@ -44,6 +46,19 @@ type NativeProps = $ReadOnly<{|
   refreshing: boolean,
 |}>;
 
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  +setNativeRefreshing: (
+    viewRef: React.ElementRef<ComponentType>,
+    refreshing: boolean,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setNativeRefreshing'],
+});
+
 export default (codegenNativeComponent<NativeProps>('PullToRefreshView', {
   paperComponentName: 'RCTRefreshControl',
 }): HostComponent<NativeProps>);

React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm

@@ -10,12 +10,17 @@
 #import <react/components/rncore/ComponentDescriptors.h>
 #import <react/components/rncore/EventEmitters.h>
 #import <react/components/rncore/Props.h>
+#import <react/components/rncore/RCTComponentViewHelpers.h>
 
 #import <React/RCTConversions.h>
+#import <React/RCTRefreshableProtocol.h>
 #import <React/RCTScrollViewComponentView.h>
 
 using namespace facebook::react;
 
+@interface RCTPullToRefreshViewComponentView () <RCTPullToRefreshViewViewProtocol, RCTRefreshableProtocol>
+@end
+
 @implementation RCTPullToRefreshViewComponentView {
   UIRefreshControl *_refreshControl;
   RCTScrollViewComponentView *_scrollViewComponentView;
@@ -145,4 +150,34 @@ using namespace facebook::react;
   _scrollViewComponentView = nil;
 }
 
+#pragma mark - Native commands
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+  RCTPullToRefreshViewHandleCommand(self, commandName, args);
+}
+
+- (void)setNativeRefreshing:(BOOL)refreshing
+{
+  if (refreshing) {
+    [_refreshControl beginRefreshing];
+  } else {
+    [_refreshControl endRefreshing];
+  }
+}
+
+#pragma mark - RCTRefreshableProtocol
+
+- (void)setRefreshing:(BOOL)refreshing
+{
+  [self setNativeRefreshing:refreshing];
+}
+
+#pragma mark -
+
+- (NSString *)componentViewName_DO_NOT_USE_THIS_IS_BROKEN
+{
+  return @"RefreshControl";
+}
+
 @end

React/Views/RefreshControl/RCTRefreshControl.m

@@ -6,9 +6,13 @@
  */
 
 #import "RCTRefreshControl.h"
+#import "RCTRefreshableProtocol.h"
 
 #import "RCTUtils.h"
 
+@interface RCTRefreshControl () <RCTRefreshableProtocol>
+@end
+
 @implementation RCTRefreshControl {
   BOOL _isInitialRender;
   BOOL _currentRefreshingState;
@@ -45,9 +49,9 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
 
   // If the control is refreshing when mounted we need to call
   // beginRefreshing in layoutSubview or it doesn't work.
-  if (_currentRefreshingState && _isInitialRender) {
+ if (_currentRefreshingState && _isInitialRender) {
     [self beginRefreshingProgrammatically];
-  }
+ }
   _isInitialRender = false;
 }
 

React/Views/RefreshControl/RCTRefreshControlManager.m

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import "RCTRefreshControlManager.h"
+#import <React/RCTUIManager.h>
 
+#import "RCTRefreshControlManager.h"
+#import "RCTRefreshableProtocol.h"
 #import "RCTRefreshControl.h"
 
 @implementation RCTRefreshControlManager
@@ -24,4 +26,17 @@ RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
 
+RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
+{
+  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    UIView *view = viewRegistry[viewTag];
+
+    if ([view conformsToProtocol:@protocol(RCTRefreshableProtocol)]) {
+      [(id<RCTRefreshableProtocol>)view setRefreshing: refreshing];
+    } else {
+      RCTLogError(@"view must conform to protocol RCTRefreshableProtocol");
+    }
+  }];
+}
+
 @end

React/Views/RefreshControl/RCTRefreshableProtocol.h

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+#import <React/RCTComponent.h>
+
+/**
+ * Protocol used to dispatch commands in `RCTRefreshControlManager.h`.
+ * This is in order to support commands for both Paper and Fabric components
+ * during migration.
+ */
+@protocol RCTRefreshableProtocol
+
+- (void)setRefreshing:(BOOL)refreshing;
+
+@end

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/PullToRefreshViewManagerDelegate.java

@@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
 import com.facebook.react.uimanager.BaseViewManagerInterface;
 import com.facebook.react.uimanager.LayoutShadowNode;
@@ -38,4 +39,12 @@ public class PullToRefreshViewManagerDelegate<T extends View, U extends BaseView
         super.setProperty(view, propName, value);
     }
   }
+
+  public void receiveCommand(PullToRefreshViewManagerInterface<T> viewManager, T view, String commandName, ReadableArray args) {
+    switch (commandName) {
+      case "setNativeRefreshing":
+        viewManager.setNativeRefreshing(view, args.getBoolean(0));
+        break;
+    }
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/PullToRefreshViewManagerInterface.java

@@ -17,4 +17,5 @@ public interface PullToRefreshViewManagerInterface<T extends View> {
   void setTitleColor(T view, @Nullable Integer value);
   void setTitle(T view, @Nullable String value);
   void setRefreshing(T view, boolean value);
+  void setNativeRefreshing(T view, boolean refreshing);
 }