A Pawfect Place App

A Pawfect Place is a React Native Expo app designed to provide a mobile shopping experience for my Shopify store - https://apawfectplace.com.au/.

Download it from stores: App Store, Google Play (under review).

Featured API and packages

• Products listing with Shopify Storefront API
• Passwordless login with Shopify Customer Account API
• Products reviews with Judge.me API
• Checkout with @shopify/checkout-sheet-kit
• List component with @shopify/flash-list
• Dark Mode and Styling with @shopify/restyle
• Server State with @tanstack/react-query
• Client State with zustand
• Persistent Storage with react-native-mmkv

Get started

Set up Expo environment

https://docs.expo.dev/get-started/set-up-your-environment/

Set up .env

EXPO_PUBLIC_SHOPIFY_STOREFRONT_API_ACCESS_TOKEN=
EXPO_PUBLIC_SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID=
EXPO_PUBLIC_SHOPIFY_CUSTOMER_ACCOUNT_AUTH_REDIRECT_URL=
EXPO_PUBLIC_SENTRY_DSN=
SENTRY_AUTH_TOKEN=

• EXPO_PUBLIC_SHOPIFY_STOREFRONT_API_ACCESS_TOKEN

Used to make requests for Storefront API. Accessible from Shopify Headless app OR a Custom app.

• EXPO_PUBLIC_SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID

Used to setup Customer Account API. Accessible from Headless app - Customer Account API.

NOTE: Make sure the new customer account experience is enabled in Shopify

• EXPO_PUBLIC_SHOPIFY_CUSTOMER_ACCOUNT_AUTH_REDIRECT_URL

The same URL in Headless - Customer Account API - Application setup - Callback URI(s).

In my case, since Shopify only allows https OAuth callback url (universal link like apawfectplace:// is not allowed), so I created an intermediary web page to handle the redirection (like the idea here).

When Shopify does support deeplink as the callback url in the future, we can possibly utilize the expo-auth-session library to handle OAuth flow more seamlessly. (see more in https://docs.expo.dev/guides/authentication/)

• EXPO_PUBLIC_SENTRY_DSN Ignore if Sentry is not used
• SENTRY_AUTH_TOKEN Ignore if Sentry is not used

Run the dev app

Install dependencies and prebuild

yarn && yarn prebuild

iOS

yarn ios

Android

yarn android

Build & Deploy

I use eas build & eas submit locally for now, but planning to move it onto Github Actions in the near future.