[Preview] feat: support new architecture with rn 0.79

[haileyok]

Summary

This is more of a PR for visibility than it is a PR for actually getting merged. It's fairly messy and touches a lot. It also will be, admittedly, annoying to maintain as e.g. new React Native versions are released. However, it is the only way that I have been able to get the full feature set that worked with Paper to work with Fabric. Someone who is more in tune with e.g. shadow nodes as well as the main React Native TextInput implementation might have a cleaner way of getting this to work.

We do a few things here:

• Upgrade the example app to run React Native 0.79
• Apply the changes from this PR to fix the iOS version
• Update the codegen config to use the included generated files, rather than having it generated on app build
  • Also add a react-native.config.js to set the CMakeLists.txt path
• Implement shadow node, component descriptor, and props from https://github.com/facebook/react-native/tree/v0.79.3/packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput

Without the last step, at least two basic functionalities of a base <TextInput> are broken with <PasteTextInput>:

• Multiline inputs do not properly resize, as the shadow node currently has no logic for measuring the text content
• Rendering <Text> components as children of <PasteTextInput> does not work, for similar reasons (no logic implemented inside of the shadow node for state updates)

Again, I don't expect this to get merged as-is, however I hope that it can serve as a guide for someone who has the time and willingness to do it "correctly". Likely:

• We can significantly prune down the copy/pasted ShadowNode logic, but almost certainly can prune down or simply subclass the Props and CompoenentDescriptor?
• Share most of the cpp files across both platforms, with specific shadow node implementations for the two platforms as needed. E.g. Props could be shared.

I am personally willing - if I find more time... - to implement any suggestions others have along these lines if feedback is left.

I've tagged https://github.com/bluesky-social/react-native-paste-input with the tag rn-079 for those who wish to test this themselves.

Ticket Link

#47

[Ashoat]

Just wanted to chip in here to say that I tested this and it works 100% for me!

[mattermost-build]

This PR has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

[aminerol]

Hey, thanks so much for the awesome work on this!

I’ve been working on upgrading to React Native 0.79, and the PasteInput package was a blocker — this PR made the upgrade possible, so I really appreciate it.

Just a heads-up: if your project uses static frameworks (which some libraries like Firebase require), the app won’t compile due to some missing header files.

How to Reproduce (with Expo):
If you're using expo-build-properties, enable static frameworks by adding the following plugin config:

[
  "expo-build-properties",
  {
    ios: {
      useFrameworks: "static"
    }
  }
]

Possible Fix:
Add the missing headers to HEADER_SEARCH_PATHS.

[haileyok]

@aminerol Ah, some people had an issue with this in another library that I maintain, and I believe this diff is what fixed it. I suppose a similar change to the podspec needs to be made here?

https://github.com/bluesky-social/react-native-uitextview/pull/33/files#diff-1e8a98196ae739825672653b5459d7dcf62aba37be961908f457410f00fc30e7R28-R33

[aminerol]

Hey @haileyok, thanks for prompt response, indeed that diff fixed one missing header file which is related to textlayoutmanager.

Although i needed to add one more path to that diff related to iostextinput which is react/renderer/components/textinput/platform/ios

This is the final patch that made the project compiles again

diff --git a/node_modules/@mattermost/react-native-paste-input/ios/generated/PasteTextInputSpecs/ShadowNodes.h b/node_modules/@mattermost/react-native-paste-input/ios/generated/PasteTextInputSpecs/ShadowNodes.h
index 834f04e..422909e 100644
--- a/node_modules/@mattermost/react-native-paste-input/ios/generated/PasteTextInputSpecs/ShadowNodes.h
+++ b/node_modules/@mattermost/react-native-paste-input/ios/generated/PasteTextInputSpecs/ShadowNodes.h
@@ -14,7 +14,7 @@
 #include "Props.h"
 #include "States.h"
 #include <react/renderer/attributedstring/AttributedString.h>
-#include <react/renderer/components/iostextinput/TextInputState.h>
+#include <react/renderer/components/textinput/TextInputState.h>
 #include <react/renderer/components/text/BaseTextShadowNode.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 #include <react/renderer/textlayoutmanager/TextLayoutManager.h>
diff --git a/node_modules/@mattermost/react-native-paste-input/react-native-paste-input.podspec b/node_modules/@mattermost/react-native-paste-input/react-native-paste-input.podspec
index c1bf3dd..797195e 100644
--- a/node_modules/@mattermost/react-native-paste-input/react-native-paste-input.podspec
+++ b/node_modules/@mattermost/react-native-paste-input/react-native-paste-input.podspec
@@ -17,4 +17,9 @@ Pod::Spec.new do |s|
   s.private_header_files = "ios/**/*.h"
 
   install_modules_dependencies(s)
+
+  add_dependency(s, "React-FabricComponents", :additional_framework_paths => [
+    "react/renderer/textlayoutmanager/platform/ios",
+    "react/renderer/components/textinput/platform/ios",
+  ])
 end