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).
- 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
https://docs.expo.dev/get-started/set-up-your-environment/
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 usedSENTRY_AUTH_TOKEN
Ignore if Sentry is not used
Install dependencies and prebuild
yarn && yarn prebuild
iOS
yarn ios
Android
yarn android
I use eas build
& eas submit
locally for now, but planning to move it onto Github Actions in the near future.