support RN 74 on iOS (#90)

Co-authored-by: Ryan Wang <ryanwang@fullstory.com>
fullstorydev · May 6, 2024 · 39d883e · 39d883e
1 parent 6e6c630
commit 39d883e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@react-native/eslint-plugin-specs": "^0.72.4",
     "@tsconfig/node10": "^1.0.9",
     "@types/jest": "^28.1.4",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "babel-jest": "^29.6.4",

diff --git a/src/index.ts b/src/index.ts
@@ -115,38 +115,50 @@ const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 
 export function applyFSPropertiesWithRef(existingRef?: ForwardedRef<unknown>) {
   return function (element: React.ElementRef<FSComponentType>) {
-    // https://github.com/facebook/react-native/blob/87d2ea9c364c7ea393d11718c195dfe580c916ef/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L109C23-L109C67
-    // @ts-expect-error `currentProps` is missing in `NativeMethods`
-    const currentProps = element?.currentProps as Record<keyof NativeCommands, string | object>;
-    if (isTurboModuleEnabled && Platform.OS === 'ios' && currentProps) {
-      const fsClass = currentProps.fsClass as string;
-      if (fsClass) {
-        Commands.fsClass(element, fsClass);
-      }
-
-      const fsAttribute = currentProps.fsAttribute as object;
-      if (fsAttribute) {
-        Commands.fsAttribute(element, fsAttribute);
-      }
-
-      const fsTagName = currentProps.fsTagName as string;
-      if (fsTagName) {
-        Commands.fsTagName(element, fsTagName);
-      }
+    if (isTurboModuleEnabled && Platform.OS === 'ios') {
+      let currentProps: Record<keyof NativeCommands, string | object>;
 
-      const dataElement = currentProps.dataElement as string;
-      if (dataElement) {
-        Commands.dataElement(element, dataElement);
-      }
+      const getInternalInstanceHandleFromPublicInstance =
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance').getInternalInstanceHandleFromPublicInstance;
 
-      const dataComponent = currentProps.dataComponent as string;
-      if (dataComponent) {
-        Commands.dataComponent(element, dataComponent);
+      if (getInternalInstanceHandleFromPublicInstance && element) {
+        currentProps =
+          getInternalInstanceHandleFromPublicInstance(element)?.stateNode?.canonical.currentProps;
+      } else {
+        // https://github.com/facebook/react-native/blob/87d2ea9c364c7ea393d11718c195dfe580c916ef/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L109C23-L109C67
+        // @ts-expect-error `currentProps` is missing in `NativeMethods`
+        currentProps = element?.currentProps;
       }
-
-      const dataSourceFile = currentProps.dataSourceFile as string;
-      if (dataSourceFile) {
-        Commands.dataSourceFile(element, dataSourceFile);
+      if (currentProps) {
+        const fsClass = currentProps.fsClass as string;
+        if (fsClass) {
+          Commands.fsClass(element, fsClass);
+        }
+
+        const fsAttribute = currentProps.fsAttribute as object;
+        if (fsAttribute) {
+          Commands.fsAttribute(element, fsAttribute);
+        }
+
+        const fsTagName = currentProps.fsTagName as string;
+        if (fsTagName) {
+          Commands.fsTagName(element, fsTagName);
+        }
+
+        const dataElement = currentProps.dataElement as string;
+        if (dataElement) {
+          Commands.dataElement(element, dataElement);
+        }
+
+        const dataComponent = currentProps.dataComponent as string;
+        if (dataComponent) {
+          Commands.dataComponent(element, dataComponent);
+        }
+
+        const dataSourceFile = currentProps.dataSourceFile as string;
+        if (dataSourceFile) {
+          Commands.dataSourceFile(element, dataSourceFile);
+        }
       }
     }