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.

Practice

1. In a typical React Native project, where should you place your main app code for better organization?

easy

A. Inside the android folder

B. Directly in the root folder

C. Inside a folder named src

D. Inside the ios folder

Solution

1. Step 1: Understand folder roles

   The android and ios folders contain platform-specific native code, not app logic.

2. Step 2: Identify app code location

   App code is best organized inside a src folder to keep it separate and clear.

3. Final Answer:

   Inside a folder named src -> Option C

4. Quick Check:

   App code = src folder [OK]

Hint: App code goes in src folder, not platform folders [OK]

Common Mistakes:

• Putting app code inside android or ios folders
• Keeping all code in the root folder without organization

2. Which of the following is the correct folder name for platform-specific Android code in a React Native project?

easy

A. android

B. android_src

C. AndroidCode

D. androidApp

Solution

1. Step 1: Recall standard folder names

   React Native uses android as the folder name for Android platform code by default.

2. Step 2: Compare options

   Only android matches the exact folder name used by React Native.

3. Final Answer:

   android -> Option A

4. Quick Check:

   Android folder = android [OK]

Hint: Platform folders are named exactly android and ios [OK]

Common Mistakes:

• Using camelCase or underscores in platform folder names
• Confusing app code folder with platform folders

3. Given this React Native project structure:

myApp/
├── android/
├── ios/
├── src/
│   └── App.js
└── package.json

Where will the main app component be located?

medium

A. Directly in the root folder

B. Inside ios folder

C. Inside android folder

D. Inside src folder

Solution

1. Step 1: Analyze folder contents

   The src folder contains App.js, which is the main app component file.

2. Step 2: Understand platform folders

   The android and ios folders hold native code, not React Native components.

3. Final Answer:

   Inside src folder -> Option D

4. Quick Check:

   Main app component = src/App.js [OK]

Hint: Main app code lives in src, not platform folders [OK]

Common Mistakes:

• Assuming main app code is inside android or ios
• Looking for app code in the root folder

4. You see this error when running your React Native app: "Cannot find module './App'". Your project structure is:

myApp/
├── android/
├── ios/
├── app/
│   └── App.js
└── package.json

What is the likely cause?

medium

A. The package.json file is corrupted

B. The app code is inside app folder but should be in src

C. The android folder is missing App.js

D. The ios folder is empty

Solution

1. Step 1: Identify folder mismatch

   The app code is in app folder, but React Native expects it in src or root by default.

2. Step 2: Understand module resolution

   Since the code is not where expected, the bundler cannot find ./App module.

3. Final Answer:

   App code is inside app folder but should be in src -> Option B

4. Quick Check:

   App folder mismatch = module not found error [OK]

Hint: App code folder must match import paths exactly [OK]

Common Mistakes:

• Ignoring folder naming conventions
• Assuming platform folders hold app code
• Not checking import paths

5. You want to add a new feature to your React Native app. Which project structure change helps keep your code organized and maintainable?

hard

A. Create a new folder inside src for the feature components

B. Add all new files directly to the root folder

C. Put new feature files inside the android folder

D. Mix new feature files with existing files in ios folder

Solution

1. Step 1: Understand best practices for organization

   Keeping feature code inside src in dedicated folders helps maintain clarity and separation.

2. Step 2: Avoid mixing platform and app code

   Platform folders android and ios are for native code, not React Native components.

3. Final Answer:

   Create a new folder inside src for the feature components -> Option A

4. Quick Check:

   Organize features inside src for maintainability [OK]

Hint: Keep features inside src in separate folders [OK]

Common Mistakes:

• Adding app code to platform folders
• Cluttering root folder with many files
• Not grouping related files