React Native

One provider near your app root, one hook where the button lives.

Install

shell

npm install @mealio/react-native-cart react-native-webview
# optional, lets signOutOfAllStores clear both cookie jars on iOS
npm install @react-native-cookies/cookies
cd ios && pod install

Expo Go cannot load native WebView configuration this needs. Use an Expo development build (npx expo run:ios or EAS).

Provider

App.tsx

<MealioProvider
  publishableKey="pk_live_..."
  getSessionToken={fetchMealioSessionFromYourServer}
  accentColor="#DD0031"
>
  <App />
</MealioProvider>

Prop	Notes
`publishableKey`	From the dashboard. Safe to ship.
`getSessionToken`	Returns a session token from your server. Called again when one expires.
`epochStorage`	Optional { get, set } that persists a number. Lets sign-out survive app restarts fully.
`accentColor`	Color of the sign-in sheet header.
`baseUrl`	Leave unset. For Mealio staff testing only.

Prepare a cart

const mealio = useMealio();
const cart = await mealio.prepareCart({
  store: 'heb',              // see GET /api/v1/stores
  zip: '78704',              // required for Kroger family stores
  recipe: { id: 'chicken-tinga', title: 'Chicken Tinga', ingredients: [{ name: '2 cloves garlic, minced' }] },
});

If the user is signed out of the store, a sheet with the store's own sign-in page slides up. It closes on its own once they are in. The call then searches every ingredient and resolves.

Let the user choose

for (const item of cart.needsChoice) {
  // item.ingredient, item.quantity, item.options[0..7]
  // option: { id, name, price, imageUrl, size, outOfStock, badge, preferences? }
}
cart.choose('garlic', item.options[0].id);
cart.choose('deli turkey', product.id, { preferenceId: product.preferences[0].id }); // H-E-B "sliced or shaved?"
cart.skip('salt');
const result = await cart.addToCart();
// result.added, result.skipped, result.failed, result.storeCartUrl

Or render <MealioCartSheet cart={cart} onDone={...} /> for a ready-made screen. Items in cart.ready are the user's own earlier choices for this recipe and are added unless you call cart.skip.

Sign out

await mealio.signOutOfAllStores() clears the store sessions on this device.

Stores that offer "Sign in with Google" need email and password, because Google blocks its sign-in inside embedded WebViews.