# How to Structure your React Native Project in a neat way?

Some of the wonderful things concerning React Native may be your project flexibility. Building your next app project with React Native(RN) has been an interesting experience for most of the developers especially with its fast pace of innovation and rapid changes in the ecosystem. But the same may be daunting, particularly for new programmers.

There are many techniques to arrange a project and you're able to devote a great deal of time studying them and mentioning the advantages and disadvantages of each and everyone won't make much sense. I would like to present you to at least one, usually, the main one I use. It's just a single manner and I have found it to work over the years and keep an easy task to comprehend.

Goals of Structuring a React Native Project

A React Native Project should be well organized irrespective of the platform it is being built on. Henceforth, it is advisable to understand goals of structuring a react native project:

• Cross-Platform -- One of the amazing thing about React Native is that it is cross-platform by which you are able to craft two kinds of apps from a single codebase which is written in Javascript.

• Maximum Code Reuse -- Since the framework is cross platform, it is obvious that you would be able to reuse the code between both platforms as much as possible. Even if we talk about UI elements here, it is expected that these UI elements should contain same business logic and code should be reusable.

• Separation of Config from the code -- Preferences, colours, paths, etc. are pieces of code which are used in a number of places throughout the program and can alter at the same time. I would like to make it effortless to alter these things without worrying about when I changed each one of them if I broke anything. These things should dwell in one readily accessible location.

• Minimize component State -- You would wish to utilize stateless functional parts, components that are part of same props as much as you can. The main aim is to adhere with KISS Principle.

Default Structure of a React Native Project

Before plunging into our customizations let us take an instant breakdown of exactly what you're structuring by default. This can help you know that which we are dealing with and what this means.

• Android/ -- This really is the directory where all the indigenous Android code resides. In the event that you dip into there, you've come across .gradle data files, .java data files, and also even .xml documents. This is actually the directory you'd open using the android studio. You may rarely need to function within this particular directory.
• Ios/ -- Just Such as the android listing that is the point where most of your native iOS code resides. You'll locate your Xcode project in there, .plist files,. H records,. M files, etc.. So in the event that you want to open your endeavor from Xcode you'd open i-OS /.xcodeproj. You will rarely have to do the job in this particular directory.
• Index.ios.js -- Here can be the entrance point to your ios program in to the respond Native code. It's where you will wish to enroll in your program (by means of AppRegistry).
• Index.android.js -- Same as index.ios.js just for Android. You will find it's precisely the exact very exact code because the ios one particular, we will work on that in the future segment.
• Everything else -- You probably won't have to be concerned about the other material -- it really is mostly configuration for respond Native and also the others are your normal node files/directories (node_modules/ / and also package.json).