React Native – Basic Folder Structure and Files (With Examples and Images)

React Native – Lesson 2 (Basic Folder Structure and Files)

In This Lesson of React Native, I will describe the Basic folder structure of React Native and its Basic Files which everyone needs to know before starting working on React Native.

so in my previous lesson  React Native – Lesson 1 (creating a Hello World Application on your Virtual Android Device) – if you have missed it you can read it by clicking on the link. I have explained How to Setup React Native easy way and start developing your First React Native Android Application. and now in this Lesson, I will describe Basic of React Native i.e Folder Structure and Basic Files of React Native which is important to understand before starting React Native Programming.

So now without wasting time Let’s get Started –

First of all, see the image attached below to better understand the Basic Folder Structure of React Native.

www.codingiseasy.com/react-native-folder-structure

React Native Folder Structure

Now let’s understand the role of all these folders and files shown in above image one by one.

  • __tests__  (folder) —

This is the first folder in this list and it is the main folder which plays a major role in React Native Application basically if you open this folder you can see there 2 files – index.android.js &  index.ios.js.  one is for Android application part and another one is for IOS application part.

but both of these folders plays a similar role. i.e  act as a serving point of application. if you open these files in any text editor say notepad ++, you will find code something like –

import 'react-native';
import React from 'react';
import Index from '../index.android.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  );
});

here in above code, you can understand simply that this file is required after ‘react-native’ and this file is rendering another ‘index.android.js’ file located on the same level as the ‘__test__’ folder in application folder in which we write our starting code for our application.

the same role is the ‘index.ios.js’ file is playing but for IOS application as I am covering only Android Part here so just explained android related file.

so this folder is playing all the parts for you to run your application.

  • android (folder) / IOS (folder) —

If you are familiar with Android Native programming either in Android Studio or in Eclipse you can easily understand the folder structure inside the ‘android’ folder. I will not be going in too deep in this folder just a basic overview will be enough to understand this folder and its sub files.

mainly there are Gradle files present in ‘android’ folder and the main folder inside this is ‘app’ folder. in ‘app’ folder present another folder named ‘src’ which contains ‘MainApplication.java’ & ‘MainActivity.java’ files which are necessary to develop a native Android application. opening these files you can see some basic code like extending some activities and starting the application for Android device etc. there also present ‘AndroidManifest.xml’ file which is the style schema file for an Android application.

so that’s all about the ‘android’ folder and its sub files and folders.

  • node_modules (folder) —

This folder is the Heart of a React Native applications. because this folder contains all the Node JS modules for running our React Native application. all the modules we import in our  React Native application js files are located in this node_modules folder you can open this folder and you will see a lot of folders like react-native, Navigator etc. and these node modules are nothing but small applications made to make our work easy we just need to import these in our file and we can use all of its functionalities in our code. whenever we install any node module/package like for example we install a new package using this command –

npm install --save simple navigator

then this node module in installed in our node_module folder with a folder named as ‘navigator’. and then we just need to simply import this in our desired .js file and use it to make our app do whatever we want.

now all the folders are finished to explain and we can move to files present in our application folder.

  • .watchmanconfig (file) —

This file contains the configuration of the watchman. watchman is like a middleman who watched our files for any change and if it gets any change in our files then it serves that file to our server so that it can convert our files in JavaScript syntax, compiles these files and serve to server so that server can inject these files on our device to run our application and show us the changes we have done a few seconds ago.

  • app.json (file) —

This file simply contains 2 line of code which contains information about application name. the name by which our application will be recognized, the name by which application will be installed in our device. see code below contained in this file.

{
  "name": "MyProject",
  "displayName": "MyProject"
}
  • index.android.js / index.ios.js (file) —

This index file serves as the main starting point of our application basically we tend to write all of our starting page code in this file. as when our app runs on our device it starts to serve content places in the index file. and from this file, we navigate to different views and files in which we can perform various different activities. but we can say the main and starting point is this file only.

we can make a splash screen in this file and after some time navigate to different view so basically splash screen loads every time we run our app on our device so this proves that this file is the starting point of our Android application.

However, we can change our starting file by changing some settings and programming of our application but we rarely bother about this. we just simply start our app from this file and navigate to some other file for our work to be done.

  • package.JSON (file) —

This File serves all the content for the server to load all dependencies necessary for our app to run. like all modules with versions which are needed to run our app are listed in this file. whenever we run command to install an NPM package/Module with ‘–save’ attribute attached to the command that module is also automatically listed in this package.JSON file so in future if any other person tries to run our app from our code he/she just needs to type ‘npm install’  and that command install all the packages listed in this package.JSON file. so we can say this file is equally important for our app to run.


So that’s all about basic files and folders present in React Native app directory. if you have any doubt regarding this you can comment below I will answer all your queries.


Happy Coding

You may also like...

2 Responses

  1. August 7, 2017

    […] and basic files in our application folder you can read our latest post on this from here – http://androiddevelopers.co/react-native-basic-folder-structure-and-files-with-examples-and-images/. just click this URL and read an awesome post about React Native basic folder structure and files. […]

  2. November 25, 2017

    […] I have created a folder named as components and will save all calculator components file in that folder only. if you prefer to read how to manage folder structure of a React Native app then must read our older post on React Native Folder Structure Click Here to Read. […]

Leave a Reply

Your email address will not be published. Required fields are marked *