The moment we initialize a react-native project, a huge number of files and folders are created which seems pretty intimidating and overwhelming for a beginner and that is what we are going to overcome in this article by explaining each and every file or folder in simple terms.
A typical react-native project has the following folder structure
/__tests__/ :
This folder in React Native is a convention used for storing test files for your React Native application. It usually contains one or more test cases that test the functionality of a specific component or logic.
.bundle :
This file contains the JavaScript code required to run your React Native app and it is generated by bundling all the JavaScript code and dependencies into a single file. this file is usually generated using a bundler tool, such as Metro, which is included with React Native. The bundler takes the JavaScript code and dependencies and packages them into a single file that can be loaded into the app. The bundler also performs various optimization tasks, such as minification and dead code elimination, to reduce the size of the generated .bundle file.
android/ :
This folder contains all the native Android code required to run the app on Android devices.
ios/:
This folder contains all the native iOS code required to run the app on iOS devices.
node_modules/:
This folder contains all the npm packages that your React Native project depends on.
.eslintrc.js:
It is a configuration file for ESLint, a popular JavaScript linting tool used in React Native development. ESLint is a code quality tool that helps you enforce a set of coding standards and catch potential errors and problems in your code. This file contains the configuration settings for ESLint, such as the rules for linting and the code style conventions that should be followed in your React Native project e.g., you can configure ESLint to enforce a specific code style, like using double quotes instead of single quotes, or to warn you when you forget to add a semicolon at the end of a statement.
.gitignore:
This file lists files and directories that Git should ignore when you make commits to your code repository.
.node-version:
This file specifies the required version of Node.js by storing the version number as a string, for example 14.16.0. When you run commands like npm install or npx react-native run-android, the version specified in the .node-version file will be used to determine the version of Node.js that should be used to run the command. This helps ensure that the project is using a consistent and compatible version of Node.js across all development machines.
.prettierrc.js:
This is a configuration file for Prettier, a popular code formatting tool used in JavaScript development. This file defines the code formatting rules and styles that Prettier should follow when automatically formatting your code. This can include rules for indentation, line wrapping, semi-colons, and more.
.ruby-version:
This file contains the version number of Ruby in a plain text format. For example, if the project requires version 2.7.1 of Ruby, the file would contain the line 2.7.1 note that it is associated or aligned with IOS.
.watchmanconfig:
This file is used by the Watchman a file-watching service in React Native projects. Watchman is a file-watching service that helps track changes to the file system, and trigger actions when changes are detected.
It is used to watch for changes in the source files and automatically trigger a build and reload of the app in the emulator or on a connected device when changes are detected.
If set up and configured correctly it can improve the development experience in React Native by reducing the time it takes to see changes reflected in the app after making code modifications.
app.json:
This file contains configuration settings for your React Native app, such as the name, displayName, and description of the app.
App.tsx:
This file sets up the main component of the application. This file typically contains the root component for your application and is responsible for rendering the initial UI and providing the initial data for your components.
This file is defined using React components and TypeScript, and it uses the React Native framework to render the components to the device's screen. The file typically imports other components and services that the app needs, and it uses React Native components, such as View, Text, and, Image to build the UI.
This file is usually the starting point for developers when they want to modify the UI or add new functionality to the app.
babel.config.js:
This file contains configuration settings for Babel, the JavaScript transpiler used by React Native. It is used to specify the configurations for Babel, such as the presets and plugins to use for transpilation, and the source and target environments for the code. This allows developers to use the latest JavaScript features in their React Native code while ensuring that the code will work on older platforms and devices. e.g.,
it might specify that the code should be transpiled using the latest JavaScript syntax and that the target environment should be compatible with ECMAScript 5 (ES5). This allows the React Native code to run on a wide range of devices and platforms, while still taking advantage of the latest language features.
Gemfile:
This file in a React Native project is used to manage dependencies on Ruby gems that are required for building and deploying the app on iOS and Android platforms.
index.js:
This file is the entry point for your React Native app and it sets up the React Native environment and launches the app.
metro.config.js:
This is a configuration file for Metro, the JavaScript bundler used by React Native. It allows you to customize the behavior of the bundler, such as specifying the entry point for your app, transforming your code with Babel, and including or excluding certain files from the bundle.
By creating a metro.config.js file in your React Native project, you can override the default behavior of Metro and configure it to fit your specific needs. For example, you can configure Metro to use a specific version of Babel or to include additional files in the bundle.
NOTE: It is not required to have a metro.config.js file in every React Native project, but it is useful in some cases where you need to make changes to the default bundler behavior.
package-lock.json:
This file lists the exact versions of all the npm packages installed in your project.
package.json:
This file contains metadata about your React Native project, including the list of dependencies and scripts for building and running the app.
tsconfig.js:
This file is the configuration file for TypeScript, a statically-typed superset of JavaScript. It defines the settings for the TypeScript compiler, including the version of TypeScript to use, the options for checking type information, and the location of the TypeScript files in your project.tsconfig.js allows you to control how the TypeScript compiler generates JavaScript code from your TypeScript source files. It helps ensure that your TypeScript code is compiled consistently and accurately, regardless of who is working on the project or where it is being built.
Conclusion:
I hope I covered all basics related to the folder structure of the react-native apps that might otherwise intimidate you. Leaving you at a better place to take your react-native journey forward, will get back to you with another interesting article on ReactNative, till then happy learning and peace ✌️