File Structure of React Nativve

Hola coders !

In this article we will have a quick glance of React BNative File Structure

---

Let’s walkthrough each one of them one by one

__tests__

This folder consists of App.test.tsx which is a testing file to write the test cases

.bundle

It is a configuration folder consisting of config file

Android

This is native android project folder. Inside this folder 2 imporatant files which we use or modify are:

• build.gradle: It is the build configuration file which consists of

  • buildToolVVersions

  • SdkVersions

  • And helps in knowing the dependencies (sometimes need to add dependencies manually)

• local.properties: For the sdk path (sometimes need to add manually)

Other files is linked with javascript and we do not modify it.

IOS

This is native ios project folder. One of the major file which we work with is Podfile .

• Podfile: It is the important file for ios projects which consists of all the dependencies which one installs or are installed.

.eslintrc.js

It is the linting file consisting of all the linbting rules.

.prettierrc.js

This is just for developer specifications.

.ruby-version

A lot has to do with IOS specification.

.gitignore

The gitignore file used to not push node_modules, local,properties and other bundle files in the production.

node_modules

As our entire application depends on javascript and node. It has all the dependencies.

.watchmanconfig

Initially we do not have any watchman configuartion. It is simple tool to constantly update the UI.

app.json

Major configuration file . IOS and Android takes the name of the application from this file

app.tsx

Different from app.json file. It is the main file which brings everything on the screen.

babel.config.js

We are using JS files and JS do not know , how to execute on mobile.

Babel is the bundler which uses to bundle all the JS files into one and execute. Within Babel it uses Metro Configuration (in react native it is the bundler).

Gemfile

It is a Ruby based file. It is majorly for cocopods and IOS development. Mostly we don’t modify it.

index.js

It is the starting point where metro.config.js points and it starts the project.

App Registry is the magic file which converts into respective ios and android apps

tsconfig.json

Responsible for all the typescript configurations.

package.json

One stop solution for all the dependencies of the project. Atlast it is javascript we are writing.

The End

I hope you enjoyed the article and had a good learning experience.

Follow for more articles and keep sharing👩

Keep coding

Linkedin

hashnode blogs