React Native mobile app

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

Try it

Open a live demo on your phone or in the browser (iOS or Android preview):

• Cart widget demo
• Product widget demo

Requirements

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

Install

Package: @birdchime/react-native on npm

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

Usage

Cart widget

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

const bird = useRef(null);

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

  <BirdWidget
    ref={bird}
    shop="your-store.myshopify.com"
    cart={cart}
    onInputFocus={(y) => scrollRef.current?.scrollTo({ y: widgetY + y - 80 })}
  />
</ScrollView>

<Button
  title="Checkout"
  onPress={() => {
    if (bird.current?.reportValidity() === false) return; // the widget shows what's missing
    openCheckout(cart.checkoutUrl);
  }}
/>

Product widget

Shows pickup and delivery availability for the variant on screen.

<BirdWidget shop="your-store.myshopify.com" type="product" item={{ variantId }} />

Props

ref.current?.reportValidity() works like the browser’s form.reportValidity(): true when checkout can proceed, false when it can’t (the widget shows the fields the customer still has to fill in), and undefined if the widget hasn’t loaded or can’t load.

Good to know

• Checkout: call reportValidity() when the button is tapped and block only on false, so checkout keeps working if the widget can’t load. Don’t disable the button.
• Updates: only shop and type reload the widget. cart, customer, locale and item update in place.
• 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.

Related Articles

• Developer Overview
• Headless Storefronts (Hydrogen and Custom)