3.💀Nightmare to New React App Developers

I recommend going through the previous blogs of this Series: https://maroofs.hashnode.dev/series/react-native-development

"The file structure of an application may seem intimidating at first glance, like a dark and mysterious labyrinth. But fear not, for within its depths lie the organized secrets to building powerful and scalable apps."

Most programmers fear learning Android Development because of this...

Looks Scary right? Don't worry at the end of reading the post you will get a fair idea about it

Let's break the pile of files :) into small segments.

1. /_tests_

   1. This Folder contains Tester files to test the App while deploying.

   2. /_tests_/App-test.tsx

      This file is in Typescript Language.

      It's used to Write Test Cases.

      For Example, renderer() function checks whether it properly renders the App, Buttons, etc.

2. /.bundle

   Contains a Configuration file, which we never touch.

3. /android

   1. All Configuration related to React Native App and Android and declared.

   2. /android/build.gradle

      Checking and Adding Dependencies.

      Checking and Updating Builds.

      Checking for Minimum Version of SDK, Target SDK version

   3. /android/local.properties

      Sometimes this file is not generated automatically which causes in build error. Hence it needs to be created manually.

4. /ios

   1. /ios/podfile

      All Dependencies and Packages are there in this folder [for IOS]

5. /node_modules

   1. This Folder is deleted & rebuild to fix the App not working.

   2. For this, you need to delete this folder.

   3. Open cmd in your Project Directory, and run this command : npm install

6. /gitignore

   If you have used Git before, this file is used to add untrackable files which Git can't see.

7. /.watchmanconfig

   This file is responsible for Reloading of UI / Reupdate App on the mobile device.

8. /app.json

   This file is used to link all working files.

9. /App.tsx

   1. This is the file we will be working on.

   2. All the Views, Listeners, Action buttons, and Widgets will be defined in this file.

10. /babel.config.js

    1. Javascript is a web programming language, it is unaware of how apps run on Android Devices.

    2. All the splitting of files and combinations is handled by this Bundler.

11. /index.js

    1. As per the rules, index.js is the 1 file that runs, inside this is the App.tsx

    2. Import files from /app.json

12. /metro.config.js

    1. Metro Bundler is the backend of Babel Bundler, which bundles files.

13. tsconfig.json

    1. This is Typescript Configuration File.

    2. In TypeScript, having strong typing is one of its core features that enable developers to define explicit types for variables, functions, and objects. These types provide a way to specify the kind of data that can be assigned to a particular entity, such as a variable or a function parameter.

14. /package.json

    1. All Web-related dependencies are declared here.

[NOTE: This is not a proper explanation of the above Files and Folders, it's just to give you an overview about them.]

Stay tuned for a Deep Dive into React-Native App Development.