expo sample by cesar-sosa-hol · Pull Request #107 · square/mobile-payments-sdk-react-native

cesar-sosa-hol · 2026-07-02T14:16:39Z

This PR create a new example using Expo instead RN pure
This PR also solves this issue
#55

Armaxis

🤖 [AI Artem]: Review pass on behalf of Artem — inline comments below, each tagged blocking / important / non-blocking, with a suggested fix where possible.

Armaxis · 2026-07-06T15:38:12Z

+| 🔒 Authorizing the SDK | [src/app/permissions.tsx](./src/app/permissions.tsx) |
+| 💰 Taking a Payment | [src/app/index.tsx](./src/app/index.tsx) |
+| ⚙️ Presenting Settings Screen | [src/app/index.tsx](./src/app/index.tsx) |
+| 💳 Presenting MockReaderUI | [src/app/index.tsx](./src/app/index.tsx) |


🤖 [AI Artem]: Blocking — these links point to src/app/permissions.tsx / src/app/index.tsx, which don't exist in this example (looks like leftovers from an expo-router layout). The actual files live under src/Screens/.

Suggested change

| 🔒 Authorizing the SDK | [src/app/permissions.tsx](./src/app/permissions.tsx) |

| 💰 Taking a Payment | [src/app/index.tsx](./src/app/index.tsx) |

| ⚙️ Presenting Settings Screen | [src/app/index.tsx](./src/app/index.tsx) |

| 💳 Presenting MockReaderUI | [src/app/index.tsx](./src/app/index.tsx) |

| 🔒 Authorizing the SDK | [src/Screens/PermissionsScreen.tsx](./src/Screens/PermissionsScreen.tsx) |

| 💰 Taking a Payment | [src/Screens/HomeScreen.tsx](./src/Screens/HomeScreen.tsx) |

| ⚙️ Presenting Settings Screen | [src/Screens/HomeScreen.tsx](./src/Screens/HomeScreen.tsx) |

| 💳 Presenting MockReaderUI | [src/Screens/HomeScreen.tsx](./src/Screens/HomeScreen.tsx) |

Armaxis · 2026-07-06T15:38:12Z

+
+```json
+[
+  "../app.plugin.js",


🤖 [AI Artem]: Blocking — this snippet doesn't match app.json, which registers the plugin as "./app.plugin.js". Anyone copy-pasting the README snippet gets a broken prebuild (the plugin path would resolve outside the project root).

Suggested change

"../app.plugin.js",

"./app.plugin.js",

Armaxis · 2026-07-06T15:38:12Z

+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",


🤖 [AI Artem]: Important to fix (quick) — ./scripts/reset-project.js isn't included in this PR, so this script fails for anyone who runs it. Same story for ./assets/images/favicon.png referenced by the web section of app.json (only appIcon.png is checked in). Suggest dropping this script and the web block — or adding the missing files.

Suggested change

"reset-project": "node ./scripts/reset-project.js",

Armaxis · 2026-07-06T15:38:12Z

+    if (modConfig.modResults.language === 'groovy') {
+      let contents = modConfig.modResults.contents;
+      const mpsdkDep =
+        'implementation("com.squareup.sdk:mobile-payments-sdk:2.5.0")';


🤖 [AI Artem]: Important to fix before merge — this pins the native SDK to 2.5.0, while the RN library declares its own dependency via squareSdkVersion in android/build.gradle. The extra implementation line is needed here (the library uses implementation, not api, so MainApplication.kt can't see MobilePaymentsSdk without it), but on the next SDK bump this will silently drift and the app would compile against a stale native SDK.

Suggest deriving the version from the installed library instead of hardcoding, e.g.:

const libGradle = fs.readFileSync( require.resolve('mobile-payments-sdk-react-native/android/build.gradle'), 'utf8' ); const sdkVersion = libGradle.match(/squareSdkVersion = "([^"]+)"/)[1];

or, at minimum, add a // keep in sync with android/build.gradle squareSdkVersion comment here and a matching one in the library's build.gradle.

I removed this dependency in expo example due in sdk now we are changing to api, i tested your suggestion but that it doesnt works

Armaxis · 2026-07-06T15:38:12Z

+      const kotlinArgs = `
+    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+        compilerOptions {
+            freeCompilerArgs.add("-Xskip-metadata-version-check")


🤖 [AI Artem]: Important to fix before merge — this adds -Xskip-metadata-version-check to every Kotlin compile task in the project to paper over the mismatch between the app's Kotlin 2.1.20 (pinned in app.json) and the library, which is built with Kotlin 2.2.x. That flag is explicitly unsupported by JetBrains: it can turn a compile-time incompatibility into runtime breakage, and it will also mask any future metadata incompatibilities from other libraries.

Suggested fix: bump kotlinVersion to 2.2.x in the expo-build-properties config in app.json and drop this block (see docs/KOTLIN_COMPATIBILITY.md in the repo root for the known RN-gradle-plugin caveats). If 2.2.x genuinely doesn't work with Expo 54's gradle plugin, keep the flag but add a comment explaining why it's needed and when it can be removed.

we cant bump to kotlin 2.2.x due RN limitation

Armaxis · 2026-07-06T15:38:12Z

+};
+
+const withSquareMobilePayments = (config, options) => {
+  if (!options || !options.applicationId) {


🤖 [AI Artem]: Important to fix (quick) — only applicationId is validated. If accessToken/locationId are omitted, prebuild succeeds but the Android buildConfigFields are never generated, so BuildConfig.ACCESS_TOKEN is undefined in PermissionsScreen.tsx and sign-in fails with a confusing error (same for the iOS Info.plist keys). Since this plugin is example-only and the example can't do anything useful without all three, suggest requiring them all:

for (const key of ['applicationId', 'accessToken', 'locationId']) { if (!options?.[key]) { throw new Error( `You must provide '${key}' for the Mobile Payments SDK plugin in app.json` ); } }

Armaxis · 2026-07-06T15:38:13Z

@@ -0,0 +1,107 @@
+import { Modal, View, Text, Button, StyleSheet } from 'react-native';


🤖 [AI Artem]: Non-blocking, nice to have — TestModal.tsx and SquareLogo.tsx aren't imported anywhere in this example; they're dead files. Suggest deleting both, or wiring TestModal into HomeScreen if it's meant to be used the way the bare example uses it.

Armaxis · 2026-07-06T15:38:13Z

+          "NSAllowsLocalNetworking": true
+        }
+      },
+      "bundleIdentifier": "com.anonymous.exampleexpo"


🤖 [AI Artem]: Non-blocking, nice to have — com.anonymous.exampleexpo is the default Expo placeholder; a Square sample should ship with a Square-ish identifier.

Suggested change

"bundleIdentifier": "com.anonymous.exampleexpo"

"bundleIdentifier": "com.squareup.mobilepaymentssdk.exampleexpo"

(and match it in android.package on line 28).

Armaxis · 2026-07-06T15:38:13Z

+  activeLabel,
+  inactiveLabel = '',
+}: LoadingButtonProps) => {
+  console.log(isActive ? activeLabel : inactiveLabel);


🤖 [AI Artem]: Non-blocking — a few quirks inherited from the bare example/ app (fine to fix here, or in a follow-up covering both apps):

this stray console.log fires on every render;

styles.loadingButtonActive is duplicated in the style array below (it's both the base style and the isActive branch);

HomeScreen.tsx charges { amount: 1, currencyCode: CurrencyCode.EUR } (1 euro cent) while the button says "Buy for $1";

observeAuthChanges in PermissionsScreen.tsx is declared async but contains no await.

I applied your suggestion changes

expo sample

d41f055

cesar-sosa-hol requested a review from Armaxis July 2, 2026 14:16

fix APP Id

fb1f392

cesar-sosa-hol linked an issue Jul 6, 2026 that may be closed by this pull request

Make an expo sample/update base to rn 79 #55

Closed

Armaxis reviewed Jul 6, 2026

View reviewed changes

Artem comments

527c253

cesar-sosa-hol requested a review from Armaxis July 8, 2026 14:27

Armaxis approved these changes Jul 8, 2026

View reviewed changes

cesar-sosa-hol merged commit 2808f0e into main Jul 8, 2026
11 checks passed

		@@ -0,0 +1,107 @@
		import { Modal, View, Text, Button, StyleSheet } from 'react-native';

	"bundleIdentifier": "com.anonymous.exampleexpo"
	"bundleIdentifier": "com.squareup.mobilepaymentssdk.exampleexpo"

Uh oh!

Conversation

cesar-sosa-hol commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Armaxis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cesar-sosa-hol commented Jul 2, 2026 •

edited

Loading