stripe-react-native: Build error with RN 0.73

Describe the bug After upgrading to React Native 0.73 I saw the following build error.

> Task :stripe_stripe-react-native:compileDebugKotlin FAILED
e: file:///home/johnf/work/gladly/mobile/node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/CardFormView.kt:31:70 Unresolved reference: style

To Reproduce Steps to reproduce the behavior:

Create a new 0.73 RN app
Follow the stripe-react-native setup instructions
yarn android

Expected behavior No Compile errors

Additional context

The code in question is

class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
  private var cardForm: CardFormView = CardFormView(context, null, R.style.StripeCardFormView_Borderless)
  private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
  private var dangerouslyGetFullCardDetails: Boolean = false
  private var currentFocusedField: String? = null

I can’t find style defined in any of the resource files. Not sure why it wasn’t a compile error before RN 0.73.0

My quick fix is to apply the following diff

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..6e485ce 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)
   private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
   private var currentFocusedField: String? = null

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 12
Comments: 17 (6 by maintainers)

Commits related to this issue

fix: RN 0.73 Build error #1578 — committed to jgillick/stripe-react-native by jgillick 7 months ago
fix: RN 0.73 Build error #1578 (#1579) — committed to stripe/stripe-react-native by jgillick 6 months ago

Most upvoted comments

I believe this will fix it correctly (taken from the Flutter fix of the same bug)

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

CC @mihailo-misic

+12

jgillick on Dec 13, 2023

would you mind release a version to fix this error

+10

AliRezaBeigy on Dec 26, 2023

@divyanshkumarsharma The PR (https://github.com/stripe/stripe-react-native/pull/1579) is in review now. If you need the fix sooner, consider using patch-package and the patch I included in my comment above. This should unblock you. That’s what I’m doing in my project until this is released in the next version.

jgillick on Dec 15, 2023

Hi @johnf I’m also having this issue right now.

The fix you’re suggesting is unfortunately not viable for me.

These are the versions of the relevant modules that I’m using:

react-native: 0.73.0
@stripe/stripe-react-native: 0.35.0
Kotlin: 1.8.22 (also tried: 1.8.20, 1.8.0, and 1.7.0)

mihailo-misic on Dec 11, 2023

Hello!

I’m using react-native v0.73.0 (reverted from v0.75.0) and @stripe/stripe-react-native v0.35.0 but I keep getting this compilation error.

@ahmadAlMezaal which version-combination did it for ya’?

falk-stefan on Jan 13, 2024

@TrustyTechSG Until they release the fix, you can unblock your project by either using patch-package or installing the package using the git commit hash (f1fe1252d27a1e551a195d0ce9796c4810cec0e9 in your package.json file.

jgillick on Jan 5, 2024

@TrustyTechSG To get a resolution, you’ll need to share the exact build errors you’re seeing.

Sorry for not providing the logs

/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:237507:7: warning: the variable "_scrollToPaper" was not declared in function "scrollToPaper"
      _scrollToPaper(viewTag, x, y, animated);
      ^~~~~~~~~~~~~~
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:237555:7: warning: the variable "_setGestureState" was not declared in function "setGestureStateNative"
      _setGestureState(handlerTag, newState);
      ^~~~~~~~~~~~~~~~
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:237846:18: warning: the variable "message" was not declared in function "message"
          return message;
                 ^~~~~~~
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:237878:5: warning: the variable "jest" was not declared in function "beforeTest"
    jest.useFakeTimers();
    ^~~~
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:240108:26: warning: the variable "structuredClone" was not declared in function "createAnimationWithExistingTransform"
      newAnimationData = structuredClone(_config.AnimationsData[animationName]);
                         ^~~~~~~~~~~~~~~
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:252397:91: warning: the variable "value" was not declared in anonymous function " 8395#"
...e), n.bind(null, true)) : n(false, value);
                                      ^~~~~
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':stripe_stripe-react-native:compileReleaseKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction
   > Compilation error. See log for more details
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.
BUILD FAILED in 6m 1s

TrustyTechSG on Dec 14, 2023