Add reusable setup file

.github/actions/setup/action.yml

@@ -0,0 +1,27 @@
+name: Setup
+description: Setup Node.js and install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+
+    - name: Cache dependencies
+      id: yarn-cache
+      uses: actions/cache@v3
+      with:
+        path: |
+          **/node_modules
+          .yarn/install-state.gz
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          ${{ runner.os }}-yarn-
+
+    - name: Install dependencies
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      run: yarn install --immutable
+      shell: bash

.github/workflows/ci.yml

@@ -11,11 +11,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'yarn'
-      - run: yarn install --immutable
+      - name: Setup
+        uses: ./.github/actions/setup
+
       - run: yarn sample lint
 
   lint-native-module:
@@ -24,11 +22,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'yarn'
-      - run: yarn install --immutable
+      - name: Setup
+        uses: ./.github/actions/setup
+
       - run: yarn module lint
 
   lint-swift:
@@ -51,9 +47,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'yarn'
-      - run: yarn install --immutable
+      - name: Setup
+        uses: ./.github/actions/setup
+
       - run: yarn module build

sample/metro.config.js

@@ -5,6 +5,7 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pkg = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
+const sample = path.resolve(root, 'sample');
 
 const modules = Object.keys({...pkg.peerDependencies});
 /**
@@ -14,6 +15,8 @@ const modules = Object.keys({...pkg.peerDependencies});
  * @type {import('metro-config').MetroConfig}
  */
 const config = mergeConfig(getDefaultConfig(__dirname), {
+  projectRoot: sample,
+
   watchFolders: [root],
 
   // We need to make sure that only one version is loaded for peerDependencies
@@ -25,10 +28,15 @@ const config = mergeConfig(getDefaultConfig(__dirname), {
       ),
     ),
 
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
+    extraNodeModules: {
+      react: path.resolve(sample, 'node_modules', 'react'),
+      'react-native': path.resolve(sample, 'node_modules', 'react-native'),
+      'react-native-shopify-checkout-kit': path.resolve(
+        root,
+        'modules',
+        'react-native-shopify-checkout-kit',
+      ),
+    },
   },
 
   transformer: {

sample/src/App.tsx

@@ -106,7 +106,7 @@ function AppWithNavigation() {
           name="Cart"
           component={CartScreen}
           options={{
-            tabBarIcon: createNavigationIcon('shopping-cart'),
+            tabBarIcon: createNavigationIcon('shopping-bag'),
             tabBarBadge: totalQuantity > 0 ? totalQuantity : undefined,
           }}
         />

sample/src/screens/CartScreen.tsx

@@ -33,6 +33,7 @@ import {
   Pressable,
   RefreshControl,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/Entypo';
 
 import {ShopifyCheckout} from 'react-native-shopify-checkout-kit';
 import useShopify from '../hooks/useShopify';
@@ -102,6 +103,7 @@ function CartScreen(): JSX.Element {
   if (!data || !data.cart || data.cart.lines.edges.length === 0) {
     return (
       <View style={styles.loading}>
+        <Icon name="shopping-bag" size={60} color="#bbc1d6" />
         <Text style={styles.loadingText}>Your cart is empty.</Text>
       </View>
     );