Opensourcing RCTWrapper

Summary:
RCTWrapper is a library that allows turn any UIView/UIViewController-based widget into React Native component
which will respect layout constrains of native (wrapped) view.
So, you don't need to explicitly specify width and hight in styling.

Take a look at examples to see how to use RCTWrapper.

Reviewed By: mmmulani

Differential Revision: D5868763

fbshipit-source-id: 0a503b42be166d547ca6cbf0829eea9c75a8e364

Libraries/Wrapper/Example/RCTWrapperExampleView.h

@@ -0,0 +1,11 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperExampleView : UIView
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/Example/RCTWrapperExampleView.m

@@ -0,0 +1,55 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperExampleView.h"
+
+#import <RCTWrapper/RCTWrapper.h>
+
+@implementation RCTWrapperExampleView {
+  NSTimer *_timer;
+  CGSize _intrinsicContentSize;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    self.backgroundColor = [UIColor whiteColor];
+
+    _intrinsicContentSize = CGSizeMake(64, 64);
+    _timer = [NSTimer scheduledTimerWithTimeInterval:1.0
+                                              target:self
+                                            selector:@selector(tick)
+                                            userInfo:nil
+                                             repeats:YES];
+
+    UITapGestureRecognizer *gestureRecognizer =
+      [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tick)];
+    [self addGestureRecognizer:gestureRecognizer];
+  }
+  return self;
+}
+
+- (void)tick
+{
+  _intrinsicContentSize.width = 32 + arc4random() % 128;
+  _intrinsicContentSize.height = 32 + arc4random() % 128;
+
+  [self invalidateIntrinsicContentSize];
+  [self.superview setNeedsLayout];
+}
+
+- (CGSize)intrinsicContentSize
+{
+  return _intrinsicContentSize;
+}
+
+- (CGSize)sizeThatFits:(CGSize)size
+{
+  return CGSizeMake(
+    MIN(size.width, _intrinsicContentSize.width),
+    MIN(size.height, _intrinsicContentSize.height)
+  );
+}
+
+@end
+
+RCT_WRAPPER_FOR_VIEW(RCTWrapperExampleView)

Libraries/Wrapper/Example/RCTWrapperExampleViewController.h

@@ -0,0 +1,11 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperExampleViewController : UIViewController
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/Example/RCTWrapperExampleViewController.m

@@ -0,0 +1,17 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperExampleViewController.h"
+
+#import <RCTWrapper/RCTWrapper.h>
+
+#import "RCTWrapperExampleView.h"
+
+@implementation RCTWrapperExampleViewController
+
+- (void)loadView {
+  self.view = [RCTWrapperExampleView new];
+}
+
+@end
+
+RCT_WRAPPER_FOR_VIEW_CONTROLLER(RCTWrapperExampleViewController)

Libraries/Wrapper/Example/RCTWrapperReactRootViewController.h

@@ -0,0 +1,15 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+@class RCTBridge;
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperReactRootViewController : UIViewController
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge;
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/Example/RCTWrapperReactRootViewController.m

@@ -0,0 +1,42 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperReactRootViewController.h"
+
+#import <RCTWrapper/RCTWrapper.h>
+#import <React/RCTBridge.h>
+#import <React/RCTRootView.h>
+
+#import "RCTWrapperExampleView.h"
+
+@implementation RCTWrapperReactRootViewController {
+  RCTBridge *_bridge;
+}
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super initWithNibName:nil bundle:nil]) {
+    _bridge = bridge;
+  }
+
+  return self;
+}
+
+- (void)loadView
+{
+  RCTRootView *rootView =
+    [[RCTRootView alloc] initWithBridge:_bridge
+                             moduleName:@"WrapperExample"
+                      initialProperties:@{}];
+
+  rootView.backgroundColor = [UIColor whiteColor];
+
+  UIActivityIndicatorView *progressIndicatorView =
+    [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
+  [progressIndicatorView startAnimating];
+  rootView.loadingView = progressIndicatorView;
+
+  rootView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
+  self.view = rootView;
+}
+
+@end

Libraries/Wrapper/Example/RCTWrapperReactRootViewManager.h

@@ -0,0 +1,13 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+#import <RCTWrapper/RCTWrapperViewManager.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperReactRootViewManager : RCTWrapperViewManager
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/Example/RCTWrapperReactRootViewManager.m

@@ -0,0 +1,27 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperReactRootViewManager.h"
+
+#import <RCTWrapper/RCTWrapperView.h>
+#import <RCTWrapper/RCTWrapperViewControllerHostingView.h>
+
+#import "RCTWrapperReactRootViewController.h"
+
+@implementation RCTWrapperReactRootViewManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  RCTWrapperViewControllerHostingView *contentViewControllerHostingView =
+    [RCTWrapperViewControllerHostingView new];
+
+  contentViewControllerHostingView.contentViewController =
+    [[RCTWrapperReactRootViewController alloc] initWithBridge:self.bridge];
+
+  RCTWrapperView *wrapperView = [super view];
+  wrapperView.contentView = contentViewControllerHostingView;
+  return wrapperView;
+}
+
+@end

Libraries/Wrapper/RCTWrapper.h

@@ -0,0 +1,61 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+#import <RCTWrapper/RCTWrapperView.h>
+#import <RCTWrapper/RCTWrapperViewControllerHostingView.h>
+#import <RCTWrapper/RCTWrapperViewManager.h>
+
+// Umbrella header with macros
+
+// RCT_WRAPPER_FOR_VIEW
+#define RCT_WRAPPER_FOR_VIEW(ClassName)                                        \
+                                                                               \
+NS_ASSUME_NONNULL_BEGIN                                                        \
+                                                                               \
+@interface ClassName##Manager : RCTWrapperViewManager                          \
+                                                                               \
+@end                                                                           \
+                                                                               \
+NS_ASSUME_NONNULL_END                                                          \
+                                                                               \
+@implementation ClassName##Manager                                             \
+                                                                               \
+RCT_EXPORT_MODULE()                                                            \
+                                                                               \
+- (UIView *)view                                                               \
+{                                                                              \
+  RCTWrapperView *wrapperView = [super view];                                  \
+  wrapperView.contentView = [ClassName new];                                   \
+  return wrapperView;                                                          \
+}                                                                              \
+                                                                               \
+@end
+
+// RCT_WRAPPER_FOR_VIEW_CONTROLLER
+#define RCT_WRAPPER_FOR_VIEW_CONTROLLER(ClassName)                             \
+                                                                               \
+NS_ASSUME_NONNULL_BEGIN                                                        \
+                                                                               \
+@interface ClassName##Manager : RCTWrapperViewManager                          \
+                                                                               \
+@end                                                                           \
+                                                                               \
+NS_ASSUME_NONNULL_END                                                          \
+                                                                               \
+@implementation ClassName##Manager                                             \
+                                                                               \
+RCT_EXPORT_MODULE()                                                            \
+                                                                               \
+- (UIView *)view                                                               \
+{                                                                              \
+  RCTWrapperViewControllerHostingView *contentViewControllerHostingView =      \
+    [RCTWrapperViewControllerHostingView new];                                 \
+  contentViewControllerHostingView.contentViewController =                     \
+    [[ClassName alloc] initWithNibName:nil bundle:nil];                        \
+  RCTWrapperView *wrapperView = [super view];                                  \
+  wrapperView.contentView = contentViewControllerHostingView;                  \
+  return wrapperView;                                                          \
+}                                                                              \
+                                                                               \
+@end

Libraries/Wrapper/RCTWrapperShadowView.h

@@ -0,0 +1,17 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTShadowView.h>
+
+@class RCTBridge;
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperShadowView : RCTShadowView
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/RCTWrapperShadowView.m

@@ -0,0 +1,123 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperShadowView.h"
+
+#import <React/RCTBridge.h>
+#import <React/RCTUIManager.h>
+
+#import "RCTWrapperView.h"
+
+@implementation RCTWrapperShadowView
+{
+  __weak RCTBridge *_bridge;
+  RCTWrapperMeasureBlock _measureBlock;
+  CGSize _intrinsicContentSize;
+}
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super init]) {
+    _bridge = bridge;
+    YGNodeSetMeasureFunc(self.yogaNode, RCTWrapperShadowViewMeasure);
+  }
+
+  return self;
+}
+
+static YGSize RCTWrapperShadowViewMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode)
+{
+  CGSize minimumSize = CGSizeMake(0, 0);
+  CGSize maximumSize = CGSizeMake(INFINITY, INFINITY);
+
+  switch (widthMode) {
+    case YGMeasureModeUndefined:
+      break;
+    case YGMeasureModeExactly:
+      minimumSize.width = width;
+      maximumSize.width = width;
+      break;
+    case YGMeasureModeAtMost:
+      maximumSize.width = width;
+      break;
+  }
+
+  switch (heightMode) {
+    case YGMeasureModeUndefined:
+      break;
+    case YGMeasureModeExactly:
+      minimumSize.height = height;
+      maximumSize.height = height;
+      break;
+    case YGMeasureModeAtMost:
+      maximumSize.height = height;
+      break;
+  }
+
+  RCTWrapperShadowView *shadowView = (__bridge RCTWrapperShadowView *)YGNodeGetContext(node);
+  CGSize size = [shadowView measureWithMinimumSize:minimumSize maximumSize:maximumSize];
+  return (YGSize){size.width, size.height};
+}
+
+- (CGSize)measureWithMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximumSize
+{
+  dispatch_time_t timeout = dispatch_time(DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC);
+
+  if (!_measureBlock) {
+    RCTBridge *bridge = _bridge;
+    __block RCTWrapperMeasureBlock measureBlock;
+    NSNumber *reactTag = self.reactTag;
+
+    dispatch_semaphore_t semaphore = dispatch_semaphore_create(0);
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      RCTUIManager *uiManager = bridge.uiManager;
+      RCTWrapperView *view = (RCTWrapperView *)[uiManager viewForReactTag:reactTag];
+      measureBlock = view.measureBlock;
+
+      dispatch_semaphore_signal(semaphore);
+    });
+
+    if (dispatch_semaphore_wait(semaphore, timeout)) {
+      RCTLogError(@"Unable to retrieve `measureBlock` for view (%@) because the main thread is busy.", self);
+    }
+
+    _measureBlock = measureBlock;
+  }
+
+  if (!_measureBlock) {
+    return maximumSize;
+  }
+
+  __block CGSize size = maximumSize;
+
+  dispatch_semaphore_t semaphore = dispatch_semaphore_create(0);
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    size = self->_measureBlock(minimumSize, maximumSize);
+    dispatch_semaphore_signal(semaphore);
+  });
+
+  if (dispatch_semaphore_wait(semaphore, timeout)) {
+    RCTLogError(@"Unable to compute layout for view (%@) because the main thread is busy.", self);
+  }
+
+  return size;
+}
+
+- (BOOL)isYogaLeafNode
+{
+  return YES;
+}
+
+- (CGSize)intrinsicContentSize
+{
+  return _intrinsicContentSize;
+}
+
+- (void)setIntrinsicContentSize:(CGSize)size
+{
+  _intrinsicContentSize = size;
+  YGNodeMarkDirty(self.yogaNode);
+}
+
+@end

Libraries/Wrapper/RCTWrapperView.h

@@ -0,0 +1,31 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+typedef CGSize (^RCTWrapperMeasureBlock)(CGSize minimumSize, CGSize maximumSize);
+
+@class RCTBridge;
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperView : UIView
+
+@property (nonatomic, retain, nullable) UIView *contentView;
+@property (nonatomic, readonly) RCTWrapperMeasureBlock measureBlock;
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
+
+#pragma mark - Restrictions
+
+- (instancetype)init NS_UNAVAILABLE;
+- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
+- (instancetype)initWithCoder:(NSCoder *)decoder NS_UNAVAILABLE;
+
+- (void)addSubview:(UIView *)view NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview NS_UNAVAILABLE;
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/RCTWrapperView.m

@@ -0,0 +1,93 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperView.h"
+
+#import <React/RCTBridge.h>
+#import <React/RCTUIManager.h>
+
+@implementation RCTWrapperView {
+  __weak RCTBridge *_bridge;
+}
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super initWithFrame:CGRectZero]) {
+    _bridge = bridge;
+    __weak __typeof(self) weakSelf = self;
+
+    _measureBlock = ^(CGSize minimumSize, CGSize maximumSize) {
+      __typeof(self) strongSelf = weakSelf;
+
+      if (!strongSelf) {
+        return maximumSize;
+      }
+
+      CGSize size = [strongSelf sizeThatFits:maximumSize];
+
+      return CGSizeMake(
+        MAX(size.width, minimumSize.width),
+        MAX(size.height, minimumSize.height)
+      );
+    };
+  }
+
+  return self;
+}
+
+#pragma mark - `contentView`
+
+- (nullable UIView *)contentView
+{
+  return self.subviews.firstObject;
+}
+
+- (void)setContentView:(UIView *)contentView
+{
+  while (self.subviews.firstObject) {
+    [self.subviews.firstObject removeFromSuperview];
+  }
+
+  if (!contentView) {
+    return;
+  }
+
+  [super addSubview:contentView];
+
+  contentView.frame = self.bounds;
+  contentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+  contentView.translatesAutoresizingMaskIntoConstraints = YES;
+}
+
+#pragma mark - Layout
+
+- (void)setNeedsLayout
+{
+  [super setNeedsLayout];
+  [self invalidateIntrinsicContentSize];
+}
+
+- (void)invalidateIntrinsicContentSize
+{
+  [super invalidateIntrinsicContentSize];
+
+  // Setting `intrinsicContentSize` dirties the Yoga node and
+  // enfoce Yoga to call `measure` function (backed to `measureBlock`).
+  [_bridge.uiManager setIntrinsicContentSize:self.intrinsicContentSize forView:self];
+}
+
+- (CGSize)intrinsicContentSize
+{
+  return [self sizeThatFits:CGSizeMake(INFINITY, INFINITY)];
+}
+
+- (CGSize)sizeThatFits:(CGSize)size
+{
+  UIView *contentView = self.contentView;
+  if (!contentView) {
+    return size;
+  }
+
+  return [contentView sizeThatFits:size];
+}
+
+@end

Libraries/Wrapper/RCTWrapperViewControllerHostingView.h

@@ -0,0 +1,20 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperViewControllerHostingView : UIView
+
+@property (nonatomic, retain, nullable) UIViewController *contentViewController;
+
+#pragma mark - Restrictions
+
+- (void)addSubview:(UIView *)view NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview NS_UNAVAILABLE;
+- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview NS_UNAVAILABLE;
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/RCTWrapperViewControllerHostingView.m

@@ -0,0 +1,129 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperViewControllerHostingView.h"
+
+#import <React/UIView+React.h>
+
+#pragma mark - UIViewController+Children
+
+@interface UIViewController (Children)
+
+@property (nonatomic, readonly) BOOL isAttached;
+- (void)attachChildViewController:(UIViewController *)childViewController toContainerView:(UIView *)containerView;
+- (void)detachChildViewController:(UIViewController *)childViewController;
+
+@end
+
+@implementation UIViewController (Children)
+
+- (BOOL)isAttached
+{
+  return self.parentViewController != nil;
+}
+
+- (void)attachChildViewController:(UIViewController *)childViewController toContainerView:(UIView *)containerView
+{
+  [self addChildViewController:childViewController];
+  // `[childViewController willMoveToParentViewController:self]` is calling automatically
+  [containerView addSubview:childViewController.view];
+  childViewController.view.frame = containerView.bounds;
+  childViewController.view.translatesAutoresizingMaskIntoConstraints = YES;
+  childViewController.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+  [childViewController didMoveToParentViewController:self];
+
+  [childViewController beginAppearanceTransition:true animated:false];
+  [childViewController endAppearanceTransition];
+}
+
+- (void)detachChildViewController:(UIViewController *)childViewController
+{
+  [childViewController beginAppearanceTransition:false animated: false];
+  [childViewController endAppearanceTransition];
+
+  [childViewController willMoveToParentViewController:nil];
+  [childViewController.view removeFromSuperview];
+  [childViewController removeFromParentViewController];
+  // `[childViewController didMoveToParentViewController:nil]` is calling automatically
+}
+
+@end
+
+@implementation RCTWrapperViewControllerHostingView {
+  UIViewController *_Nullable _contentViewController;
+}
+
+#pragma mark - `contentViewController`
+
+- (nullable UIViewController *)contentViewController
+{
+  return _contentViewController;
+}
+
+- (void)setContentViewController:(UIViewController *)contentViewController
+{
+
+  if (_contentViewController) {
+    [self detachContentViewControllerIfNeeded];
+  }
+
+  _contentViewController = contentViewController;
+
+  if (_contentViewController) {
+    [self attachContentViewControllerIfNeeded];
+  }
+}
+
+#pragma mark - Attaching and Detaching
+
+- (void)attachContentViewControllerIfNeeded
+{
+  if (self.contentViewController.isAttached) {
+    return;
+  }
+
+  [self.reactViewController attachChildViewController:self.contentViewController toContainerView:self];
+}
+
+- (void)detachContentViewControllerIfNeeded
+{
+  if (!self.contentViewController.isAttached) {
+    return;
+  }
+
+  [self.reactViewController detachChildViewController:self.contentViewController];
+}
+
+#pragma mark - Life cycle
+
+- (void)willMoveToWindow:(UIWindow *)newWindow
+{
+  if (newWindow == nil) {
+    [self detachContentViewControllerIfNeeded];
+  }
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  [self attachContentViewControllerIfNeeded];
+}
+
+#pragma mark - Layout
+
+- (void)setNeedsLayout
+{
+  [super setNeedsLayout];
+  [self.superview setNeedsLayout];
+}
+
+- (CGSize)intrinsicContentSize
+{
+  return self.contentViewController.view.intrinsicContentSize;
+}
+
+- (CGSize)sizeThatFits:(CGSize)size
+{
+  return [self.contentViewController.view sizeThatFits:size];
+}
+
+@end

Libraries/Wrapper/RCTWrapperViewManager.h

@@ -0,0 +1,15 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <React/RCTViewManager.h>
+
+@class RCTWrapperView;
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTWrapperViewManager : RCTViewManager
+
+- (RCTWrapperView *)view NS_REQUIRES_SUPER;
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Wrapper/RCTWrapperViewManager.m

@@ -0,0 +1,22 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTWrapperViewManager.h"
+
+#import "RCTWrapperShadowView.h"
+#import "RCTWrapperView.h"
+
+@implementation RCTWrapperViewManager
+
+RCT_EXPORT_MODULE()
+
+- (RCTShadowView *)shadowView
+{
+  return [[RCTWrapperShadowView alloc] initWithBridge:self.bridge];
+}
+
+- (UIView *)view
+{
+  return [[RCTWrapperView alloc] initWithBridge:self.bridge];
+}
+
+@end