Bird
Raised Fist0
React Nativemobile~20 mins

CI/CD pipeline setup in React Native - Mini App: Build & Ship

Choose your learning style10 modes available
LearnWhyDeepUITryChallengeBuildRecallPublish
Build: CI/CD Pipeline Setup Guide
This screen guides users through setting up a basic CI/CD pipeline for a React Native app using GitHub Actions.
Target UI
----------------------------------
| CI/CD Pipeline Setup Guide      |
|--------------------------------|
| 1. Connect your GitHub repo     |
| 2. Add workflow YAML file       |
| 3. Configure build and test     |
| 4. Deploy to app store          |
|                                |
| [Start Setup]                  |
----------------------------------
Display a title and step list for CI/CD setup
Include a button labeled 'Start Setup'
When button is pressed, show a modal with a sample GitHub Actions YAML code snippet
Modal should have a close button
Use React Native components only
Starter Code
React Native
import React, { useState } from 'react';
import { View, Text, Button, Modal, ScrollView, StyleSheet } from 'react-native';

export default function CICDPipelineSetup() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>CI/CD Pipeline Setup Guide</Text>
      <Text style={styles.step}>1. Connect your GitHub repo</Text>
      <Text style={styles.step}>2. Add workflow YAML file</Text>
      <Text style={styles.step}>3. Configure build and test</Text>
      <Text style={styles.step}>4. Deploy to app store</Text>

      <Button title="Start Setup" onPress={() => setModalVisible(true)} />

      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          {/* TODO: Add code snippet and close button here */}
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  step: { fontSize: 16, marginBottom: 10 },
  modalContainer: { flex: 1, padding: 20, backgroundColor: '#f0f0f0' }
});
Task 1
Task 2
Solution
React Native
import React, { useState } from 'react';
import { View, Text, Button, Modal, ScrollView, StyleSheet } from 'react-native';

export default function CICDPipelineSetup() {
  const [modalVisible, setModalVisible] = useState(false);

  const yamlSnippet = `name: React Native CI\non: [push, pull_request]\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - name: Setup Node.js\n        uses: actions/setup-node@v3\n        with:\n          node-version: '18'\n      - run: npm install\n      - run: npm test\n      - name: Build Android\n        run: ./gradlew assembleRelease\n      - name: Build iOS\n        run: xcodebuild -workspace ios/YourApp.xcworkspace -scheme YourApp -sdk iphoneos -configuration Release build\n`;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>CI/CD Pipeline Setup Guide</Text>
      <Text style={styles.step}>1. Connect your GitHub repo</Text>
      <Text style={styles.step}>2. Add workflow YAML file</Text>
      <Text style={styles.step}>3. Configure build and test</Text>
      <Text style={styles.step}>4. Deploy to app store</Text>

      <Button title="Start Setup" onPress={() => setModalVisible(true)} />

      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <ScrollView>
            <Text style={styles.codeBlock}>{yamlSnippet}</Text>
          </ScrollView>
          <Button title="Close" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  step: { fontSize: 16, marginBottom: 10 },
  modalContainer: { flex: 1, padding: 20, backgroundColor: '#f0f0f0' },
  codeBlock: { fontFamily: 'monospace', fontSize: 14, backgroundColor: '#e0e0e0', padding: 10, borderRadius: 5 }
});

This React Native screen shows a simple guide for setting up a CI/CD pipeline using GitHub Actions. The main screen lists the steps clearly with a button to start the setup.

When the user taps the 'Start Setup' button, a modal appears showing a scrollable code snippet of a sample GitHub Actions YAML file. This snippet includes basic steps like checking out code, installing Node.js, running tests, and building Android and iOS apps.

The modal also has a close button to dismiss it. The code uses React Native's Modal, ScrollView, and Button components for a smooth user experience.

Final Result
Completed Screen
----------------------------------
| CI/CD Pipeline Setup Guide      |
|--------------------------------|
| 1. Connect your GitHub repo     |
| 2. Add workflow YAML file       |
| 3. Configure build and test     |
| 4. Deploy to app store          |
|                                |
| [Start Setup]                  |
----------------------------------

-- After tapping Start Setup --
----------------------------------
| GitHub Actions Workflow         |
|--------------------------------|
| name: React Native CI           |
| on: [push, pull_request]        |
| jobs:                         |
|   build:                     |
|     runs-on: ubuntu-latest    |
|     steps:                   |
|       - uses: actions/checkout@v3 |
|       - name: Setup Node.js    |
|         uses: actions/setup-node@v3 |
|         with:                 |
|           node-version: '18'  |
|       - run: npm install      |
|       - run: npm test         |
|       - name: Build Android   |
|         run: ./gradlew assembleRelease |
|       - name: Build iOS       |
|         run: xcodebuild ...   |
|                                |
| [Close]                        |
----------------------------------
User taps 'Start Setup' button to open modal with YAML code snippet
User scrolls through the code snippet inside the modal
User taps 'Close' button to dismiss the modal and return to main screen
Stretch Goal
Add a dark mode toggle to switch the screen colors between light and dark themes.
💡 Hint
Use React Native's useColorScheme hook or a state variable to toggle styles dynamically.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard