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

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.