Project structure overview in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of the 'src' folder

In a React Native project, what is the main purpose of the 'src' folder?

A To store all source code files like components, screens, and utilities

B To keep configuration files like package.json and babel.config.js

C To hold compiled JavaScript files for production

D To store image assets and fonts only

💡 Hint

Think about where you write your app's main code.

The 'src' folder is used to organize all source code files such as components, screens, and helper utilities. Configuration files and assets are usually stored elsewhere.

❓ ui_behavior

intermediate

Effect of placing components outside 'src' folder

What happens if you place React Native components outside the 'src' folder in a typical project?

A The app will not run because components must be inside 'src'

B The app runs fine but it becomes harder to organize and maintain code

C The app will crash on startup due to missing components

D The components will automatically be ignored during build

💡 Hint

Think about code organization and build process.

React Native does not require components to be inside 'src', but placing them outside can make the project messy and harder to maintain.

❓ lifecycle

advanced

Role of 'App.js' in project structure

In a React Native project, what is the role of the 'App.js' file in the project structure?

A It is the main entry point that registers the root component for the app

B It contains only styles and no functional code

C It is used to configure native Android and iOS settings

D It stores environment variables for the app

💡 Hint

Think about what starts the app when it launches.

'App.js' is the main file that defines the root React component and is registered to start the app.

❓ navigation

advanced

Where to place navigation files in project structure

Where is the best place to put navigation-related files in a React Native project?

A In the root project folder alongside package.json

B Mixed directly inside the 'components' folder

C Inside a dedicated 'navigation' folder within 'src' for clear separation

D Inside the 'assets' folder with images

💡 Hint

Think about keeping related files organized.

Navigation files are best kept in their own folder inside 'src' to keep the project organized and maintainable.

🔧 Debug

expert

Identifying cause of 'module not found' error

You moved a component file from 'src/components' to 'components' at the root level but now get a 'module not found' error when importing it. What is the most likely cause?

A The Metro bundler cache was cleared accidentally

B React Native does not allow components outside 'src'

C The moved file lost its file extension during move

D The import path in other files was not updated to reflect the new location

💡 Hint

Check import statements after moving files.

When moving files, import paths must be updated to the new location. Otherwise, the bundler cannot find the module.