Expo integration

Use @easylabs/react-native in a Expo project — guided tour of the example app.

A complete, runnable Expo example lives at easy-sdk/examples/react-native-example. This page is a guided tour — it points to the most-relevant files in that example so you can see the SDK wired into a real project, not just isolated snippets.

Source code

Repository: itseasyco/easy-sdk
Path: examples/react-native-example
README: examples/react-native-example/README.md

What this example covers

Mounting EasyProvider once at the app root, above React Navigation.
A two-screen native stack (@react-navigation/native-stack) — Home, Checkout, Profile.
A full card checkout using the three separate native elements (CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement) and useEasy().checkout().
Customer CRUD — list with getCustomers, create with createCustomer, update with updateCustomer.
Reading API keys from Expo public env vars (EXPO_PUBLIC_EASY_API_KEY).
Expo newArchEnabled: true configuration with the expo-build-properties plugin pinning Android to arm64-v8a.

Key files

File	What it shows
`App.tsx`	`EasyProvider` mounted at the root, wrapping `NavigationContainer` and the stack navigator.
`src/screens/CheckoutScreen.tsx`	Full card capture + `checkout()` flow with separate elements, billing address, and loading state.
`src/screens/ProfileScreen.tsx`	Customer list / create / edit with `getCustomers`, `createCustomer`, `updateCustomer`.
`src/screens/HomeScreen.tsx`	Plain navigation surface — useful as a template for screens that don't touch the SDK directly.
`app.json`	Expo config: `newArchEnabled: true`, `expo-build-properties` for Android arch pinning.
`package.json`	Pinned versions: Expo `~54.0.22`, React Native `0.81.5`, React `19.1.0`.

Run it locally

From the monorepo root:

pnpm install
pnpm run build:packages

In examples/react-native-example, create .env.local:

EXPO_PUBLIC_EASY_API_KEY=sk_test_…

Then start Metro:

cd examples/react-native-example
pnpm start

Press i for iOS, a for Android. iOS requires Xcode and an iOS Simulator; Android requires Android Studio with an emulator or a connected device.

If you hit hook errors after editing the SDK itself, clear Metro's cache:

npx expo start --clear

Adapting it

Common modifications teams make when starting from this example:

Replace the price_id in CheckoutScreen.tsx with one of your own product price IDs from the dashboard.
Swap separate elements for a single combined input by replacing the three card refs with a different layout — the SDK supports either pattern through tokenizePaymentInstrument.
Add bank account support by mounting two TextElement components for routing and account numbers and switching source.type to BANK_ACCOUNT. See the Payment Form recipe.
Move the API key off EXPO_PUBLIC_* for bare-RN builds — use react-native-config or your own native config and pass the resolved string into EasyProvider.
Swap React Navigation for Expo Router — EasyProvider doesn't depend on either; mount it inside app/_layout.tsx for Expo Router instead of in App.tsx.