React Native: All about Files and File Structure

Once you create a project using the below command

npx react-native init your_app_name

The following files are created in the project folder:

__tests__ :

  • This folder contains a test file (App-test.tsx) where we can perform testing on react native app.

.bundle:

  • This folder contains a config file. No work to be done here.

andriod:

  • In this folder, configurations are done for the react-native app to work on Android devices. We will be coming to this folder for a few things like...

    • build.gradle: This is the file where we simply check and sometimes manually add dependencies and build and minimum and target version of SDK support.

    • local.properties: This file is used to add directory paths which are not directly added during the setup of react-native app. This happens sometimes, so no need to worry.

ios:

  • This folder contains all the configurations for the ios app. There is one important file in this folder

    • Podfile: This contains all the dependencies required to run the app on an ios device.

node_modules:

  • Since the application is based on nodejs, all the dependencies are installed in this folder.

app.json:

  • This is the place where all the files are linked. Your Andriod as well as IOS device takes the name of the application from here. So this is the major configuration file.

App.tsx:

  • This is the place where all the code is written that will be viewed on the screen.

index.js:

  • This is the entry point where the app registry takes place. App registry converts a file to android and ios. App.tsx is imported and loaded in this file.

babel.config.js:

  • To configure bundling of the app with javascript we use Metro in react-native

Quick go through of remaining files

  • .eslintrc.js: This file is used for linting configuration.

  • .gitignore: This is used to not upload certain folders onto GitHub.

  • .prettierrc.js: Used for configuration of prettier for formatting code.

  • .watchmanconfig: To configure the live loading of the app.

  • Gemfile: This file is used for cocoapods and IOS development.

  • metro.config.js: Contains configuration for metro.

  • package-lock.json: Contains all the specific versions of dependencies installed.

  • package.json: Contains all the dependencies and devDependencies.

  • tsconfig.json: Used to configure typescript to use its functionality.


Hope now you know which file does what.
Stay tuned for more such blogs.