While creating your first react-native app you will see that by default there are lots of folders and files provided to run the default app

Let's try to understand what are some of the important files within it

Files and folders provided

_tests_

• Testers work on this folder to do various tasks such as checking if the app, buttons are properly rendered.

  

android

• All configurations are linked by react native so that the android app runs fine so there is no need to access this folder.

• for some special cases, we might use some of the files within the folder such as

  • build.gradle

    • it contains the dependence required. To add dependencies manually we will access this file

    • to know the minimum SDK version required for running the project

    • to know the targeted SDK version

      

  • local.properties

    • During initial setup in most devices the environmental variable for Android SDK has been configured in case it's not been assigned we should create a folder named local.properties and add the file path of the android SDK in it

ios

• pod file

  • pod file is the important file within the ios folder

  • it holds all the packages and dependencies for the ios app

  • it's the main important file for developing the ios app (we won't be writing code in it as react-native will fetch all the data from app.js or app.tsx file )

    

node_modules

• All node dependencies and packages are present within this folder.

• at times we might get errors while running our program due to some problem within the node_module so what we have to do is

  • Delete the folder

  • reinstall the node within the project folder by entering npm install within terminal

.gitignore file

• while pushing the project to any git repository we dont have to add a few files as they can be regenerated such as node_modules,bundlers,local.properties, etc

.prettierrc.js

• This folder is to do developer configuration which lets the programmer code with ease

• it has nothing to do with the code that goes into production

• 

.ruby-versioning

• provides the version of ruby used

  

.watchmanconfig

• A tool that constantly re-loads your application and shows on the device

app.json

• It holds the display configuration by which ios and android take the name of the app

  

App.tsx

• The main file of react-native

• The programs written on this file are what's been shown on the device

babel.config.js

• Javascript doesn't know how the files are run on mobile devices or split into different files, therefore we need to combine these files into a single file

• bundler combine all javascript file into a single file which makes it runnable for web and mobile

• react-native uses bable configuration and in bable metro configuration is used

  

Gemfile

• It is used for Cocoapods and ios development

index.js

• the first file metro bundler opens up is index.js

  

• Line 9 shows which file is been opened from where (appName is been opened from App)

• App is been imported from App.tsx

• we can also see from line 7 that the name of the app is imported from app.json

• AppRegistry is responsible for converting one file into ios and android

metro.config.js

• it gives the metro configuration of react-native

  

tsconfig.json

• it is the typescript configuration file

  

package.json

• it holds all the packages and dependencies

  

• it also holds the script by which we need to run our file on ios or android