Project structure overview in React Native - Mini App: Build & Ship

Build: Project Structure Overview

This screen shows a simple overview of a React Native project folder structure with folder and file names.

Target UI

Project Structure Overview

root/
├── App.js
├── package.json
├── node_modules/
├── assets/
│   └── logo.png
├── src/
│   ├── components/
│   │   └── Header.js
│   ├── screens/
│   │   └── HomeScreen.js
│   └── utils/
│       └── helpers.js

Display the project root folder name at top

Show a tree view of folders and files as text

Use indentation and lines to represent folder hierarchy

Use monospace font style for the structure text

Make the screen scrollable if content overflows

Starter Code

React Native

import React from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';

export default function ProjectStructure() {
  return (
    <View style={styles.container}>
      {/* TODO: Add project structure text here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';

export default function ProjectStructure() {
  const projectTree = `Project Structure Overview\n\nroot/\n├── App.js\n├── package.json\n├── node_modules/\n├── assets/\n│   └── logo.png\n├── src/\n│   ├── components/\n│   │   └── Header.js\n│   ├── screens/\n│   │   └── HomeScreen.js\n│   └── utils/\n│       └── helpers.js`;

  return (
    <View style={styles.container}>
      <ScrollView>
        <Text style={styles.structureText}>{projectTree}</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  },
  structureText: {
    fontFamily: 'monospace',
    fontSize: 16,
    lineHeight: 24
  }
});

This screen uses a ScrollView to allow scrolling if the project structure text is too long for the screen. The project folder tree is stored as a single string with line breaks and indentation using spaces and special characters to represent the folder hierarchy visually. The Text component uses a monospace font so the alignment looks neat and consistent. This simple approach helps beginners understand how a React Native project folder might be organized by showing a clear text tree.

Final Result

Completed Screen

Project Structure Overview

root/
├── App.js
├── package.json
├── node_modules/
├── assets/
│   └── logo.png
├── src/
│   ├── components/
│   │   └── Header.js
│   ├── screens/
│   │   └── HomeScreen.js
│   └── utils/
│       └── helpers.js

User can scroll vertically if the content does not fit the screen

Stretch Goal

Add a button to toggle between light and dark mode for the project structure screen.

💡 Hint

Use React useState to track mode and change background and text colors accordingly.