CI/CD pipeline setup in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

Output of a basic React Native build command in CI

What is the expected output snippet when running npx react-native run-android --variant=release in a CI environment after a successful build?

React Native

npx react-native run-android --variant=release

A BUILD SUCCESSFUL in 45s\n3 actionable tasks: 3 executed\nInstalling APK on device\nStarting the app

B BUILD FAILED\nExecution failed for task ':app:compileDebugJavaWithJavac'.

C Error: Could not find an installed version of Gradle

D Command not found: npx

💡 Hint

Look for messages indicating a successful build and app installation.

The command triggers a release build for Android. A successful build shows 'BUILD SUCCESSFUL' and installation messages. Errors or missing commands indicate failure.

❓ Configuration

intermediate

Correct GitHub Actions step to cache React Native dependencies

Which GitHub Actions step correctly caches node_modules and ~/.gradle folders to speed up React Native CI builds?

A - name: Cache Gradle\n uses: actions/cache@v3\n with:\n path: ~/.gradle\n key: gradle-cache-${{ runner.os }}

B - name: Cache dependencies\n uses: actions/cache@v2\n with:\n path: node_modules\n key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}

C

- name: Cache node modules and Gradle\n  uses: actions/cache@v3\n  with:\n    path: |
      node_modules
      ~/.gradle
    key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}

D - name: Cache all files\n uses: actions/cache@v3\n with:\n path: .\n key: full-cache-${{ runner.os }}

💡 Hint

Caching both node_modules and Gradle folders together with a proper key is best.

Option C caches both node_modules and Gradle folders using actions/cache@v3 with a key based on package-lock.json hash, ensuring cache updates on dependency changes.

🔀 Workflow

advanced

Correct order of steps in a React Native CI/CD pipeline

Arrange the following steps in the correct order for a React Native CI/CD pipeline on Android:

A 2,3,1,4

B 3,2,1,4

C 1,2,3,4

D 2,1,3,4

💡 Hint

You must install dependencies before testing and building.

First install dependencies, then run tests to verify code, next build the APK, and finally upload it for distribution.

❓ Troubleshoot

advanced

Diagnosing a failed React Native Android build in CI

A CI build fails with the error: Execution failed for task ':app:mergeReleaseResources'. What is the most likely cause?

A Missing or conflicting resource files in the Android project

B Node.js version is too old

C Gradle daemon is not running

D Incorrect React Native version in package.json

💡 Hint

The error relates to merging resources, not Node.js or React Native versions.

The ':mergeReleaseResources' task fails usually due to missing or conflicting image, XML, or other resource files in the Android project.

✅ Best Practice

expert

Best practice for securing secrets in React Native CI/CD pipelines

Which method is the best practice to securely manage API keys and secrets in a React Native CI/CD pipeline?

A Write secrets in plain text in the CI pipeline YAML file

B Store secrets in environment variables configured in the CI platform and inject them at build time

C Save secrets in a public JSON file included in the app bundle

D Hardcode secrets in the React Native source code and commit to the repository

💡 Hint

Secrets should never be committed to source code or exposed publicly.

Using environment variables in the CI platform keeps secrets out of source code and allows secure injection during build without exposure.

Practice

1. What is the main purpose of setting up a CI/CD pipeline for a React Native app?

easy

A. To automate building, testing, and deploying the app

B. To manually test the app on different devices

C. To write the app's source code faster

D. To increase the app's download size

Solution

1. Step 1: Understand CI/CD pipeline purpose

   A CI/CD pipeline automates repetitive tasks like building and testing to save time and reduce errors.

2. Step 2: Identify correct purpose for React Native

   For React Native apps, CI/CD pipelines help automate building, testing, and deploying to catch errors early and deliver updates faster.

3. Final Answer:

   To automate building, testing, and deploying the app -> Option A

4. Quick Check:

   CI/CD = Automate build & deploy [OK]

Hint: CI/CD means automating build, test, deploy steps [OK]

Common Mistakes:

• Thinking CI/CD is for manual testing
• Confusing CI/CD with coding speed
• Believing CI/CD increases app size

2. Which of the following is a correct basic step in a GitHub Actions workflow file for React Native CI/CD?

easy

A. runs-on: ubuntu-latest

B. runs-on: windows-98

C. runs-on: macos-10.10

D. runs-on: android-5

Solution

1. Step 1: Identify supported runners in GitHub Actions

   GitHub Actions supports runners like ubuntu-latest, macos-latest, and windows-latest, but not outdated or invalid ones.

2. Step 2: Choose the valid runner for React Native CI/CD

   Using 'runs-on: ubuntu-latest' is common and valid for React Native workflows; others like windows-98 or android-5 are invalid or unsupported.

3. Final Answer:

   runs-on: ubuntu-latest -> Option A

4. Quick Check:

   Valid runner = ubuntu-latest [OK]

Hint: Use 'ubuntu-latest' for most React Native CI jobs [OK]

Common Mistakes:

• Using outdated OS versions
• Specifying unsupported runners
• Confusing runner names with device names

3. Given this GitHub Actions snippet for React Native CI/CD, what will be the output of the npm run test step if tests fail?

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm run test

medium

A. The workflow skips the test step silently

B. The workflow stops and marks the job as failed

C. The workflow retries the test step automatically

D. The workflow ignores test failures and continues

Solution

1. Step 1: Understand default behavior of GitHub Actions on command failure

   If a command like 'npm run test' fails (returns non-zero exit code), GitHub Actions stops the job and marks it as failed by default.

2. Step 2: Apply this to the given snippet

   Since no special flags or error handling are used, test failures will stop the workflow and mark the job as failed.

3. Final Answer:

   The workflow stops and marks the job as failed -> Option B

4. Quick Check:

   Failed test = job fails [OK]

Hint: Failed commands stop GitHub Actions by default [OK]

Common Mistakes:

• Assuming workflow continues after test failure
• Thinking tests auto-retry without config
• Believing failed steps are skipped silently

4. You wrote this GitHub Actions workflow for React Native but the build step never runs:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Build app
        run: npm run build

What is the most likely reason the build step is skipped?

medium

A. The job name 'build' is reserved and cannot be used

B. The 'uses' action is outdated and blocks steps

C. The 'npm run build' command is invalid in React Native

D. The workflow file is missing the 'on' trigger section

Solution

1. Step 1: Check required sections in GitHub Actions workflow

   Every workflow file needs an 'on' section to specify when it runs (e.g., on push or pull request). Without it, the workflow never triggers.

2. Step 2: Analyze given workflow

   The workflow lacks the 'on' trigger, so GitHub Actions never starts the job and steps, causing the build step to be skipped.

3. Final Answer:

   The workflow file is missing the 'on' trigger section -> Option D

4. Quick Check:

   Missing 'on' = workflow never runs [OK]

Hint: Always include 'on' trigger in workflow files [OK]

Common Mistakes:

• Thinking job names are restricted
• Assuming outdated actions block steps
• Believing npm build is invalid for React Native

5. You want to set up a CI/CD pipeline for your React Native app that runs tests on pushes to the main branch and deploys only when tests pass. Which GitHub Actions workflow snippet correctly implements this?

hard

A. on:
pull_request:
jobs:
test:
runs-on: ubuntu-latest
steps:
- run: npm run test
deploy:
runs-on: ubuntu-latest
steps:
- run: npm run deploy

B. on:
push:
branches:
- develop
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- run: npm run deploy

C. on:
push:
branches:
- main
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm run test
deploy:
needs: test
runs-on: ubuntu-latest
if: success()
steps:
- run: echo "Deploying app..."

D. on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- run: npm run deploy

Solution

1. Step 1: Identify trigger and branch conditions

   The pipeline should trigger on pushes to the main branch only, so 'on: push: branches: - main' is correct.

2. Step 2: Ensure tests run before deploy and deploy depends on test success

   Job 'deploy' depends on 'test' job with 'needs: test' and runs only if tests succeed using 'if: success()'.

3. Step 3: Verify steps in each job

   'test' job installs dependencies and runs tests; 'deploy' job runs deployment commands after tests pass.

4. Final Answer:

   The workflow that runs tests on main branch push and deploys only if tests pass -> Option C

5. Quick Check:

   Test before deploy on main branch =

   on:
     push:
       branches:
         - main
   jobs:
     test:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - run: npm install
         - run: npm run test
     deploy:
       needs: test
       runs-on: ubuntu-latest
       if: success()
       steps:
         - run: echo "Deploying app..."

   [OK]

Hint: Use 'needs' and 'if: success()' to chain jobs [OK]

Common Mistakes:

• Deploying without waiting for tests
• Triggering on wrong branches
• Missing job dependencies