feat(ios): add Fabric support (#657)

* Initial changes

* test fabric in CI

* Sending picker size to shadow node

* Fix E2E config

* Update Xcode in CI

* Adding more comments

* cleanup

Co-authored-by: Alfonso Curbelo <alfonso.curbelo@coinbase.com>

Author: alfonsocj

.circleci/config.yml

@@ -33,7 +33,7 @@ jobs:
   e2e_release_ios:
     executor:
       name: rn/macos
-      xcode_version: '13.1.0'
+      xcode_version: '14.0.0'
     steps:
       - checkout
       - run:
@@ -52,9 +52,6 @@ jobs:
           name: bundle js
       - rn/pod_install:
           pod_install_directory: 'example/ios'
-      - run:
-          command: curl https://raw.githubusercontent.com/facebook/react-native/6334ac35ac3cbc2c84b2d46d46ec118bf9bf714d/scripts/find-node.sh > node_modules/react-native/scripts/find-node.sh
-          name: fix issue with nvm # will be fixed in RN 67 (https://github.com/react-native-community/upgrade-support/issues/138)
       - run:
           command: yarn detox:ios:build:release
           name: build app for e2e tests

.gitignore

@@ -28,6 +28,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
+IDEWorkspaceChecks.plist
 
 #Detox
 #

CONTRIBUTING.md

@@ -68,3 +68,30 @@ An existing Android emulator is required to match the name defined in `detox.con
   yarn detox:android:build:release
   yarn detox:android:test:release
   ```
+
+### Fabric
+
+Fabric is the new React Native rendering system ([read more about it here](https://reactnative.dev/architecture/fabric-renderer)).
+
+#### iOS
+
+```
+yarn start
+cd "example/ios" && RCT_NEW_ARCH_ENABLED=1 npx pod-install && cd -
+yarn start:ios
+```
+
+If you want to go back to the old renderer (Paper), 
+remove `ios/build`, run `pod-install` without the `RCT_NEW_ARCH_ENABLED=1` and build again
+
+```
+rm -r "example/ios/build"
+cd "example/ios" && npx pod-install && cd -
+yarn start:ios
+```
+
+
+#### Android
+
+The date time picker does not have a native UI component for Android but a native module.
+([read more about native modules here](https://reactnative.dev/docs/native-modules-intro)).

RNDateTimePicker.podspec

@@ -1,5 +1,7 @@
 require 'json'
 
+fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
@@ -12,8 +14,35 @@ Pod::Spec.new do |s|
   s.homepage     = package['homepage']
   s.platform     = :ios, "11.0"
   s.source       = { :git => "https://github.com/react-native-community/datetimepicker", :tag => "v#{s.version}" }
-  s.source_files = "ios/*.{h,m}"
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
   s.requires_arc = true
 
-  s.dependency "React-Core"
+  if fabric_enabled
+    folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig = {
+      'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native" "$(PODS_ROOT)/RCT-Folly"',
+      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    
+    s.dependency "React"
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+
+    s.subspec "cpp" do |ss|
+      ss.source_files         = "cpp/**/*.{cpp,h}"
+      ss.header_dir           = "rndatetimepicker"
+      ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp\"" }
+    end
+
+  else
+    s.exclude_files = "ios/fabric"
+
+    s.dependency "React-Core"
+  end
 end

cpp/react/renderer/components/RNDateTimePicker/ComponentDescriptors.h

@@ -0,0 +1,42 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ * and copied to the cpp directory to override the adopt function and set the size of the shadow node based
+ * on the state.
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include "ShadowNodes.h"
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+class RNDateTimePickerComponentDescriptor final : public ConcreteComponentDescriptor<RNDateTimePickerShadowNode> {
+  public:
+    using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+    void adopt(ShadowNode::Unshared const &shadowNode) const override {
+      react_native_assert(std::dynamic_pointer_cast<RNDateTimePickerShadowNode>(shadowNode));
+      auto pickerShadowNode = std::static_pointer_cast<RNDateTimePickerShadowNode>(shadowNode);
+
+      react_native_assert(
+        std::dynamic_pointer_cast<YogaLayoutableShadowNode>(pickerShadowNode));
+      auto layoutableShadowNode =
+        std::static_pointer_cast<YogaLayoutableShadowNode>(pickerShadowNode);
+
+      auto state = std::static_pointer_cast<const RNDateTimePickerShadowNode::ConcreteState>(shadowNode->getState());
+      auto stateData = state->getData();
+        
+      if(stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
+        layoutableShadowNode->setSize(Size{stateData.frameSize.width, stateData.frameSize.height});
+      }
+
+      ConcreteComponentDescriptor::adopt(shadowNode);
+    }
+};
+
+} // namespace react
+} // namespace facebook

cpp/react/renderer/components/RNDateTimePicker/RNDateTimePickerState.cpp

@@ -0,0 +1,12 @@
+/**
+ * Custom state to store frameSize that the component descriptor will use to modify the
+ * shadow node layout.
+ */
+
+#include "RNDateTimePickerState.h"
+
+namespace facebook {
+namespace react {
+
+} // namespace react
+} // namespace facebook

cpp/react/renderer/components/RNDateTimePicker/RNDateTimePickerState.h

@@ -0,0 +1,23 @@
+/**
+ * Custom state to store frameSize that the component descriptor will use to modify the
+ * shadow node layout.
+ */
+
+#pragma once
+
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+class RNDateTimePickerState final {
+  public:
+    using Shared = std::shared_ptr<const RNDateTimePickerState>;
+    RNDateTimePickerState(){};
+    RNDateTimePickerState(Size frameSize_) : frameSize(frameSize_){};
+    
+    Size frameSize{};
+};
+
+} // namespace react
+} // namespace facebook

cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.cpp

@@ -0,0 +1,17 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen) 
+ * and copied to the cpp directory to add custom state and set shadow node trait as a LeafYogaNode.
+ *
+ * @generated by codegen project: GenerateShadowNodeCpp.js
+ */
+
+#include "ShadowNodes.h"
+
+namespace facebook {
+namespace react {
+
+extern const char RNDateTimePickerComponentName[] = "RNDateTimePicker";
+
+} // namespace react
+} // namespace facebook

cpp/react/renderer/components/RNDateTimePicker/ShadowNodes.h

@@ -0,0 +1,39 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen)
+ * and copied to the cpp directory to add custom state and set shadow node trait as a LeafYogaNode.
+ *
+ * @generated by codegen project: GenerateShadowNodeH.js
+ */
+
+#pragma once
+
+#include "RNDateTimePickerState.h"
+#include <react/renderer/components/RNDateTimePicker/EventEmitters.h>
+#include <react/renderer/components/RNDateTimePicker/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char RNDateTimePickerComponentName[];
+
+/*
+ * `ShadowNode` for <RNDateTimePicker> component.
+ */
+class JSI_EXPORT RNDateTimePickerShadowNode final : public ConcreteViewShadowNode<RNDateTimePickerComponentName, RNDateTimePickerProps, RNDateTimePickerEventEmitter, RNDateTimePickerState> {
+
+public:
+    using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+    static ShadowNodeTraits BaseTraits() {
+        auto traits = ConcreteViewShadowNode::BaseTraits();
+        traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+        return traits;
+    }
+};
+
+} // namespace react
+} // namespace facebook

example/App.js

@@ -12,7 +12,7 @@ import {
   Switch,
 } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import SegmentedControl from '@react-native-segmented-control/segmented-control';
+import SegmentedControl from './SegmentedControl';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import React, {useRef, useState} from 'react';
 import {Picker} from 'react-native-windows';