CardField crashes the app when it's focused and unmounted while using the new architecture (Fabric)

[aganov]

Using the new NEW_ARCH (Fabric), the app crashes with the error: Swift runtime failure: force unwrapped a nil value + 0 [inlined] closure #1 in CardFieldManager.blur(_:) + 484 when the component containing CardField is unmounted while the CardField is focused.

To Reproduce Steps to reproduce the behavior:

1. Create a screen with a CardField component and compile the iOS app with RCT_NEW_ARCH_ENABLED=1.
2. Focus on the CardField.
3. Unmount the screen (e.g., using navigation.goBack, bottomsheet.close, etc.).
4. See the crash.

Expected behavior The app should dismiss keyboard and unmount the screen without crashing, even when the CardField is focused.

Screenshots N/A

Desktop (please complete the following information):

• OS: iOS
• Browser: N/A
• Version: N/A

Smartphone (please complete the following information):

• Device: iPhone15
• OS: iOS 18.5
• Browser: N/A
• Version: N/A

Additional context This issue occurs only when using the new Fabric architecture with RCT_NEW_ARCH_ENABLED=1. I have not tested on Android yet, the issue may also be present there.

[griffinshuth]

Android does not even show the CardField with Fabric enabled. This is a huge issue since react native 76 which is coming out next month will have the new Architecture enabled by default which will make this library unusable at that point. @charliecruzan-stripe any update on supporting Fabric?

[iM-GeeKy]

@davidme-stripe @charliecruzan-stripe is there any update on this? New arch support appears to be landing soon and this is one issue we are seeing in our preparations.

[griffinshuth]

any update on this react native 0.76.0 was just released today with the New Arch turned on by default and this library does not work with it are you guys going to update it?

[angelica-snowit]

any update?

[FladioArmandika]

any update?

[MohamadAlAdraa]

any update?

[Jleban]

any update ? This is very problematic

[Jleban]

did you solve it @aganov ?

[ole-nikitas]

Try to create hidden input and focus on it before hide keyboard or close page.

[iM-GeeKy]

Is there a patch we can apply temporarily until this issue is resolved? @tjclawson-stripe @ianjabour-stripe @charliecruzan-stripe

[sajorahasan]

Faced the same issue, and its keeping us from migrating to new architecture.

[firasrashidi]

Any updates?

[tjclawson-stripe]

Hi all, thanks for reporting. We're working on updating to the new architecture and will post an update when completed.

[firasrashidi]

Thank you, any timeline though?

[sajorahasan]

Any update on this?

[RepoCheyo]

hi trying to implement add card functionality to react native app, the thing here its that only with navigation going back or closing the component where the CardField its inside whether is focused or has been focused once it crashes in auto the app. Tried using inside react navigation lib the method navigate.popToTop it still not working.

[haris18896]

is there any update on this, On ios my app crashes when I close the bottomSheet or navigate to another screen, and on android I'm not getting the cardDetails in the callback function onCardChange

[Andromeadus]

For those needing a temporary work-around for now, on iOS, open Xcode and go to

Pods/DevelopmentPods/stripe-react-native/CardFieldManager.swift

~line 19 will be the blur function, replace that with this:

@objc func blur(_ reactTag: NSNumber) { self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) in guard let viewRegistry = viewRegistry, let view = viewRegistry[reactTag] as? CardFieldView else { NSLog("[StripeSdk] Invalid view or reactTag when calling blur. \(reactTag)") return } view.blur() } }

This simply adds a guard that prevents the blur function from breaking because of some wrong view id being sent to the function. This allows me to just blur the field.

Please note that this change is temporary, still throws a warning, but it stops the app from breaking at least for now.

P.S. This may be slightly related in terms of the new architecture affecting this, but I also found that on Android, while the app did not break, onFocus and onBlur events simply did not fire, and I ended up writing keyboardListener events to call those functions, which felt odd to have to do for a field that at least knew to open the keyboard

[glopez-askit]

Same issue, is this library still maintained?

[joix97b]

same issue @tjclawson-stripe , could you estimate time till new architecture support?

[emeliepetersson]

Any update on this?

[4everman]

any update?

[sajorahasan]

Stripe is the only package that is keeping us from migrating to the new architecture currrently.

[ivan-moego]

Same issue

[dlato97]

any update?

[bilal2k21]

This solution worked for me

To fix the issue by patching the Stripe React Native package in your node_modules directory, follow these steps:

First, install the patch-package:

npm install --save-dev patch-package

Now, you need to modify the problematic file in your node_modules directory. Navigate to:

cd node_modules/@stripe/stripe-react-native/ios/CardFieldManager.swift

Open this file in a text editor and find the blur function. It should look like:

@objc func blur(_ reactTag: NSNumber) { self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) in let view: CardFieldView = (viewRegistry![reactTag] as? CardFieldView)! view.blur() } }

Replace it with the safer version:

@objc func blur(_ reactTag: NSNumber) { self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) in guard let viewRegistry = viewRegistry, let view = viewRegistry[reactTag] as? CardFieldView else { NSLog("[StripeSdk] Invalid view or reactTag when calling blur. (reactTag)") return } view.blur() } }

Save the file. Now create the patch:

npx patch-package @stripe/stripe-react-native

This will create a patch file in the patches directory of your project. The file will be named something like @stripe+stripe-react-native+0.x.x.patch. Add a postinstall script to your package.json to apply the patch automatically when dependencies are installed:

"scripts": { "postinstall": "patch-package" }

Rebuild your iOS app:

cd ios pod install cd .. npx react-native run-ios This approach has several advantages:

Your changes won't be lost when you reinstall dependencies The patch can be shared with your team It's a cleaner approach than modifying files directly in the Pods directory

The patch-package tool will create a diff of your changes and apply them whenever the dependencies are installed, ensuring the fix is consistently applied.

[ivan-moego]

这个解决方案对我有用

要通过修补 node_modules 目录中的 Stripe React Native 包来解决此问题，请按照以下步骤操作：

首先，安装补丁包：

npm install --save-dev 补丁包

现在，您需要修改 node_modules 目录中有问题的文件。导航至：

cd node_modules/@stripe/stripe-react-native/ios/CardFieldManager.swift

在文本编辑器中打开此文件并找到模糊函数。它应该如下所示：

@objcfunc blur(_ reactTag: NSNumber) { self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) 在 let view: CardFieldView = (viewRegistry![reactTag] as? CardFieldView)! view.blur() } }

用更安全的版本替换它：

@objcfunc blur(_ reactTag: NSNumber) { self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) in guard let viewRegistry = viewRegistry, let view = viewRegistry[reactTag] as? CardFieldView else { NSLog([S​​tripeSdk] 调用 blur 时视图或 reactTag 无效。 (reactTag)") return } view.blur() } }

保存文件。 现在创建补丁：

npx 补丁包@stripe/stripe-react-native

这将在项目的补丁目录中创建一个补丁文件。该文件的名称类似于@stripe+stripe-react-native+0.xxpatch. 将 postinstall 脚本添加到你的 package.json，以便在安装依赖项时自动应用补丁：

“脚本”：{ “postinstall”：“补丁包” }

重建你的 iOS 应用程序：

cd ios pod install cd .. npx react-native run-ios 这种方法有几个优点：

重新安装依赖项时，您的更改不会丢失。 补丁可以与您的团队共享。 这比直接在 Pods 目录中修改文件更简洁。

patch-package 工具将创建您更改的差异，并在安装依赖项时应用它们，确保一致地应用修复。

This is also how I've modified it for now. But this only avoids crashes, and the CardField won't automatically focus the cursor anymore.

[sfriedman-stripe]

Hi all, thank you for sharing all of the feedback here. I agree with you; it's taken us way too long to support the new architecture. I'm sorry for that. Fortunately, I have good news: we have begun our work to start migrating to the new architecture over the past couple of weeks and hope to complete it over the next 4-6 weeks. If anything changes, you can expect to see an update from me here, but I'm optimistic we should be able to complete it by then.

I apologize again for the delay and look forward to getting this shipped for you all soon. Please keep the feedback coming as well; we will do a better job at communicating with you all in GitHub issues going forward.

[ivan-moego]

@sfriedman-stripe any update?

[sfriedman-stripe]

Hoping to land this this week or next week