Google Pay: Missing annotations

[esfxra]

Describe the bug Android builds fail because of an annotations error. I am migrating a react-native project to a monorepo managed with nx. It seems like a misconfiguration related to gradle and linting. The project builds after I remove the @stripe/stripe-react-native package.

This does not occur if I install the package on a new project with the react-native cli.

I have tried tweaking the gradle versions, but continue to run into this. Could someone please provide pointers to resolving this.

> Task :stripe_stripe-react-native:packageDebugResources FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.3.3/userguide/command_line_interface.html#sec:command_line_warnings
58 actionable tasks: 2 executed, 56 up-to-date
ERROR:/Users/esfxra/monorepo/apps/test-app/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button_dark.xml: Resource and asset merger: /Users/esfxra/monorepo/apps/test-app/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button_dark.xml is not annotated as @Input
    java.lang.IllegalStateException: /Users/esfxra/monorepo/apps/test-app/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button_dark.xml is not annotated as @Input

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':stripe_stripe-react-native:packageDebugResources'.
> /Users/esfxra/monorepo/apps/test-app/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button_dark.xml: Error: is not annotated as @Input

To Reproduce Steps to reproduce the behavior:

1. Run npm install @stripe/stripe-react-native
2. Integrate the <StripeProvider>{...}</StripeProvider> component
3. Run npx nx run wifi-app:run-android
4. See error

This is a repo scaffolded with nx where the error can be reproduced [RN 0.69]:

• https://github.com/esfxra/nx-rn-scaffold-and-stripe

And this is a repo scaffolded by the react-native cli with no errors [RN 0.69]:

• https://github.com/esfxra/rn-scaffold-and-stripe

Expected behavior N/A

Screenshots N/A

Desktop (please complete the following information): N/A

Smartphone (please complete the following information):

• Device: Pixel 3
• OS: Android

Additional context N/A

[charliecruzan-stripe]

hm, that xml file is basically the same as googlepay_button.xml, so I'm not sure why this is only triggered for that file. I see your on Gradle 8- I think in general React Native recommends using Gradle 7 (it's a requirement if opting into the new architecture), could you try that and see if you get the same error?

[m-thenot]

Hi, I have the same problem since I tried to upgrade to react native 0.69. I also use nx but Gradle 7.

[charliecruzan-stripe]

Interesting- our example app is RN .69 as well, and Gradle 7. I'm not familiar with nx, is there a way to duplicate your environment but without nx and see if the problem persists?

[esfxra]

The 8.0 warning seems to appear even if you are running 7.x. Still experiencing this error after trying different gradle versions. My current setup (same as default for RN 0.69):

• Gradle 7.3.3
• Gradle plugin 7.1.1
• Gradle download task 5.0.1

When comparing the rn-cli project with the nx-cli one, I can note a few additions to gradle for the nx project:

• Kotlin version is specified (1.7.0)
• Kotlin-gradle plugin is included
• Detox (test framework) is included

Also, I edited the main comment with links to 2 repos:

• working example generated with the react native cli 0.69
• failing example generated with the nx cli

@charliecruzan-stripe Do you have any advice on how I can attempt to add the annotation that the build process errors out with?

Will probably also raise this issue in the nx repo as I still think its something related to tooling that could maybe be disabled / decoupled.

[m-thenot]

@esfxra just for your information my project has been created 1 year ago and did not include the additions to gradle you mentioned, and it doesn't work anyway. I'm going to try to extract the react native app from my nx project and see if the problem is fixed.

[squadnet-app]

We have the same issue with Rushstack mono-repo. Copy @stripe/stripe-react-native directly to project node_modules works in our case. Might be an issue of resolving symlink path.

[esfxra]

Hey @squadnet-app with NX the whole node_modules folder is a symbolic link. I attempted combining it with Yarn and its nohoist functionality, which did give me a separate node_modules, but the error appears regardless.

@m-thenot Sorry to hear that. Yeah I added those libs to the gradle file of the normal RN scaffold and it was still compiling well. Probably related to the symlinks as mentioned, and, at least in the case of NX, to the wrapper that runs the react-native CLI.

[m-thenot]

I cloned the library and used it as a symlink in a new react native project, and the problem appears again. So I can confirm that the problem is related to symlinks. All buttons in the layout folder trigger this error. When I remove all the buttons, the build works again.

I'm not an Android / Kotlin developer, so I'm not really in a position to suggest a PR to fix this. @charliecruzan-stripe Could you try to debug this issue as we now know how to reproduce it?

[charliecruzan-stripe]

I won't be able to get to this super soon, but hope to debug it eventually. I'm curious if this only affects stripe-react-native, or is a more widespread issue with .xml assets

[Peeeep]

I have just started investigating, and it seems like the issue is indeed related to Gradle and the .xml files not being inside the root project (but only symlinked there).

As mentioned above, removing the .xml files and their references fixes the build.

Simple Patch

diff --git a/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt b/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
index 0b3b6206cea2ac7348599840bff746b2085a9f49..1b35e01a9c1eeb71051de4800362d1dbf99b3612 100644
--- a/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
+++ b/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
@@ -9,22 +9,6 @@ class GooglePayButtonView(private val context: ThemedReactContext) : FrameLayout
   private var buttonType: String? = null
 
   fun initialize() {
-    val type =
-      when (buttonType) {
-        "pay" -> R.layout.pay_with_googlepay_button_no_shadow
-        "pay_dark" -> R.layout.pay_with_googlepay_button_dark
-        "pay_shadow" -> R.layout.pay_with_googlepay_button
-        "standard" -> R.layout.googlepay_button_no_shadow
-        "standard_dark" -> R.layout.googlepay_button_dark
-        "standard_shadow" -> R.layout.googlepay_button
-        else -> if (isNightMode()) R.layout.googlepay_button_dark else R.layout.googlepay_button
-      }
-
-    val button = LayoutInflater.from(context).inflate(
-      type, null
-    )
-
-    addView(button)
   }
 
   fun setType(type: String) {
diff --git a/android/src/main/res/layout/googlepay_button.xml b/android/src/main/res/layout/googlepay_button.xml
deleted file mode 100755
index 94cab75a3fa2d3f14b94f58686948b24e1ee7257..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/googlepay_button.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_background"
-    android:padding="2sp"
-    android:contentDescription="@string/googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/googlepay_button_content"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay"/>
-</RelativeLayout>
diff --git a/android/src/main/res/layout/googlepay_button_dark.xml b/android/src/main/res/layout/googlepay_button_dark.xml
deleted file mode 100644
index db04022525ceb9fbf07c09fe89d73a8b891ea3e7..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/googlepay_button_dark.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_background_dark"
-    android:padding="2sp"
-    android:contentDescription="@string/googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/googlepay_button_content_dark"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay_dark"/>
-</RelativeLayout>
diff --git a/android/src/main/res/layout/googlepay_button_no_shadow.xml b/android/src/main/res/layout/googlepay_button_no_shadow.xml
deleted file mode 100755
index 41f09f7b597a633dccaa1d3ed9513d2c7e11ac7f..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/googlepay_button_no_shadow.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_no_shadow_background"
-    android:paddingTop="2sp"
-    android:contentDescription="@string/googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/googlepay_button_content"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay"/>
-</RelativeLayout>
diff --git a/android/src/main/res/layout/pay_with_googlepay_button.xml b/android/src/main/res/layout/pay_with_googlepay_button.xml
deleted file mode 100755
index 9ac6e8aebb811319f26562fcee7d3e3a70c9f574..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/pay_with_googlepay_button.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_background"
-    android:padding="2sp"
-    android:contentDescription="@string/pay_with_googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/pay_with_googlepay_button_content"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay"/>
-</RelativeLayout>
\ No newline at end of file
diff --git a/android/src/main/res/layout/pay_with_googlepay_button_dark.xml b/android/src/main/res/layout/pay_with_googlepay_button_dark.xml
deleted file mode 100644
index 000c46b680f9b97d14c4e2b9d3e5d1ddccc45318..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/pay_with_googlepay_button_dark.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_background_dark"
-    android:padding="2sp"
-    android:contentDescription="@string/pay_with_googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/pay_with_googlepay_button_content_dark"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay_dark"/>
-</RelativeLayout>
diff --git a/android/src/main/res/layout/pay_with_googlepay_button_no_shadow.xml b/android/src/main/res/layout/pay_with_googlepay_button_no_shadow.xml
deleted file mode 100755
index e1f0a73595d6f24a0ac05a6bb33513f337592c28..0000000000000000000000000000000000000000
--- a/android/src/main/res/layout/pay_with_googlepay_button_no_shadow.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:clickable="true"
-    android:focusable="true"
-    android:layout_width="match_parent"
-    android:layout_height="48sp"
-    android:background="@drawable/googlepay_button_no_shadow_background"
-    android:padding="4sp"
-    android:contentDescription="@string/pay_with_googlepay_button_content_description">
-    <LinearLayout
-        android:duplicateParentState="true"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:weightSum="2"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-        <ImageView
-            android:layout_weight="1"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:scaleType="fitCenter"
-            android:duplicateParentState="true"
-            android:src="@drawable/pay_with_googlepay_button_content"/>
-    </LinearLayout>
-    <ImageView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:scaleType="fitXY"
-        android:duplicateParentState="true"
-        android:src="@drawable/googlepay_button_overlay"/>
-</RelativeLayout>
\ No newline at end of file

[m-thenot]

@charliecruzan-stripe any update ?

[charliecruzan-stripe]

Not yet, as I said above, I'm curious if this only affects stripe-react-native, or is a more widespread issue with .xml assets. Maybe someone with the nx setup can let me know

[kaoDev]

is there already any progress or solution? I now ran into the same problem after upgrading to RN 0.70.3

[charliecruzan-stripe]

Not yet, as I said above, I'm curious if this only affects stripe-react-native, or is a more widespread issue with .xml assets. Maybe someone with the nx setup can let me know

[harcorp]

I have the same issue and change the build version on Android and rollback the stripe version and the issue persist

[retro]

I've fixed this issue by using patch-package to patch the @react-native-community/cli-platform-android package so it loads the dependencies from the root node_modules folder. The issue definitely seems to be related to symlinks, which gradle doesn't know how to handle (at least it seems that way from my research). Here's the patch:

diff --git a/node_modules/@react-native-community/cli-platform-android/native_modules.gradle b/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
index 4a63eaf..05b4511 100644
--- a/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
+++ b/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
@@ -469,7 +469,7 @@ class ReactNativeModules {
         def nameCleansed = name.replaceAll('[~*!\'()]+', '_').replaceAll('^@([\\w-.]+)/', '$1_')
         reactNativeModuleConfig.put("name", name)
         reactNativeModuleConfig.put("nameCleansed", nameCleansed)
-        reactNativeModuleConfig.put("androidSourceDir", androidConfig["sourceDir"])
+        reactNativeModuleConfig.put("androidSourceDir", androidConfig["sourceDir"].replace('apps/your-app-name/', ""))
         reactNativeModuleConfig.put("packageInstance", androidConfig["packageInstance"])
         reactNativeModuleConfig.put("packageImportPath", androidConfig["packageImportPath"])
         reactNativeModuleConfig.put("libraryName", androidConfig["libraryName"])

[andreacab2]

@charliecruzan-stripe I can answer the question (I think). First, we use Gradle 7 (and nx) and see the same issue. Ours do happen on the googlepay_button.xml file and not the one mentioned on this issue.

As for your question. We have a relatively big react-native app and I see many xml files, for the npm org @react-native-community and their datetimepicker package. The issue mentioned here doesn't happen if I remove the stripe package.

I could be looking at the wrong thing. I made find node_modules "*.xml" search to extract other xml files but wasn't sure exactly what I was looking for except the xml part.

Last, we did set up a barebone react-native app with only the stripe-react-native npm package and no nx. It works. So it's probably smg due to nx. It does feel like nx makes some assumption of how these files should be organized (maybe?) and stripe-react-native would be breaking that assumption.

We tried the patch from @retro and it works.

[charliecruzan-stripe]

Thanks @andreacab2 ! that's good to know. If this works with a regular project, but not nx, then it might be useful to file an issue over at that repo?

[harcorp]

Thanks @andreacab2 ! that's good to know. If this works with a regular project, but not nx, then it might be useful to file an issue over at that repo?

On the new version of the library fix the problem with some .xml but appear new errors. The problem is symlinks of the node_modules folder with react native app folder

[charliecruzan-stripe]

Closing this for now since it seems like an issue with nx. Hope to hear back from them in that issue linked above, and if there are actionable changes on our end to make, happy to follow up and take care of that

[walkerdb]

Seeing this as well in our update to latest stripe-react-native and react-native. We're in a monorepo that uses pnpm to manage dependencies, which also relies on symlinks.

This library did work under pnpm before bumping to latest.

[charliecruzan-stripe]

Bumping from which version to 0.23.3?

[walkerdb]

@charliecruzan-stripe in our case we're bumping two libraries at once:

• react-native from 0.64.4 to latest 0.71.2, which also implies the following updates for android
  • Java 8 -> 11
  • android SDK 31 -> 33
  • gradle 6.9 -> 7.5.1
  • android-gradle-plugin 4.0.1 -> 7.4.1
  • addition of react-native-gradle-plugin from the 0.71 release
• @stripe/stripe-react-native from 0.22.1 to 0.23.0 (can't go to 0.23.3 because of the breaking kotlin version requirement)

Everything had worked fine with RN 0.64.4 + stripe 0.22.1. I'm not sure which of the two updates is the culprit here but I'd guess it's likely an issue with gradle or one of its plugins when it tries to compile an app with symlinked xml assets? Currently heads down on the migration so don't have the time to make a minimal repro, for the moment we're just patching and moving on.

But worth noting this is our only dependency that has this problem. It's possible this is our only dependency with XML assets but would have to run an audit to make sure.

[charliecruzan-stripe]

It's possible this is our only dependency with XML assets but would have to run an audit to make sure.

Yeah that's my main question here, thanks so much for the info, and sorry to leave you with just the workaround. If I can find some extra time to try and test another library with xml assets with nx, I will

[walkerdb]

Here's the result of find node_modules -type f -name "*.xml" | grep -E '(layout|drawable)' in our node_modules folder (excluding stripe and react-native core):

react-native-prompt-android/android/src/main/res/drawable/edit_text_cursor.xml
react-native-prompt-android/android/src/main/res/layout/edit_text.xml

so it's only react-native-prompt-android that has any other xml assets in our repo. It references the edit_text layout here.

I don't know enough about android assets to really say much else. I'm not sure why this one wouldn't cause an issue but the library is ancient enough that I wouldn't be surprised if its build process is different.

Sidenote, it looks like this specific error message comes from the official android gradle plugin. Seems plausible that that's where the bug ultimately lies especially given how much of the logic there deals with determining whether a file is in a specific folder path, could see all sorts of edge-cases there when dealing with symlinks.

[jmarks-joshua]

I'm getting this error in an expo project I've just updated to expo@48 from 44. Lots of big package updates including stripe/[email protected] to 0.23.3.

Using eas build which appears to use Gradle 7.5.1

Getting error: ERROR:/home/expo/workingdir/build/audience/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/book_with_googlepay_button.xml: Resource and asset merger: /home/expo/workingdir/build/audience/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/book_with_googlepay_button.xml is not annotated as @Input [stderr] java.lang.IllegalStateException: /home/expo/workingdir/build/audience/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/book_with_googlepay_button.xml is not annotated as @Input

Any advice would be appreciated, because I have so little control over the build process because EAS handles everything I'm not sure what I can even try.

[jmarks-joshua]

I resolved this issue by stopping using expo-yarn-workspaces and moving to the new expo way using metro config. So yes again it seems related to symlinks like the other examples here.

[enchorb]

Can this be reopened, only package that has this issue

[charliecruzan-stripe]

This seems like an issue with symlinks & nx, not with this library. Have you tried the workaround shared here: https://github.com/nrwl/nx/issues/14414

Maybe something about nx is skipping adding each native android module's androidSourceDir?

[jmarks-joshua]

Just FYI I wasn't using NX, well I guess unless expo uses it under the hood, but I'm fairly sure it doesn't as you have to make changes to plug them together. I can't see how it's an nx problem. Seems like just symlinks and anything that relies on them might cause this issue. I mostly agree that it's probably not the fault of the stripe project, but it might be possible that a solution in the project is still possible.