Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Pay: Missing annotations #1078

Closed
esfxra opened this issue Aug 8, 2022 · 48 comments · Fixed by #1586
Closed

Google Pay: Missing annotations #1078

esfxra opened this issue Aug 8, 2022 · 48 comments · Fixed by #1586
Labels
question Further information is requested

Comments

@esfxra
Copy link

esfxra commented Aug 8, 2022

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]:

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

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
Copy link
Collaborator

charliecruzan-stripe commented Aug 9, 2022

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?

@charliecruzan-stripe charliecruzan-stripe added the question Further information is requested label Aug 9, 2022
@m-thenot
Copy link

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
Copy link
Collaborator

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
Copy link
Author

esfxra commented Aug 11, 2022

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
Copy link

@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
Copy link

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
Copy link
Author

esfxra commented Aug 16, 2022

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
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

Peeeep commented Aug 24, 2022

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
Copy link

@charliecruzan-stripe any update ?

@charliecruzan-stripe

This comment was marked as duplicate.

@kaoDev
Copy link

kaoDev commented Oct 24, 2022

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

@charliecruzan-stripe
Copy link
Collaborator

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
Copy link

harcorp commented Nov 4, 2022

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

@retro
Copy link

retro commented Dec 15, 2022

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
Copy link

andreacab2 commented Jan 5, 2023

@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
Copy link
Collaborator

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
Copy link

harcorp commented Jan 5, 2023

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
Copy link
Collaborator

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
Copy link
Contributor

walkerdb commented Feb 10, 2023

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
Copy link
Collaborator

Bumping from which version to 0.23.3?

@walkerdb
Copy link
Contributor

walkerdb commented Feb 13, 2023

@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
Copy link
Collaborator

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
Copy link
Contributor

walkerdb commented Feb 14, 2023

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
Copy link

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/stripe-react-native@0.2.3 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
Copy link

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
Copy link

enchorb commented Mar 20, 2023

Can this be reopened, only package that has this issue

@charliecruzan-stripe
Copy link
Collaborator

charliecruzan-stripe commented Mar 27, 2023

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

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

@jmarks-joshua
Copy link

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.

@airowe
Copy link

airowe commented May 15, 2023

@retro, Your patch worked to avoid the annotations error but I'm now seeing another error when trying to build a release flavor after utilizing the patch. Since it's related, should I open a new issue or paste in this discussion @charliecruzan-stripe?

@Peeeep
Copy link
Collaborator

Peeeep commented May 16, 2023

@airowe The two issues seem unrelated; I have this patch & build flavors working flawlessly together...

@aslamanver
Copy link

Team any idea?

Nx React Native Project

FAILURE: Build completed with 2 failures.
1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':stripe_stripe-react-native:packageDebugResources'.
> /Users/aslam/Desktop/projects/t-98-frontend/apps/t98training/node_modules/@stripe/stripe-react-native/android/src/main/res/layout/googlepay_button.xml: Error: is not annotated as @Input

@aslamanver
Copy link

aslamanver commented May 31, 2023

I approached this issue with this patch;

  1. Delete the layout folder node_modules/@stripe/stripe-react-native/android/src/main/res/layout

  2. Comment the layouts inside initialize() method of node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt

package com.reactnativestripesdk

import android.view.LayoutInflater
import android.widget.FrameLayout
import com.facebook.react.uimanager.ThemedReactContext

class GooglePayButtonView(private val context: ThemedReactContext) : FrameLayout(context) {
  private var buttonType: String? = null

  fun initialize() {
  //  val type =
  //    when (buttonType) {
  //      "pay" -> R.layout.pay_with_googlepay_button
  //      "standard" -> R.layout.googlepay_button
  //      else -> R.layout.googlepay_button
  //    }

  //  val button = LayoutInflater.from(context).inflate(
  //    type, null
  //  )

  //  addView(button)
  }

  fun setType(type: String) {
    buttonType = type
  }
}
  1. If you have added these dependencies into your build.gradle file, just comment them.
// implementation 'com.google.android.material:material:1.3.0'
// implementation 'com.stripe:stripe-android:20.12.+'

You need to do the same process whenever you execute npm install but if you want to automate this process follow the below steps.

  1. Create a shell script like this patch.sh and assign 777 permission, sudo chmod +x patch.sh
#!/bin/bash

ORIGINAL_DIR="node_modules/@stripe/stripe-react-native/android/src/main"
FIXED_DIR="patched_node_modules/@stripe/stripe-react-native/android/src/main"

# Remove the layout directory
rm -rf "$ORIGINAL_DIR/res/layout"

# Replace the file
cp "$FIXED_DIR/java/com/reactnativestripesdk/GooglePayButtonView.kt" "$ORIGINAL_DIR/java/com/reactnativestripesdk/GooglePayButtonView.kt"

echo "Successfully patched node_modules!"
  1. Create a patched Kotlin file inside patched_node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
package com.reactnativestripesdk

import android.view.LayoutInflater
import android.widget.FrameLayout
import com.facebook.react.uimanager.ThemedReactContext

class GooglePayButtonView(private val context: ThemedReactContext) : FrameLayout(context) {
  private var buttonType: String? = null

  fun initialize() {
  //  val type =
  //    when (buttonType) {
  //      "pay" -> R.layout.pay_with_googlepay_button
  //      "standard" -> R.layout.googlepay_button
  //      else -> R.layout.googlepay_button
  //    }

  //  val button = LayoutInflater.from(context).inflate(
  //    type, null
  //  )

  //  addView(button)
  }

  fun setType(type: String) {
    buttonType = type
  }
}
  1. Add postinstall script inside package.json
  "scripts": {
    ...
    "postinstall": "./patch.sh"
  },

That's it now until the Stripe team fixes this issue, we can survive.

@charliecruzan-stripe
Copy link
Collaborator

@aslamanver please note that the PlatformPayButton (or GooglePayButton if you're on an older version) component will not work anymore with your changes. This patch linked further above does not have that side effect

@aslamanver
Copy link

@aslamanver please note that the PlatformPayButton (or GooglePayButton if you're on an older version) component will not work anymore with your changes. This patch linked further above does not have that side effect

That patch does not work in our case

@r3dm1ke
Copy link

r3dm1ke commented Jun 19, 2023

Are there any updates to this? This library is the only one with this error

@charliecruzan-stripe
Copy link
Collaborator

Hi @r3dm1ke , not yet, as I haven't had time to investigate this

@enchorb
Copy link

enchorb commented Aug 14, 2023

Any progress here, still an issue with react-native - 0.72.4 & @react-native-community/cli-platform-android - 11.3.7

@ghorbani-m
Copy link

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"])

I used this patch on my project which is a mono repo by Nx, It solved the Stripe issue but causes another issue for 'react-native-gesture-handler'

[react-native-gesture-handler] Multiple versions of Gesture Handler were detected. Only one instance of react-native-gesture-handler can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-gesture-handler/docs/troubleshooting#multiple-instances-of-gesture-handler-were-detected

I followed the react-native-gesture-handler approach in their documentation to resolve this issue too, but did not work!

@AlaaInflyter
Copy link

Same issue here. Any news about this ?

@Jackmekiss
Copy link

Same issue !

@nnphong1904
Copy link

Hey is there any update on this issue? I'm getting this on my project using RN 0.71.11 and RNStripe 0.35.0. I'm using mono repo with pnpm instead of nx.

@aslamanver
Copy link

Hey is there any update on this issue? I'm getting this on my project using RN 0.71.11 and RNStripe 0.35.0. I'm using mono repo with pnpm instead of nx.

This this #1078 (comment)

@freddneos
Copy link

same issue here , nothing yet guys ?

@freddneos
Copy link

freddneos commented Dec 26, 2023

I approached this issue with this patch;

  1. Delete the layout folder node_modules/@stripe/stripe-react-native/android/src/main/res/layout
  2. Comment the layouts inside initialize() method of node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
package com.reactnativestripesdk

import android.view.LayoutInflater
import android.widget.FrameLayout
import com.facebook.react.uimanager.ThemedReactContext

class GooglePayButtonView(private val context: ThemedReactContext) : FrameLayout(context) {
  private var buttonType: String? = null

  fun initialize() {
  //  val type =
  //    when (buttonType) {
  //      "pay" -> R.layout.pay_with_googlepay_button
  //      "standard" -> R.layout.googlepay_button
  //      else -> R.layout.googlepay_button
  //    }

  //  val button = LayoutInflater.from(context).inflate(
  //    type, null
  //  )

  //  addView(button)
  }

  fun setType(type: String) {
    buttonType = type
  }
}
  1. If you have added these dependencies into your build.gradle file, just comment them.
// implementation 'com.google.android.material:material:1.3.0'
// implementation 'com.stripe:stripe-android:20.12.+'

You need to do the same process whenever you execute npm install but if you want to automate this process follow the below steps.

  1. Create a shell script like this patch.sh and assign 777 permission, sudo chmod +x patch.sh
#!/bin/bash

ORIGINAL_DIR="node_modules/@stripe/stripe-react-native/android/src/main"
FIXED_DIR="patched_node_modules/@stripe/stripe-react-native/android/src/main"

# Remove the layout directory
rm -rf "$ORIGINAL_DIR/res/layout"

# Replace the file
cp "$FIXED_DIR/java/com/reactnativestripesdk/GooglePayButtonView.kt" "$ORIGINAL_DIR/java/com/reactnativestripesdk/GooglePayButtonView.kt"

echo "Successfully patched node_modules!"
  1. Create a patched Kotlin file inside patched_node_modules/@stripe/stripe-react-native/android/src/main/java/com/reactnativestripesdk/GooglePayButtonView.kt
package com.reactnativestripesdk

import android.view.LayoutInflater
import android.widget.FrameLayout
import com.facebook.react.uimanager.ThemedReactContext

class GooglePayButtonView(private val context: ThemedReactContext) : FrameLayout(context) {
  private var buttonType: String? = null

  fun initialize() {
  //  val type =
  //    when (buttonType) {
  //      "pay" -> R.layout.pay_with_googlepay_button
  //      "standard" -> R.layout.googlepay_button
  //      else -> R.layout.googlepay_button
  //    }

  //  val button = LayoutInflater.from(context).inflate(
  //    type, null
  //  )

  //  addView(button)
  }

  fun setType(type: String) {
    buttonType = type
  }
}
  1. Add postinstall script inside package.json
  "scripts": {
    ...
    "postinstall": "./patch.sh"
  },

That's it now until the Stripe team fixes this issue, we can survive.

Can you give the steps for a nx project ?

/root-folder
-------/apps
-----------/my-expo-mobile-project

               How to add it ?

@freddneos
Copy link

Any new about it guys ?

@nnphong1904
Copy link

Hi @retro @andreacab2, how you guys can make it work? I tried the solution but it doesn't work in my case

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.