React Native v0.72 no longer includes setAndForwardRef utility

[short-dsb]

• react-native version 0.72.0
• @react-native-community/checkbox version 0.5.15

The setAndForwardRef utility was removed from React Native in v0.72.0 (context). Since this package has a dependency on that utility, the app fails at runtime:

error: Error: Unable to resolve module react-native/Libraries/Utilities/setAndForwardRef from /node_modules/@react-native-community/checkbox/dist/CheckBox.ios.js: react-native/Libraries/Utilities/setAndForwardRef could not be found within the project or in these directories:
  node_modules/@react-native-community/checkbox/node_modules
  node_modules
  52 | var IOSCheckBoxNativeComponent_1 = __importDefault(require("./IOSCheckBoxNativeComponent"));
  53 | // @ts-ignore setAndForwardRef type does not exist in @types/react-native
> 54 | var setAndForwardRef_1 = __importDefault(require("react-native/Libraries/Utilities/setAndForwardRef"));
     |                                                   ^
  55 | var CheckBox = /** @class */ (function (_super) {
  56 |     __extends(CheckBox, _super);
  57 |     function CheckBox() {
    at ModuleResolver.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/node_modules/metro/src/DeltaBundler/Graph.js:472:35)
    at Graph._processModule (/node_modules/metro/src/DeltaBundler/Graph.js:260:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Graph._addDependency (/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 2)
    at async Graph._processModule (/node_modules/metro/src/DeltaBundler/Graph.js:321:5)
    at async Graph._addDependency (/node_modules/metro/src/DeltaBundler/Graph.js:371:20)

[YaoHuiJi]

same issue here, to temporarily fix the problem, I create a new setAndForwardRef.js as following:

function setAndForwardRef({ getForwardedRef, setLocalRef }) {
  return function forwardRef(ref) {
    const forwardedRef = getForwardedRef();

    setLocalRef(ref);

    // Forward to user ref prop (if one has been specified)
    if (typeof forwardedRef === 'function') {
      // Handle function-based refs. String-based refs are handled as functions.
      forwardedRef(ref);
    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {
      // Handle createRef-based refs
      forwardedRef.current = ref;
    }
  };
}
export default setAndForwardRef;

and then changes the line 54 above to
var setAndForwardRef_1 = __importDefault(require("./setAndForwardRef"));

[billnbell]

Done forget Android...

patches/@react-native-community+checkbox+0.5.15.patch

[billnbell]

@react-native-community+checkbox+0.5.15.patch

see

[kesha-antonov]

function setAndForwardRef({ getForwardedRef, setLocalRef }) {
return function forwardRef(ref) {
const forwardedRef = getForwardedRef();

setLocalRef(ref);

// Forward to user ref prop (if one has been specified)
if (typeof forwardedRef === 'function') {
  // Handle function-based refs. String-based refs are handled as functions.
  forwardedRef(ref);
} else if (typeof forwardedRef === 'object' && forwardedRef != null) {
  // Handle createRef-based refs
  forwardedRef.current = ref;
}

};
}
export default setAndForwardRef;

Patch based on this:

@react-native-community+checkbox+0.5.15.patch

diff --git a/node_modules/@react-native-community/checkbox/dist/CheckBox.android.js b/node_modules/@react-native-community/checkbox/dist/CheckBox.android.js
index 7b09252..31e2236 100644
--- a/node_modules/@react-native-community/checkbox/dist/CheckBox.android.js
+++ b/node_modules/@react-native-community/checkbox/dist/CheckBox.android.js
@@ -49,7 +49,7 @@ var nullthrows_1 = __importDefault(require("nullthrows"));
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 // @ts-ignore setAndForwardRef type does not exist in @types/react-native
-var setAndForwardRef_1 = __importDefault(require("react-native/Libraries/Utilities/setAndForwardRef"));
+var setAndForwardRef_1 = __importDefault(require("./setAndForwardRef"));
 var AndroidCheckBoxNativeComponent_1 = __importDefault(require("./AndroidCheckBoxNativeComponent"));
 /**
  * Renders a boolean input (Android only).
diff --git a/node_modules/@react-native-community/checkbox/dist/CheckBox.ios.js b/node_modules/@react-native-community/checkbox/dist/CheckBox.ios.js
index 49f7822..f9d0bcb 100644
--- a/node_modules/@react-native-community/checkbox/dist/CheckBox.ios.js
+++ b/node_modules/@react-native-community/checkbox/dist/CheckBox.ios.js
@@ -51,7 +51,7 @@ var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var IOSCheckBoxNativeComponent_1 = __importDefault(require("./IOSCheckBoxNativeComponent"));
 // @ts-ignore setAndForwardRef type does not exist in @types/react-native
-var setAndForwardRef_1 = __importDefault(require("react-native/Libraries/Utilities/setAndForwardRef"));
+var setAndForwardRef_1 = __importDefault(require("./setAndForwardRef"));
 var CheckBox = /** @class */ (function (_super) {
     __extends(CheckBox, _super);
     function CheckBox() {
diff --git a/node_modules/@react-native-community/checkbox/dist/CheckBox.windows.js b/node_modules/@react-native-community/checkbox/dist/CheckBox.windows.js
index 8b767a5..da1f23e 100644
--- a/node_modules/@react-native-community/checkbox/dist/CheckBox.windows.js
+++ b/node_modules/@react-native-community/checkbox/dist/CheckBox.windows.js
@@ -52,7 +52,7 @@ var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var WindowsCheckBoxComponent_1 = __importDefault(require("./WindowsCheckBoxComponent"));
 // @ts-ignore setAndForwardRef type does not exist in @types/react-native
-var setAndForwardRef_1 = __importDefault(require("react-native/Libraries/Utilities/setAndForwardRef"));
+var setAndForwardRef_1 = __importDefault(require("./setAndForwardRef"));
 var CheckBox = /** @class */ (function (_super) {
     __extends(CheckBox, _super);
     function CheckBox() {
diff --git a/node_modules/@react-native-community/checkbox/dist/setAndForwardRef.js b/node_modules/@react-native-community/checkbox/dist/setAndForwardRef.js
new file mode 100644
index 0000000..a27044e
--- /dev/null
+++ b/node_modules/@react-native-community/checkbox/dist/setAndForwardRef.js
@@ -0,0 +1,18 @@
+function setAndForwardRef ({ getForwardedRef, setLocalRef }) {
+  return function forwardRef(ref) {
+    const forwardedRef = getForwardedRef();
+
+    setLocalRef(ref);
+
+    // Forward to user ref prop (if one has been specified)
+    if (typeof forwardedRef === 'function') {
+      // Handle function-based refs. String-based refs are handled as functions.
+      forwardedRef(ref);
+    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {
+      // Handle createRef-based refs
+      forwardedRef.current = ref;
+    }
+  };
+}
+
+export default setAndForwardRef;

[kesha-antonov]

@react-native-community+checkbox+0.5.15.patch

see

This one is with androidx. It's harder to see what's changed

[nicholaslee119]

Thanks, 0.5.16 was released

[short-dsb]

Thanks for the quick turnaround!

[short-dsb]

Fixed by #199.