AnshIcode
commented
9 months ago hy! @quentin-fox card field never be open in modal in android its a bug , so use bottom sheet instead of modal.
Open quentin-fox opened 9 months ago
AnshIcode
commented
9 months ago hy! @quentin-fox card field never be open in modal in android its a bug , so use bottom sheet instead of modal.
kidmysoul
commented
9 months ago hy! @quentin-fox you can use an alternative for react native modal ,such like react navigation modal
kidmysoul
commented
9 months ago @quentin-fox
Are you facing difficulties and asking questions here? Is it appropriate to give a thumbs down to someone sincerely answering your questions? I believe it's quite disrespectful as a developer.
I've encountered the same issue myself. Clearly, there is a conflict somewhere between the latest React Native Modal and this library. However, resolving this issue might take some time. Until someone comes up with a solution, we need to consider alternative approaches.
The method I suggested is extremely simple and useful. It involves using something other than React Native Modal, for example, there are alternatives even if it's not React Navigation Modal, such as even a plain page. Don't you think this is the best way until the problem is fundamentally resolved?
YuriOlepir
commented
9 months ago I am faced with the same problem, any solution to this?
thanhcuong1990
commented
9 months ago This issue occurred from Stripe-React-Native Version 0.34.0 to 0.38.3.
To resolve this, I had to revert to version 0.33.0.
Hatko
commented
8 months ago @kidmysoul Giving a thumb-down emoji indicates that your solution doesn't suit the developers who voted.
In our case, for example, substituting the modal isn't the easiest since it involves overhauling a component, adjusting the UI, introducing a new approach inconsistent with the rest of the codebase, and adding the overhead of testing for both platforms
Hatko
commented
8 months ago The issue persists in 0.37.0
jgillick
commented
8 months ago I can confirm that this broke in 0.34.0, likely due to stripe-android v20.32.0 upgrade (https://github.com/stripe/stripe-android/releases/tag/v20.32.0). This is when the androidxCompose library was updated to version 1.5.1 (https://github.com/stripe/stripe-android/pull/7297), which is the library that the error seems to be originating from. I wonder if the new version of androidxCompose (1.6) fixes this?
The following patch applied to 0.33.0 causes the crash for me.
diff --git a/node_modules/@stripe/stripe-react-native/android/build.gradle b/node_modules/@stripe/stripe-react-native/android/build.gradle
index e82a2a2..2b32f97 100644
--- a/node_modules/@stripe/stripe-react-native/android/build.gradle
+++ b/node_modules/@stripe/stripe-react-native/android/build.gradle
@@ -135,15 +135,20 @@ dependencies {
implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
- implementation "com.stripe:stripe-android:$stripe_version"
- implementation "com.stripe:financial-connections:$stripe_version"
+ implementation("com.stripe:stripe-android:$stripe_version") {
+ exclude group: 'androidx.emoji2', module: 'emoji2'
+ }
+ implementation ("com.stripe:financial-connections:$stripe_version") {
+ exclude group: 'androidx.emoji2', module: 'emoji2'
+ }
+ implementation('androidx.emoji2:emoji2:1.3.0').force // Avoid using 1.4.0 since that requires targetSdkVersion 34
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.0'
// play-services-wallet is already included in stripe-android
- compileOnly "com.google.android.gms:play-services-wallet:19.1.0"
+ compileOnly "com.google.android.gms:play-services-wallet:19.2.0"
// Users need to declare this dependency on their own, otherwise all methods are a no-op
compileOnly 'com.stripe:stripe-android-issuing-push-provisioning:1.1.0'
diff --git a/node_modules/@stripe/stripe-react-native/android/gradle.properties b/node_modules/@stripe/stripe-react-native/android/gradle.properties
index 4348d8a..a053654 100644
--- a/node_modules/@stripe/stripe-react-native/android/gradle.properties
+++ b/node_modules/@stripe/stripe-react-native/android/gradle.properties
@@ -1,3 +1,3 @@
StripeSdk_kotlinVersion=1.8.0
# Keep StripeSdk_stripeVersion in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/android/gradle.properties
-StripeSdk_stripeVersion=20.31.+
+StripeSdk_stripeVersion=20.32.+
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
index b78d457..3ee8e2b 100644
--- a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
+++ b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
@@ -28,7 +28,7 @@ import com.stripe.android.view.CardFormView
import com.stripe.android.view.CardInputListener
class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
- private var cardForm: CardFormView = CardFormView(context, null, R.style.StripeCardFormView_Borderless)
+ private var cardForm: CardFormView = CardFormView(context, null, com.stripe.android.R.style.StripeCardFormView_Borderless)
private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
private var dangerouslyGetFullCardDetails: Boolean = false
private var currentFocusedField: String? = null
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt
index 114d9b2..d492602 100644
--- a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt
+++ b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt
@@ -292,6 +292,7 @@ class PaymentLauncherFragment(
StripeIntent.NextActionType.WeChatPayRedirect,
StripeIntent.NextActionType.UpiAwaitNotification,
StripeIntent.NextActionType.CashAppRedirect,
+ StripeIntent.NextActionType.SwishRedirect,
null, -> false
}
}
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/utils/Mappers.kt b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/utils/Mappers.kt
index 1bcb031..e8e3790 100644
--- a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/utils/Mappers.kt
+++ b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/utils/Mappers.kt
@@ -502,6 +502,12 @@ internal fun mapNextAction(type: NextActionType?, data: NextActionData?): Writab
nextActionMap.putString("voucherURL", it.hostedVoucherUrl)
}
}
+ NextActionType.SwishRedirect -> {
+ (data as? NextActionData.SwishRedirect)?.let {
+ nextActionMap.putString("type", "swishRedirect")
+ nextActionMap.putString("mobileAuthUrl", it.mobileAuthUrl)
+ }
+ }
}
return nextActionMap
}
Looks like this is being tracked in the stripe-android repo across a few tickets
There's a potential workaround: https://github.com/stripe/stripe-android/issues/7184#issuecomment-1776245431
mahdieh-dev
commented
7 months ago Anyone knows the solution to this problem? The latest SDK still has the same issue. Using the CardField component makes the app crash. And we cannot revert to the previous versions, we're running on the latest react-native that supports compileSDKVersion of 34 and previous versions don't seem to work with this version of react-native.
Any helps would be greatly appreciated.
thanhcuong1990
commented
7 months ago This issue has been resolved in version 0.38.6.
@mahdieh-dev I'm still using version 0.33.0 with a path below while waiting for this issue to be resolved.
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store
new file mode 100644
index 0000000..6e16db7
Binary files /dev/null and b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store differ
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
index b78d457..3ee8e2b 100644
--- a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
+++ b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
@@ -28,7 +28,7 @@ import com.stripe.android.view.CardFormView
import com.stripe.android.view.CardInputListener
class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
- private var cardForm: CardFormView = CardFormView(context, null, R.style.StripeCardFormView_Borderless)
+ private var cardForm: CardFormView = CardFormView(context, null, com.stripe.android.R.style.StripeCardFormView_Borderless)
private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
private var dangerouslyGetFullCardDetails: Boolean = false
private var currentFocusedField: String? = null@mahdieh-dev please refer to #1585 this solution.
mahdieh-dev
commented
7 months ago @thanhcuong1990 @AnshIcode Thanks a lot for your support! I will try the solutions.
kamilms21
commented
7 months ago @mahdieh-dev Have you managed to get this running?
mahdieh-dev
commented
7 months ago @kamilms21 Since our team did not agree to downgrade the SDK, we decided to take the payment form out of the modal and change the UX a bit and it started working. You can refer to these two solutions: https://github.com/stripe/stripe-react-native/issues/1585#issuecomment-1895489406 or https://github.com/stripe/stripe-react-native/issues/1597#issuecomment-2022902427
AnshIcode
commented
7 months ago @mahdieh-dev i hope the above solutions works for you.
kyle-belle
commented
7 months ago Never would have guessed that being in a modal is what causes the crash especially since that is the first and only place i tried to render the CardField component.
thomas-dittmar-deferit
commented
6 months ago Is there an update about this issue? I'm still experiencing a crash when the Cardfield is within a react-native modal. Here is my current setup:
OS: Android Stripe-React-Native Version 0.37.3 React-Native Version: 0.71.8 gradle-7.6.4-bin compileSdkVersion = 34
I can confirm that the Cardfield works in a normal view.
Exception in native call
java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.widget.FrameLayout{ebeaf24 V.E...... .......D 0,0-1080,2337}
at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer(WindowRecomposer.android.kt:352)
at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer$default(WindowRecomposer.android.kt:325)
at androidx.compose.ui.platform.WindowRecomposerFactory$Companion$LifecycleAware$1.createRecomposer(WindowRecomposer.android.kt:168)
at androidx.compose.ui.platform.WindowRecomposerPolicy.createAndInstallWindowRecomposer$ui_release(WindowRecomposer.android.kt:224)
at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:300)
at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:244)
at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:251)
at androidx.compose.ui.platform.AbstractComposeView.onAttachedToWindow(ComposeView.android.kt:283)
at android.view.View.dispatchAttachedToWindow(View.java:21290)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3491)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3498)
at android.view.ViewGroup.addViewInner(ViewGroup.java:5291)
at android.view.ViewGroup.addView(ViewGroup.java:5077)
at com.facebook.react.views.view.ReactViewGroup.addView(ReactViewGroup.java:516)
at android.view.ViewGroup.addView(ViewGroup.java:5017)
at com.facebook.react.views.view.ReactClippingViewManager.addView(ReactClippingViewManager.java:38)
at com.facebook.react.views.view.ReactClippingViewManager.addView(ReactClippingViewManager.java:19)
at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1229)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1239)
at android.view.Choreographer.doCallbacks(Choreographer.java:899)
at android.view.Choreographer.doFrame(Choreographer.java:827)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1214)
at android.os.Handler.handleCallback(Handler.java:942)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7872)
NiharR27
commented
5 months ago Seeing this too with "react-native": "0.73.3", and "@stripe/stripe-react-native": "^0.37.3",
compileSdkVersion = 34
distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-all.zipexception
IllegalStateException: Cannot locate windowRecomposer; View androidx.compose.ui.platform.ComposeView{ee7efb4 V.E...... ......I. 0,0-0,0 #7f0a0193 app:id/icon} is not attached to a windowAs others suggested, it works fine when you open it inside a react navigation modal, but crashes the app when opened in a react native modal.
Can't really do what https://github.com/stripe/stripe-react-native/issues/1597#issuecomment-2035050679 suggested (as alternative regarding patching the package) as with the latest version of stripe, those changes are already present (and it is still crashing unfortunately).
magouyaware
commented
4 months ago This bug is likely related to an issue I just filed with Stripe's Android SDK... They changed the Card Brand icon to a Jetpack Compose Compsable view in Android v20.36.0.
See this issue for more details
MalekZishan
commented
4 months ago @mahdieh-dev I'm still using version 0.33.0 with a path below while waiting for this issue to be resolved.
diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store new file mode 100644 index 0000000..6e16db7 Binary files /dev/null and b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/.DS_Store differ diff --git a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt index b78d457..3ee8e2b 100644 --- a/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt +++ b/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt @@ -28,7 +28,7 @@ import com.stripe.android.view.CardFormView import com.stripe.android.view.CardInputListener class CardFormView(context: ThemedReactContext) : FrameLayout(context) { - private var cardForm: CardFormView = CardFormView(context, null, R.style.StripeCardFormView_Borderless) + private var cardForm: CardFormView = CardFormView(context, null, com.stripe.android.R.style.StripeCardFormView_Borderless) private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher private var dangerouslyGetFullCardDetails: Boolean = false private var currentFocusedField: String? = null
Tnx bro save my time
AlanGreyjoy
commented
3 months ago Same issue with react-native-ui-lib/Dialog
JRS-Developer
commented
2 months ago Any news about this issue?
GrinZero
commented
2 months ago Upgraded to 0.38.6, the issue has been resolved
thanhcuong1990
commented
1 month ago Confirmed, this issue has been resolved in version 0.38.6.
Describe the bug
When rendering a CardField in a React Native modal on Android, the app crashes, but is fine on iOS.
To Reproduce Steps to reproduce the behavior:
https://github.com/quentin-fox/stripebug
Relevant App Code
```typescript // App.tsx import React, {useState} from 'react'; import {Button, Modal, SafeAreaView, Text} from 'react-native'; import {CardField, StripeProvider} from '@stripe/stripe-react-native'; const publishableKey = ''; const merchantId = ''; function App(): JSX.Element { const [showCardField, setShowCardField] = useState(false); const [visible, setVisible] = useState(false); return (Expected behavior Should render correctly + not crash the app.
Desktop (please complete the following information):
Additional context
Native stack trace:
Related issue: #1584