Fabric iOS: allow using fallback component for unsupported ones

Summary:
This allows an unsupported component to be rendered as a "unimplemented view" for better visualization of which component is missing. It is off by default, but configurable in the component factory.

For now, the layout simply follows regular <View />, which means the width/height etc is based on the react component styling. The side effect is that components with 0 height/width won't show up at all.

Reviewed By: mdvacca

Differential Revision: D14869656

fbshipit-source-id: f31e012fb7dc1c64fcc431ea5aa45079a23a618e

React/Fabric/Mounting/ComponentViews/UnimplementedComponent/RCTUnimplementedNativeComponentView.h

@@ -0,0 +1,18 @@
+/**
+ * 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/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTUnimplementedNativeComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

React/Fabric/Mounting/ComponentViews/UnimplementedComponent/RCTUnimplementedNativeComponentView.mm

@@ -0,0 +1,60 @@
+/**
+ * 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 "RCTUnimplementedNativeComponentView.h"
+
+#import <react/components/rncore/EventEmitters.h>
+#import <react/components/rncore/Props.h>
+#import <react/components/rncore/ShadowNodes.h>
+
+using namespace facebook::react;
+
+@implementation RCTUnimplementedNativeComponentView {
+  UILabel *_label;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentHandle)componentHandle
+{
+  return UnimplementedNativeViewShadowNode::Handle();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const UnimplementedNativeViewProps>();
+    _props = defaultProps;
+
+    CGRect bounds = self.bounds;
+    _label = [[UILabel alloc] initWithFrame:bounds];
+    _label.backgroundColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.3];
+    _label.layoutMargins = UIEdgeInsetsMake(12, 12, 12, 12);
+    _label.lineBreakMode = NSLineBreakByWordWrapping;
+    _label.numberOfLines = 0;
+    _label.textAlignment = NSTextAlignmentCenter;
+    _label.textColor = [UIColor whiteColor];
+
+    self.contentView = _label;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<const UnimplementedNativeViewProps>(oldProps ?: _props);
+  const auto &newViewProps = *std::static_pointer_cast<const UnimplementedNativeViewProps>(props);
+
+  [super updateProps:props oldProps:oldProps];
+
+  if (oldViewProps.name != newViewProps.name) {
+    _label.text = [NSString stringWithFormat:@"'%s' is not Fabric compatible yet.", newViewProps.name.c_str()];
+  }
+}
+
+@end

React/Fabric/Mounting/RCTComponentViewFactory.mm

@@ -17,6 +17,7 @@
 #import "RCTScrollViewComponentView.h"
 #import "RCTSliderComponentView.h"
 #import "RCTSwitchComponentView.h"
+#import "RCTUnimplementedNativeComponentView.h"
 #import "RCTViewComponentView.h"
 
 using namespace facebook::react;
@@ -39,6 +40,7 @@ using namespace facebook::react;
   [componentViewFactory registerComponentViewClass:[RCTActivityIndicatorViewComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTSliderComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTSwitchComponentView class]];
+  [componentViewFactory registerComponentViewClass:[RCTUnimplementedNativeComponentView class]];
 
   return componentViewFactory;
 }