Google Pay: Missing annotations

[esferadigital]

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?

[esferadigital]

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.

[esferadigital]

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