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.