React Native App Integration

Written by Bird Pickup & Delivery

Updated October 20, 2026

Show the Bird Pickup & Delivery scheduler on your app’s cart screen, between the cart items and the checkout button. It uses your Bird settings and saves the customer’s choice to the cart your app checks out with.

Requirements

Bird Pickup & Delivery on the Scale plan.
Your app uses a Shopify Storefront API cart and checks out with its checkoutUrl.

Install

npm install @birdchime/react-native react-native-webview

Usage

import { BirdWidget } from '@birdchime/react-native';

<ScrollView ref={scrollRef}>
  <CartItems cart={cart} />

  <BirdWidget
    shop="your-store.myshopify.com"
    cart={cart}
    onChange={setState}
    onError={() => setUnavailable(true)}
    onInputFocus={(y) => scrollRef.current?.scrollTo({ y: widgetY + y - 80 })}
  />

  <Button
    title="Checkout"
    disabled={!(unavailable || state?.canCheckout)}
    onPress={() => openCheckout(cart.checkoutUrl)}
  />
</ScrollView>

Props

💡

Prop	Required	Description
`shop`	Yes	Your `*.myshopify.com` domain.
`cart`	Yes	Your Storefront API cart, passed as-is.
`customer`	No	`{ id, tags }` of the logged-in customer.
`locale`	No	Widget language, for example `'fr'`.
`onChange`	No	Receives `{ canCheckout, syncing, selection }`.
`onError`	No	Called if the widget can’t load.
`onInputFocus`	No	Receives the focused field’s position, so you can scroll it above the keyboard.

Good to know

Checkout: enable your checkout button only when canCheckout is true. If onError fires, let checkout through.
Cart changes: pass the updated cart every time it changes. The widget saves the customer’s choice to the cart for you.
Cart attributes: if your app calls cartAttributesUpdate, include the cart’s existing attributes, or the customer’s choice is erased.
iOS: add NSLocationWhenInUseUsageDescription to Info.plist for nearest-store lookup.

Integrating the Bird Widget in a Shopify Headless Storefront

Was this article helpful?

Widget APIs (REST & JavaScript) Listen for Widget State Changes with Custom Events Developer Settings: Widget Placement, Custom CSS & JavaScript Integrating the Bird Widget in a Shopify Headless Storefront