search

stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.28k stars 264 forks source link

The payment sheets flickers when closing iOS 18 Beta 8 #1723

Open aziryasin opened 2 months ago

aziryasin commented 2 months ago

Describe the bug When closing the payment sheet or dismissing it by pressing outside the modal, the sheet closed and pop ups again and then closes.

To Reproduce Steps to reproduce the behavior:

  1. initPaymentSheet
  2. Open payment sheet using presentPaymentSheet
  3. Close or press outside the sheet to dismiss
  4. See the flickering

Expected behavior The sheet should be closed without flickering

Screenshots https://github.com/user-attachments/assets/05715492-a17c-4d0c-9fb0-4004d279bfd1

Smartphone:

Additional context Only happening in iOS 18

kele-leanes commented 2 months ago

same issue

nicolasdevienne commented 1 month ago

same issue when user confirm the payment

Ortbri commented 1 month ago

same here too, i was actually having the issue on IOS 17.6.1. and on IOS 18. The flicker is for sure there. It works on simulator for both IOS and Android on my side. Just physical devices give me the issue.

mikkoseppa commented 1 month ago

Same issue here. Confirmed happening on iOS 18.0, and confirmed it's still present on iOS 18.1 beta 4. Our team would really appreciate someone taking a look into it since it downgrades the customer experience of our production application, thank you!

yuki-stripe commented 1 month ago

Thanks for reporting this. Can you provide logs when the dismiss happens? It seems like an autolayout constraint is breaking.

mikkoseppa commented 1 month ago

Thanks for reporting this. Can you provide logs when the dismiss happens? It seems like an autolayout constraint is breaking.

This is the only log entry when I dismiss. Nothing about autolayout / constraint errors. LOG ANALYTICS: mc_dismiss - [(key: "pay_var", value: "legacy"), (key: "ocr_type", value: "none"), (key: "apple_pay_enabled", value: 1)]

I also checked the "Debug view hierarchy" in Xcode for any runtime constraint warnings, and there is nothing meaningful for this issue.

yuki-stripe commented 1 month ago

Hrmm thank you. I can't repro on iOS 18 & Xcode 16, simulator or device. We'll need to try React Native; I can't see anything in the React Native SDK that would cause this, though (eg this code)

There's an similar animation glitch that can occur on iOS 18 when a TextField takes focus when PaymentSheet dismisses and the keyboard is toggled (eg "Toggle Software Keyboard" in the simulator), but that doesn't seem to be happening here.

hot2eatorg commented 1 month ago

Same issue here. Breaks on iOS 18. Same code works fine without the flickering on iOS 17.4 Both compiled using Xcode 16

   "expo": "~50.0.14",
   "@stripe/stripe-react-native": "^0.38.6",
   "react-native": "0.73.6",

I haven't tested it in a real device yet.

stalkerlifehack commented 1 month ago

Same issue, On real device (iPhone 15 Pro Max) with iOS 17 is ok, but iOS 18 have problem.

"@stripe/stripe-react-native": "^0.37.0",
"react-native": "0.73.4",
v-kravchuk commented 4 weeks ago

Same issue. Occurs on a real device with iOS 18

cesarbarone commented 3 weeks ago

Same issue here!

"react-native": "0.74.1",
"@stripe/stripe-react-native": "^0.38.6",
sigaits commented 3 weeks ago

I'm having the same issue on my React Native app. I've verified that it's related to iOS 18 (simulator or device). It works fine on iOS 17. Closing the payment sheet closes it, but then it pops, sweeps down the screen, and disappears. See video.

I'm using "@stripe/stripe-react-native": "^0.39.0".

https://github.com/user-attachments/assets/a6d266d4-abbc-4ecf-85e9-c232dedfe5f9

Tieu-Mai-Nhi commented 3 weeks ago

same issue with ios 18

enmanuel-mctekk commented 2 weeks ago

Same issue here, fine in iOS 17, but in iOS 18 the sheet flickers.

melyux commented 2 weeks ago

Makes our app look bad.

konstmar-ion commented 2 weeks ago

same issue here with ios 18

Ortbri commented 2 weeks ago

Hrmm thank you. I can't repro on iOS 18 & Xcode 16, simulator or device. We'll need to try React Native; I can't see anything in the React Native SDK that would cause this, though (eg this code)

There's an similar animation glitch that can occur on iOS 18 when a TextField takes focus when PaymentSheet dismisses and the keyboard is toggled (eg "Toggle Software Keyboard" in the simulator), but that doesn't seem to be happening here.

Here’s the environment and the specific logs that appear when I open and close the Payment Sheet:

Environment: React Native Version: 0.74.5 Expo SDK Version: ~51.0.37 Stripe SDK Version: @stripe/stripe-react-native: 0.37.2 Device: Physical iPhone running iOS 18.0.1 & iPhone 16 Pro Max on IOS. 18.0 Build Setup: I built the app using Xcode for my physical device to gather the logs. Logs: On Opening the Payment Sheet:

-[RemoteTextInput] -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = <null selector>, customInfoType = UIEmojiSearchOperations

On Closing the Payment Sheet: -[RemoteTextInput] -[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = <null selector>, customInfoType = UIEmojiSearchOperations I see this error both when the sheet is opened and when it is dismissed. I haven’t seen any specific autolayout constraint warnings in the logs so far. This is the first time seeing this log besides the normal

Not sure if this is any help, Thanks!

erik-lissen commented 2 weeks ago

same issue for us

erik-lissen commented 2 weeks ago

hi @davidme-stripe I can see this has been fixed in the ios SDK - I'm unfamiliar with the release processes here, how long does it usually take for the RN SDK to be updated and released with the new ios fix?

thanks a lot

XTSKatz commented 1 week ago

I’m experiencing the same issue in latest SDK on iOS 18 where the payment sheet flickers upon closing. This persists despite using the latest versions of the SDK:

@stripe/stripe-react-native version: 0.39.0

iOS : Podfile.lock

Stripe (23.30.0):

vogdev commented 1 week ago

same issue with ios 18.0

Ortbri commented 3 days ago

hi @davidme-stripe I can see this has been fixed in the ios SDK - I'm unfamiliar with the release processes here, how long does it usually take for the RN SDK to be updated and released with the new ios fix?

thanks a lot

i think we're just waiting for them to increment the version

the latest version of React native stripe being 39.0 which had

The push that has the fix is on

just adding this comment so we can get the fix