POC: RN parameterize build test

.github/workflows/poc-build-system-test-react-native.yml

@@ -0,0 +1,16 @@
+# Description: this workflow runs build mega-apps that have all the connected components for React Native.
+
+name: POC / Build System Test Canary / React Native / parameterize
+
+permissions:
+  id-token: write # This is required for aws-actions/configure-aws-credentials
+
+on:
+    pull_request:
+        branches: [rn-parameterize-build-test]
+
+jobs:
+  build:
+    uses: ./.github/workflows/reusable-build-system-test-react-native.yml
+    with:
+      dist-tag: latest

.github/workflows/poc-build-system-test.yml

@@ -0,0 +1,23 @@
+# Description: this workflow runs build mega-apps that have all the connected components.
+
+name: POC / Build System Test Canary / parameterize
+
+permissions:
+  id-token: write # This is required for aws-actions/configure-aws-credentials
+
+on:
+    pull_request:
+        branches: [rn-parameterize-build-test]
+
+jobs:
+  build:
+    uses: ./.github/workflows/reusable-build-system-test.yml
+    with:
+      dist-tag: latest
+    secrets:
+      AUTH_E2E_ROLE_ARN: ${{ secrets.AUTH_E2E_ROLE_ARN }}
+      DOMAIN: ${{ secrets.DOMAIN }}
+      PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
+      USERNAME: ${{ secrets.USERNAME }}
+      NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
+      VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}

.github/workflows/reusable-build-system-test-react-native.yml

@@ -16,24 +16,97 @@ jobs:
       fail-fast: false
       matrix:
         framework: [react-native]
-        framework-version: [latest]
-        # uncomment to re-enable
-        # build-tool: [cli, expo]
-        build-tool: [expo]
+        framework-version:
+          [
+            # uncomment to enable
+            # { formatted: latest, value: latest },
+            { formatted: 075, value: 0.75 },
+            { formatted: 074, value: 0.74 },
+            { formatted: 073, value: 0.73 },
+            { formatted: 072, value: 0.72 },
+            { formatted: 071, value: 0.71 },
+          ]
+        build-tool: [cli, expo]
         build-tool-version: [latest]
         pkg-manager: [npm]
-        language: [ts]
-        node-version: [18]
-        platform: [ios, android]
+        node-version: [20]
+        # uncomment to enable
+        # platform: [ios, android]
+        platform: [android]
         logfile: [test.log]
-        pkg-manager-version: [latest]
         exclude:
           - build-tool: expo
             platform: ios
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '075', value: '0.75' }
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '074', value: '0.74' }
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '073', value: '0.73' }
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '072', value: '0.72' }
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '071', value: '0.71' }
+        include:
+          # Expo makes you specify a version of the SDK that supports that a particular version of React Native 
+          # https://stackoverflow.com/questions/63463373/create-an-expo-project-with-a-specific-version 
+          - framework: react-native
+            framework-version: { formatted: 070, value: '0.70' }
+            build-tool: expo
+            build-tool-version: 47
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 071, value: '0.71' }
+            build-tool: expo
+            build-tool-version: 48
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 072, value: '0.72' }
+            build-tool: expo
+            build-tool-version: 49
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 073, value: '0.73' }
+            build-tool: expo
+            build-tool-version: 50
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 074, value: '0.74' }
+            build-tool: expo
+            build-tool-version: 51
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 075, value: '0.75' }
+            build-tool: expo
+            build-tool-version: 51
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
 
     env:
-      MEGA_APP_NAME: rn-${{ matrix.framework-version }}-${{ matrix.build-tool }}-${{ matrix.build-tool-version }}-${{ matrix.language }}-${{ matrix.platform }}-ui-${{ inputs.dist-tag }}
-
+      MEGA_APP_NAME: rn${{ matrix.framework-version.formatted }}${{ matrix.build-tool }}${{ matrix.build-tool-version }}${{ matrix.platform }}ui${{ inputs.dist-tag }}
+      EMULATOR_PORT: 5554
     steps:
       - name: Checkout Amplify UI
         uses: actions/checkout@b80ff79f1755d06ba70441c368a6fe801f5f3a62 # v4.1.3 https://github.com/actions/checkout/commit/cd7d8d697e10461458bc61a30d094dc601a8b017
@@ -53,7 +126,7 @@ jobs:
         uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2 https://github.com/actions/cache/commit/0c45773b623bea8c8e75f6c82b208c3cf94ea4f9
         with:
           path: ./examples/react-native/ios/Pods
-          key: ${{ runner.os }}-cocoapods-${{ inputs.commit }}
+          key: ${{ runner.os }}-cocoapods
           restore-keys: pods-${{ hashFiles('examples/react-native/ios/Podfile.lock') }}
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
@@ -65,7 +138,7 @@ jobs:
           path: |
             ./node_modules
             **/node_modules
-          key: ${{ runner.os }}-nodemodules-${{ inputs.commit }}
+          key: ${{ runner.os }}-nodemodules
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3
       - name: Install Java 17
@@ -105,7 +178,7 @@ jobs:
       - name: Start Android emulator
         if: ${{ matrix.platform == 'android' }}
         run: |
-          nohup $ANDROID_HOME/emulator/emulator -avd Pixel_5_API_27 -no-boot-anim -no-audio -no-snapshot-load -gpu host -accel on &
+          nohup $ANDROID_HOME/emulator/emulator -avd Pixel_5_API_27 -port ${{ env.EMULATOR_PORT }} -no-boot-anim -no-audio -no-snapshot-load -gpu host -accel on &
           $ANDROID_HOME/platform-tools/adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed | tr -d '\r') ]]; do sleep 1; done; input keyevent 82'
           $ANDROID_HOME/platform-tools/adb devices
           # disable spell checker
@@ -116,7 +189,7 @@ jobs:
           $ANDROID_HOME/platform-tools/adb shell settings put global animator_duration_scale 0.0
 
       - name: Create MegaApp ${{ env.MEGA_APP_NAME }} and run build on NodeJS ${{ matrix.node-version }}
-        run: npm run ${{ env.MEGA_APP_NAME }}
+        run: npm run setup:${{matrix.framework}}:${{matrix.build-tool}} -- --name ${{ env.MEGA_APP_NAME }} --platform ${{matrix.platform}} --tag ${{inputs.dist-tag}} --framework-version ${{matrix.framework-version.value}} --build-tool-version ${{matrix.build-tool-version}}
         shell: bash
         working-directory: build-system-tests
       - name: Detect Mega App Error in Log

.github/workflows/reusable-build-system-test.yml

@@ -153,7 +153,7 @@ jobs:
         env:
           SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
       - name: Run E2E tests against ${{ env.MEGA_APP_NAME }} example
-        run: npm run test
+        run: npm run test:web
         id: e2e
         working-directory: build-system-tests
         env:

build-system-tests/e2e/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "rimraf node_modules",
     "dev": "TZ=UTC cypress open",
-    "test": "TZ=UTC cypress run --spec 'features/**/*.feature'"
+    "test:web": "TZ=UTC cypress run --spec 'features/**/*.feature'"
   },
   "cypress-cucumber-preprocessor": {
     "filterSpecs": true,

build-system-tests/package.json

@@ -10,8 +10,9 @@
     "strip-json-comments-cli": "^2.0.2"
   },
   "scripts": {
-    "test": "yarn --cwd e2e test",
+    "checkReactNativeLogs": "node --require esbuild-register ./scripts/checkReactNativeLog.ts",
     "pull": "./environments/pull-environments.sh",
+    "test:web": "yarn --cwd e2e test:web",
     "setup:react": "./scripts/setup-mega-app.sh",
     "setup:react:next": "./scripts/setup-mega-app.sh --build-tool next",
     "setup:react:vite": "./scripts/setup-mega-app.sh --build-tool vite",
@@ -23,16 +24,6 @@
     "setup:vue:nuxt": "./scripts/setup-mega-app.sh -F vue --build-tool nuxt",
     "setup:react-native": "./scripts/setup-mega-app.sh -F react-native",
     "setup:react-native:cli": "./scripts/setup-mega-app.sh -F react-native -B cli",
-    "setup:react-native:expo": "./scripts/setup-mega-app.sh -F react-native -B expo",
-    "rn-latest-cli-latest-ts-ios-ui-latest": "npm run setup:react-native:cli -- -A ios",
-    "rn-latest-cli-latest-ts-ios-ui-next": "npm run setup:react-native:cli -- -A ios -t next",
-    "rn-latest-cli-latest-ts-ios-ui-hotfix": "npm run setup:react-native:cli -- -A ios -t hotfix",
-    "rn-latest-cli-latest-ts-android-ui-latest": "npm run setup:react-native:cli -- -A android",
-    "rn-latest-cli-latest-ts-android-ui-next": "npm run setup:react-native:cli -- -A android -t next",
-    "rn-latest-cli-latest-ts-android-ui-hotfix": "npm run setup:react-native:cli -- -A android -t hotfix",
-    "rn-latest-expo-latest-ts-android-ui-latest": "npm run setup:react-native:expo -- -A android -n rn-latest-expo-latest-ts-android-ui-latest",
-    "rn-latest-expo-latest-ts-android-ui-next": "npm run setup:react-native:expo -- -A android -n rn-latest-expo-latest-ts-android-ui-next -t next",
-    "rn-latest-expo-latest-ts-android-ui-hotfix": "npm run setup:react-native:expo -- -A android -n rn-latest-expo-latest-ts-android-ui-hotfix -t hotfix",
-    "checkReactNativeLogs": "node --require esbuild-register ./scripts/checkReactNativeLog.ts"
+    "setup:react-native:expo": "./scripts/setup-mega-app.sh -F react-native -B expo"
   }
 }

build-system-tests/scripts/build-android.sh

@@ -32,13 +32,17 @@ if [ $BUILD_TOOL == 'expo' ]; then
   # Run npm run android in the background
   npm run android -- -p 19000 >$LOG_FILE &
   npx wait-on -t 20000 tcp:19000
+  npx expo prebuild
 else
   log "command" "cd android >$LOG_FILE "
   cd android >$LOG_FILE
   log "command" "./gradlew clean >$LOG_FILE" # To prevent "installDebug FAILED" https://stackoverflow.com/a/54955869/12610324
   ./gradlew clean >$LOG_FILE
   log "command" "cd .. >$LOG_FILE"
   cd .. >$LOG_FILE
+  log "command" "npm run start &"
+  npm run start &
+  npx wait-on -t 5000 tcp:8081
   log "command" "npm run android >$LOG_FILE"
   npm run android >$LOG_FILE
 fi

build-system-tests/scripts/mega-app-copy-files.sh

@@ -131,4 +131,9 @@ if [[ "$FRAMEWORK" == "react-native" ]]; then
     cp templates/components/react-native/cli/App.tsx mega-apps/${MEGA_APP_NAME}/App.tsx
     echo "cp $AWS_EXPORTS_FILE mega-apps/${MEGA_APP_NAME}/aws-exports.js"
     cp $AWS_EXPORTS_FILE mega-apps/${MEGA_APP_NAME}/aws-exports.js
+    if [ "$BUILD_TOOL" == 'expo' ]; then
+        # Fixes "Project must have a `android.package` set in the Expo config (app.json or app.config.js)."
+        echo npx json -I -f mega-apps/${MEGA_APP_NAME}/app.json -e "this.expo.android.package = 'com.anonymous.${MEGA_APP_NAME}'; this.expo.ios.bundleIdentifier = 'com.anonymous.${MEGA_APP_NAME}';"
+        npx json -I -f mega-apps/${MEGA_APP_NAME}/app.json -e "this.expo.android.package = 'com.anonymous.${MEGA_APP_NAME}'; this.expo.ios.bundleIdentifier = 'com.anonymous.${MEGA_APP_NAME}';"
+    fi
 fi

build-system-tests/scripts/mega-app-create-app.sh

@@ -100,8 +100,13 @@ if [[ "$FRAMEWORK" == 'react-native' ]]; then
     echo "rm -rf $MEGA_APP_NAME" # Remove $MEGA_APP_NAME if it exists
     rm -rf $MEGA_APP_NAME
     if [[ "$BUILD_TOOL" == 'cli' ]]; then
-        echo "npx react-native@${BUILD_TOOL_VERSION} init $MEGA_APP_NAME --version $FRAMEWORK_VERSION"
-        npx react-native@${BUILD_TOOL_VERSION} init $MEGA_APP_NAME --version $FRAMEWORK_VERSION
+        if [[ $BUILD_TOOL_VERSION == 9 ]]; then # RN CLI v9 doesn't recognize --pm flag
+            echo "npx @react-native-community/cli@$BUILD_TOOL_VERSION init $MEGA_APP_NAME --version $FRAMEWORK_VERSION"
+            npx @react-native-community/cli@$BUILD_TOOL_VERSION init $MEGA_APP_NAME --version $FRAMEWORK_VERSION
+        else # --pm flag fixes https://github.com/CocoaPods/CocoaPods/issues/12546
+            echo "npx @react-native-community/cli@$BUILD_TOOL_VERSION init $MEGA_APP_NAME --version $FRAMEWORK_VERSION --pm npm"
+            npx @react-native-community/cli@$BUILD_TOOL_VERSION init $MEGA_APP_NAME --version $FRAMEWORK_VERSION --pm npm
+        fi
         # React-Native, since 0.71.8,
         # no longer shows warning "npm WARN exec The following package was not found and will be installed: react-native@0.71.8",
         # so we log the package.json to check the versions
@@ -110,11 +115,11 @@ if [[ "$FRAMEWORK" == 'react-native' ]]; then
         echo "npm list react-native"
         npm list react-native
     elif [[ "$BUILD_TOOL" == "expo" ]]; then
-        echo "npx create-expo-app $MEGA_APP_NAME --template expo-template-blank-typescript@sdk-51"
-        npx create-expo-app $MEGA_APP_NAME --template expo-template-blank-typescript@sdk-51 # Temporarily pin expo to version 51
+        echo "npx create-expo-app $MEGA_APP_NAME --template expo-template-blank-typescript@$BUILD_TOOL_VERSION"
+        npx create-expo-app $MEGA_APP_NAME --template expo-template-blank-typescript@$BUILD_TOOL_VERSION
         echo "cd $MEGA_APP_NAME"
         cd $MEGA_APP_NAME
-        echo "npm list expo" # Log the package.json to check the expo version should be later than 48.0.19
+        echo "npm list expo" # Log the package.json to check the expo version
         npm list expo
         echo "npx expo-env-info"
         npx expo-env-info

build-system-tests/scripts/mega-app-install.sh

@@ -109,6 +109,11 @@ else
         echo "npm install $DEPENDENCIES"
         npm install $DEPENDENCIES
         if [[ "$BUILD_TOOL" == "expo" ]]; then
+            if [[ "$FRAMEWORK_VERSION" == "0.75" ]]; then 
+                # Expo SDK version 51.0.0 supports RN 0.74 and 0.75 but installs 0.74 by default https://expo.dev/changelog/2024/08-14-react-native-0.75#2-install-updated-packages
+                echo "npx expo install react-native@~0.75.0"
+                npx expo install react-native@~0.75.0
+            fi
             echo "npx expo install --fix"
             npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio
         fi