Understanding the React Native File structure

._tests_

1.     This folder is for testers to test the application.

2.     React Native's CLI includes Jest as a developer dependency.

.bundling.

Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file

.idea

The .idea folder should be ignored, since is a Android Studio specific folder, created     automatically with the IDE configuration. It would be better if the project is IDE agnostic.

.android

In a React Native CLI application, the android folder contains the source code and configuration files for building the Android version of the app. When you run react-native run-android command, the React Native CLI uses the code and resources in the android folder to build an Android app that can be installed on an Android device or emulator.

.ios

Inside the ios folder, you'll find several subfolders that contain different parts of the iOS app:

AppName folder: this is the main folder that contains the Xcode project file, source code, and resources for your app. The name of the folder is usually the name of your app.

Pods folder: contains the dependencies managed by CocoaPods, which is a package manager for iOS development.

node_modules

Since our entire application depends on Nodejs and Javascript, we require node_modules where all dependencies will be installed.

.eslintrc.js

ESLint is a tool that allows us to maintain code quality and enforce code conventions. ESLint is a static code evaluator. Basically, it means that ESLint will not actually execute the code but will instead read through the source code to see if all the preconfigured code conventions are followed by the developers.

.gitignore

It lists all of the files that we want to be ignored  that means that those files will not be taken into account when interacting with Git.We can use the .gitignore file to mention such files/folders so that need not to be pushed to Git

prettierrc.js

In React Native CLI the prettierrc.js file is used to configure the prettier code formatter that helps your code more readable and easy to maintain so that your time is saved.

.ruby-version

This is specific to ios versioning which simply specifies the version number.

You can change it if you want.

.watchmanconfig.

React Native uses watchman to detect when you've made code changes and then automatically build and push the update your device without you needing to manually refresh it.

app.json

app.json to be defined for the project, which is used to configure the native app. The app.json config may contain the following keys:

·        name - The short name used for the project, should be TitleCase

·        displayName - The app's name on the home screen

app.js

This is the main file of the React Native app where you will be writing most of your codes, it is the entry point of your app here you can import and use other components and files

.babel.config

React Native uses Babel to convert React syntax and the newer ES5+ syntax into code that can be run in a JavaScript environment that doesn't support those features. Out of the box Babel doesn't do anything. It basically parses the code and then generates the same code back out again.

Gemfile

This is a ruby-based file majorly for IoS development and again we never touch this file.

index.js

This file will serve as the common entry point for both Android and iOS projects. Modify the files as follows: Note: In the newer versions of react-native, there is only one index file for both Android and iOS called index.

metro.config.js

This file is used to configure the metro, metro is the JavaScript bundler used by React Native,

Using this file you can customize how your code is bundled and optimized for production,

Package.json

The file is used to provide the information to the node package manager (NPM) that allows identifying the project and its dependencies. The package. json file is a core element in the Node. js ecosystem and is also basic for understanding and working with Node.

tsconfig.json

In React Native CLI, the tsconfig.json file is used to configure the TypeScript compiler and define how TypeScript files should be compiled in your project.

yarn.lock

This file is auto-generated and should be handled entirely by Yarn.

To get consistent installs across machines, Yarn needs more information than the dependencies you configure in your package.json.

The Yarn needs to store exactly which versions of each dependency were installed. So all such information you will find inside this file.

Conclusion

That’s it, by getting clear understanding of the React Native app file structure you can easily navigate through your app and make changes and build beautiful Mobile App.

Thank you so much for your time.