feat(iOS, SplitView) Setup basic logic for custom ShadowNodes (#172)

## Description

This PR is adding a basic setup for `RNSSplitViewScreenShadowNode` which
is responsible for aligning (x, y) offsets in Shadow tree relatively to
native layout metrics.

This PR is also adding another controller
`RNSSplitViewNavigationController`. According to the doc:
https://developer.apple.com/documentation/uikit/uisplitviewcontroller#Child-view-controllers
- we can wrap our components in custom NavigationController. In our case
`RNSSplitViewNavigationController` is responsible for attaching
`NSKeyValueObservation` for `frame`. It's necessary to track updates
this way, as `layoutSubviews` won't be called when we're showing or
hiding columns, because their width remains constant, no layout update
is needed and only origin for our component (and its children
relatively) is updated by some (x, y) vector.

## Changes

- Updated SplitViewBaseApp
- Added necessary logic for new ShadowNode in common directory 
- Updated SplitView native implementation to read and pass layout to
ShadowNode

## Test code and steps to reproduce

At the moment, TestSplitView is covering all cases, for testing
purposes. Until we have some props supported, I'd recommend overriding
SplitView props directly on the native side in
`RNSSplitViewHostController`

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Closes: #180

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: t0maboro

apps/src/tests/TestSplitView/SplitViewBaseApp.tsx

@@ -1,22 +1,44 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
+import PressableWithFeedback from '../../shared/PressableWithFeedback';
 import { Colors } from '../../shared/styling/Colors';
 
+const TestButton = ({ setButtonState }) => {
+  return (
+    <PressableWithFeedback
+      onPress={() => setButtonState('Pressed')}
+      onPressIn={() => setButtonState('Pressed In')}
+      onPressOut={() => setButtonState('Pressed Out')}
+      style={styles.button}>
+      <Text style={styles.text}>Touch me</Text>
+    </PressableWithFeedback>
+  )
+}
+
 const SplitViewBaseApp = () => {
+  const [buttonState, setButtonState] = React.useState('Initial');
+  const [buttonState2, setButtonState2] = React.useState('Initial');
+  const [buttonState3, setButtonState3] = React.useState('Initial');
+
   return (
     <SplitViewHost>
       <SplitViewScreen>
-        <View style={[styles.container, { backgroundColor: Colors.RedDark100 }]} />
+        <View style={[styles.container, { backgroundColor: Colors.RedDark100 }]}>
+          <TestButton setButtonState={setButtonState} />
+          {buttonState && (<Text style={styles.text}>Button State: {buttonState}</Text>)}
+        </View>
       </SplitViewScreen>
       <SplitViewScreen>
-        <View style={[styles.container, { backgroundColor: Colors.YellowDark100 }]} />
+        <View style={[styles.container, { backgroundColor: Colors.YellowDark100 }]}>
+          <TestButton setButtonState={setButtonState2} />
+          {buttonState2 && (<Text style={styles.text}>Button State: {buttonState2}</Text>)}
+        </View>
       </SplitViewScreen>
       <SplitViewScreen>
         <View style={[styles.container, { backgroundColor: Colors.White }]}>
-          <Text style={styles.text}>
-            Basic demo for splitView application
-          </Text>
+          <TestButton setButtonState={setButtonState3} />
+          {buttonState3 && (<Text style={styles.text}>Button State: {buttonState3}</Text>)}
         </View>
       </SplitViewScreen>
     </SplitViewHost>
@@ -36,6 +58,13 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 24
+  },
+  button: {
+    width: 120,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.BlueDark100
   }
 })
 

common/cpp/react/renderer/components/rnscreens/RNSSplitViewScreenComponentDescriptor.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif // ANDROID
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSSplitViewScreenShadowNode.h"
+
+namespace facebook::react {
+
+class RNSSplitViewScreenComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNSSplitViewScreenShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(
+        dynamic_cast<RNSSplitViewScreenShadowNode *>(&shadowNode));
+    auto &splitViewScreenShadowNode =
+        static_cast<RNSSplitViewScreenShadowNode &>(shadowNode);
+
+    react_native_assert(
+        dynamic_cast<YogaLayoutableShadowNode *>(&splitViewScreenShadowNode));
+    auto &layoutableShadowNode =
+        static_cast<YogaLayoutableShadowNode &>(splitViewScreenShadowNode);
+
+    auto state = std::static_pointer_cast<
+        const RNSSplitViewScreenShadowNode::ConcreteState>(
+        shadowNode.getState());
+    auto stateData = state->getData();
+
+    if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
+      layoutableShadowNode.setSize(stateData.frameSize);
+    }
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnscreens/RNSSplitViewScreenShadowNode.cpp

@@ -0,0 +1,13 @@
+#include "RNSSplitViewScreenShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNSSplitViewScreenComponentName[] = "RNSSplitViewScreen";
+
+Point RNSSplitViewScreenShadowNode::getContentOriginOffset(
+    bool /*includeTransform*/) const {
+  auto stateData = getStateData();
+  return stateData.contentOffset;
+}
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnscreens/RNSSplitViewScreenShadowNode.h

@@ -0,0 +1,31 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnscreens/EventEmitters.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include "RNSSplitViewScreenState.h"
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char RNSSplitViewScreenComponentName[];
+
+using ConcreteViewShadowNodeSuperType = ConcreteViewShadowNode<
+    RNSSplitViewScreenComponentName,
+    RNSSplitViewScreenProps,
+    RNSSplitViewScreenEventEmitter,
+    RNSSplitViewScreenState>;
+
+class JSI_EXPORT RNSSplitViewScreenShadowNode final
+    : public ConcreteViewShadowNodeSuperType {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+#pragma mark - ShadowNode overrides
+
+  Point getContentOriginOffset(bool includeTransform) const override;
+};
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnscreens/RNSSplitViewScreenState.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#if defined(ANDROID)
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif // ANDROID
+
+namespace facebook::react {
+
+class JSI_EXPORT RNSSplitViewScreenState final {
+ public:
+  using Shared = std::shared_ptr<const RNSSplitViewScreenState>;
+
+  RNSSplitViewScreenState(){};
+  RNSSplitViewScreenState(Size frameSize_, Point contentOffset_)
+      : frameSize(frameSize_), contentOffset(contentOffset_){};
+
+  const Size frameSize{};
+  const Point contentOffset{};
+
+#if defined(ANDROID)
+  RNSSplitViewScreenState(
+      const RNSSplitViewScreenState &previousState,
+      folly::dynamic data) {}
+  folly::dynamic getDynamic() const {
+    return {};
+  }
+#endif
+};
+
+} // namespace facebook::react

ios/bridging/RNSReactBaseView.h

@@ -14,7 +14,7 @@ NS_ASSUME_NONNULL_END
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNSReactBaseView
+@interface RNSReactBaseView : UIView
 @end
 
 NS_ASSUME_NONNULL_END

ios/gamma/split-view/RNSSplitViewHostController.swift

@@ -41,9 +41,15 @@ public class RNSSplitViewHostController: UISplitViewController, ReactMountingTra
 
     let currentSubviews =
       splitViewHostComponentView.reactSubviews() as! [RNSSplitViewScreenComponentView]
-    let currentViewControllers = currentSubviews.map { $0.controller }
+    let currentViewControllers = currentSubviews.map {
+      RNSSplitViewNavigationController(rootViewController: $0.controller)
+    }
 
     viewControllers = currentViewControllers
+    
+    for controller in currentViewControllers {
+      controller.viewFrameOriginChangeObserver = self
+    }
 
     needsChildViewControllersUpdate = false
   }
@@ -60,3 +66,31 @@ public class RNSSplitViewHostController: UISplitViewController, ReactMountingTra
     updateChildViewControllersIfNeeded()
   }
 }
+
+extension RNSSplitViewHostController {
+  var splitViewScreenControllers: [RNSSplitViewScreenController] {
+    return viewControllers.lazy.map { viewController in
+      assert(
+        viewController is RNSSplitViewNavigationController,
+        "[RNScreens] Expected RNSSplitViewNavigationController but got \(type(of: viewController))")
+
+      let splitViewNavigationController = viewController as! RNSSplitViewNavigationController
+      let splitViewNavigationControllerTopViewController = splitViewNavigationController
+        .topViewController
+      assert(
+        splitViewNavigationControllerTopViewController is RNSSplitViewScreenController,
+        "[RNScreens] Expected RNSSplitViewScreenController but got \(type(of: splitViewNavigationControllerTopViewController))"
+      )
+
+      return splitViewNavigationControllerTopViewController as! RNSSplitViewScreenController
+    }
+  }
+}
+
+extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameObserver {
+  func splitViewNavCtrlViewDidChangeFrameOrigin(_ splitViewNavCtrl: RNSSplitViewNavigationController) {
+    for controller in self.splitViewScreenControllers {
+      controller.columnPositioningDidChangeIn(splitViewController: self)
+    }
+  }
+}

ios/gamma/split-view/RNSSplitViewNavigationController.swift

@@ -0,0 +1,30 @@
+import Foundation
+import UIKit
+
+protocol RNSSplitViewNavigationControllerViewFrameObserver: AnyObject {
+  func splitViewNavCtrlViewDidChangeFrameOrigin(_ splitViewNavCtrl: RNSSplitViewNavigationController)
+}
+
+@objc
+public class RNSSplitViewNavigationController: UINavigationController {
+  private var viewFrameObservation: NSKeyValueObservation?
+  weak var viewFrameOriginChangeObserver: RNSSplitViewNavigationControllerViewFrameObserver?
+
+  override public func viewDidLoad() {
+    super.viewDidLoad()
+
+    viewFrameObservation?.invalidate()
+    viewFrameObservation = self.view.observe(\.frame, options: [.old, .new]) {
+      [weak self] (view, change) in
+      guard let oldFrame = change.oldValue, let newFrame = change.newValue else { return }
+
+      if oldFrame.origin != newFrame.origin {
+        self?.onViewOriginChange()
+      }
+    }
+  }
+
+  private func onViewOriginChange() {
+    viewFrameOriginChangeObserver?.splitViewNavCtrlViewDidChangeFrameOrigin(self)
+  }
+}

ios/gamma/split-view/RNSSplitViewScreenComponentView.h

@@ -1,4 +1,5 @@
 #import "RNSReactBaseView.h"
+#import "RNSSplitViewScreenShadowStateProxy.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
@@ -10,4 +11,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
+#pragma mark - ShadowTreeState
+
+@interface RNSSplitViewScreenComponentView ()
+
+- (nonnull RNSSplitViewScreenShadowStateProxy *)shadowStateProxy;
+
+@end
+
 NS_ASSUME_NONNULL_END

ios/gamma/split-view/RNSSplitViewScreenComponentView.mm

@@ -1,13 +1,14 @@
 #import "RNSSplitViewScreenComponentView.h"
 #import <React/RCTAssert.h>
-#import <react/renderer/components/rnscreens/ComponentDescriptors.h>
+#import <rnscreens/RNSSplitViewScreenComponentDescriptor.h>
 
 #import "Swift-Bridging.h"
 
 namespace react = facebook::react;
 
 @implementation RNSSplitViewScreenComponentView {
   RNSSplitViewScreenController *_Nullable _controller;
+  RNSSplitViewScreenShadowStateProxy *_Nonnull _shadowStateProxy;
 }
 
 - (RNSSplitViewScreenController *)controller
@@ -31,6 +32,8 @@ - (instancetype)initWithFrame:(CGRect)frame
 - (void)initState
 {
   [self setupController];
+
+  _shadowStateProxy = [RNSSplitViewScreenShadowStateProxy new];
 }
 
 - (void)setupController
@@ -39,6 +42,14 @@ - (void)setupController
   _controller.view = self;
 }
 
+#pragma mark - ShadowTreeState
+
+- (nonnull RNSSplitViewScreenShadowStateProxy *)shadowStateProxy
+{
+  RCTAssert(_shadowStateProxy != nil, @"[RNScreens] Attempt to access uninitialized _shadowStateProxy");
+  return _shadowStateProxy;
+}
+
 #pragma mark - RCTViewComponentViewProtocol
 
 + (react::ComponentDescriptorProvider)componentDescriptorProvider
@@ -53,6 +64,13 @@ + (BOOL)shouldBeRecycled
   return NO;
 }
 
+- (void)updateState:(react::State::Shared const &)state oldState:(react::State::Shared const &)oldState
+{
+  [super updateState:state oldState:oldState];
+
+  [_shadowStateProxy updateState:state oldState:oldState];
+}
+
 @end
 
 Class<RCTComponentViewProtocol> RNSSplitViewScreenCls(void)