stripe-react-native icon indicating copy to clipboard operation
stripe-react-native copied to clipboard

Published 20 hours ago • verified publisher icon stripe

CardField components crashes app on Android when rendered in Modal.

Open quentin-fox opened this issue 1 year ago • 25 comments

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:

  1. Clone this repo:

https://github.com/quentin-fox/stripebug

Relevant App Code 
// 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 (
    <SafeAreaView>
      <StripeProvider
        publishableKey={publishableKey}
        merchantIdentifier={merchantId}>
        <>
          <Text>Click Button to Show Card Field</Text>
          <Button title="Show" onPress={() => setShowCardField(true)} />

          {showCardField && <CardField style={{height: 50}} />}

          <Text>Click Button to Open Card Field in Modal</Text>
          <Button title="Show Modal" onPress={() => setVisible(true)} />

          <Modal visible={visible} animationType={'none'}>
            {showCardField && <CardField style={{height: 50}} />}
          </Modal>
        </>
      </StripeProvider>
    </SafeAreaView>
  );
}

export default App;
  1. Build App:
yarn install
yarn android
  1. In app UI, clicking the "Show" button will show the card field outside a modal correctly.
image
  1. Clicking the "Show Modal" button will crash the app.

Expected behavior Should render correctly + not crash the app.

Desktop (please complete the following information):

  • OS: Android
  • Stripe-React-Native Version 0.35.0
  • React-Native Version: 0.72.7

Additional context

Native stack trace:

01-23 14:38:29.316 18358 18358 E unknown:ReactModalHost: Creating new dialog from context: com.stripebug.MainActivity@36300e5@56819941
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: Exception in native call
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: java.lang.IllegalStateException: Cannot locate windowRecomposer; View androidx.compose.ui.platform.ComposeView{d7570fd V.E...... ......I. 0,0-0,0 #7f08014e app:id/icon} is not attached to a window
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:295)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:244)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:251)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at androidx.compose.ui.platform.AbstractComposeView.onMeasure(ComposeView.android.kt:288)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.View.measure(View.java:25833)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6980)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.View.measure(View.java:25833)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6980)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1552)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.widget.LinearLayout.measureHorizontal(LinearLayout.java:1204)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:723)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.View.measure(View.java:25833)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6980)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.View.measure(View.java:25833)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.updateLayout(NativeViewHierarchyManager.java:189)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$UpdateLayoutOperation.execute(UIViewOperationQueue.java:169)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches(Unknown Source:0)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1035)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.Choreographer.doCallbacks(Choreographer.java:845)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.Choreographer.doFrame(Choreographer.java:775)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.os.Handler.handleCallback(Handler.java:938)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.os.Handler.dispatchMessage(Handler.java:99)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.os.Looper.loopOnce(Looper.java:201)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.os.Looper.loop(Looper.java:288)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at android.app.ActivityThread.main(ActivityThread.java:7842)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at java.lang.reflect.Method.invoke(Native Method)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
01-23 14:38:29.366 18358 18358 E unknown:ReactNative: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
01-23 14:38:29.374 18358 18358 D AndroidRuntime: Shutting down VM
--------- beginning of crash
01-23 14:38:29.375 18358 18358 E AndroidRuntime: FATAL EXCEPTION: main
01-23 14:38:29.375 18358 18358 E AndroidRuntime: Process: com.stripebug, PID: 18358
01-23 14:38:29.375 18358 18358 E AndroidRuntime: java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.widget.FrameLayout{919a043 V.E...... ......I. 0,0-0,0}
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer(WindowRecomposer.android.kt:352)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer$default(WindowRecomposer.android.kt:325)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.WindowRecomposerFactory$Companion$LifecycleAware$1.createRecomposer(WindowRecomposer.android.kt:168)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.WindowRecomposerPolicy.createAndInstallWindowRecomposer$ui_release(WindowRecomposer.android.kt:224)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:300)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:244)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:251)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at androidx.compose.ui.platform.AbstractComposeView.onAttachedToWindow(ComposeView.android.kt:283)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.View.dispatchAttachedToWindow(View.java:20812)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3490)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3497)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2675)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2179)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:8787)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1037)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.Choreographer.doCallbacks(Choreographer.java:845)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.Choreographer.doFrame(Choreographer.java:780)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:938)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:99)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.os.Looper.loopOnce(Looper.java:201)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:288)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:7842)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
01-23 14:38:29.375 18358 18358 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

Related issue: #1584

quentin-fox avatar Jan 23 '24 19:01 quentin-fox

hy! @quentin-fox card field never be open in modal in android its a bug , so use bottom sheet instead of modal.

AnshIcode avatar Jan 25 '24 06:01 AnshIcode

hy! @quentin-fox you can use an alternative for react native modal ,such like react navigation modal

kidmysoul avatar Jan 25 '24 12:01 kidmysoul

@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?

kidmysoul avatar Jan 26 '24 02:01 kidmysoul

I am faced with the same problem, any solution to this?

YuriOlepir avatar Feb 01 '24 13:02 YuriOlepir

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.

thanhcuong1990 avatar Feb 04 '24 15:02 thanhcuong1990

@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 avatar Feb 20 '24 21:02 Hatko

The issue persists in 0.37.0

Hatko avatar Feb 20 '24 21:02 Hatko

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
 }

jgillick avatar Feb 23 '24 01:02 jgillick

Looks like this is being tracked in the stripe-android repo across a few tickets

  • https://github.com/stripe/stripe-android/issues/7934
  • https://github.com/stripe/stripe-android/issues/7755
  • https://github.com/stripe/stripe-android/issues/7433

There's a potential workaround: https://github.com/stripe/stripe-android/issues/7184#issuecomment-1776245431

jgillick avatar Feb 23 '24 19:02 jgillick

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.

mahdieh-dev avatar Mar 27 '24 10:03 mahdieh-dev

@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

@stripe+stripe-react-native+0.33.0.patch

thanhcuong1990 avatar Mar 27 '24 14:03 thanhcuong1990

@mahdieh-dev please refer to #1585 this solution.

AnshIcode avatar Mar 28 '24 05:03 AnshIcode

@thanhcuong1990 @AnshIcode Thanks a lot for your support! I will try the solutions.

mahdieh-dev avatar Mar 28 '24 06:03 mahdieh-dev

@mahdieh-dev Have you managed to get this running?

kamilmm21 avatar Apr 03 '24 14:04 kamilmm21

@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

mahdieh-dev avatar Apr 03 '24 16:04 mahdieh-dev

@mahdieh-dev i hope the above solutions works for you.

AnshIcode avatar Apr 04 '24 08:04 AnshIcode

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.

kyle-belle avatar Apr 07 '24 20:04 kyle-belle

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)

thomas-dittmar-deferit avatar May 12 '24 06:05 thomas-dittmar-deferit

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.zip

exception
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 window

As 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).

NiharR27 avatar May 20 '24 06:05 NiharR27

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

magouyaware avatar Jun 13 '24 19:06 magouyaware

@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

@stripe+stripe-react-native+0.33.0.patch

Tnx bro save my time

MalekZishan avatar Jul 11 '24 06:07 MalekZishan

Same issue with react-native-ui-lib/Dialog

AlanGreyjoy avatar Aug 09 '24 23:08 AlanGreyjoy