React-Native App Structure

Let's fix this hierarchy..

Something like this.

Making view hierarchical is most important thing in programming, you want to organise everything cause now you might think it's fine I'll remember, but later you won't believe me. Each time you'll have to go through a mess to do anything as matter of fact.

Natively we have android studio and xcode, these development tools take a bit of charge and organise most things for you, but when you first start an app in react native you might throw everything in root directory

and later or sooner you'll have to start picking a few things and oranize a bit, but that's another headache.

So, it's better if you make a fine architecture of your app right in the beginning and enjoy the flow for rest of development process..

Now, remember your app's root directory shouldn't necessarily reflect a bin, we'll be minimalist there and keep like one custom folder in root directory you can name it as app or src. I go for app

This app folder will contain our sub folders. Now number and names of sub folders may change according to project but few basics are:

─| app
 |     -|Component 
         -|Shared
         -|Screens/Views
 |     -|Assets
         -|images
         -|fonts
 |     -|Navigator
         -|Drawer
         -|Bottom or any other navigator you have
         -|stack
         -|index
 |     -|Styles
 |     -| utilities
         -|Strings
         -|Fonts
         -|Colors

Okay, hold that shaky head, we're gonna break and understand it. Let's take each folder and discuss it…

If you use Redux or any such thing your app main folder may contain folders for action, reducer and store.

Component

This folder holds your views and any other custom components you've made to assist your app. Views will be your screen for instance we have two screens HomeScreen and ProfileScreen, these two will go in your views folder. Make sure you be consistent with your naming convention throughout the app.

Now your app probably has buttons and most probably they all have same face, so to remove redundancy we make a separate component for our button and call it throughout the app. Now this custom components is shared throughout your screens and hence it goes in Shared folder. Other custom shared components can be header, flatlist rows, textinputs, repeating forms.

Assets:

Assets folder can contain all your images, videos, animations, fonts and any other such things.

Navigators:

This entry point navigator files serves as the root navigator for the whole application. Your app can have bottom tab, drawer navigator and if nothing you must atleast have a stack navigator. You should keep all these navigators in a separate folder and label it as navigator.

Styles:

This folder contains application level styles of all screens which are than referred in individual components.

Utilities:

This folder can have any constants and other utils you may need throughout app.

In String folder you can keep all your string at single place, this also helps in language conversion.

Your app may contain custom fonts, it's better to keep name of fonts and their sizes in this folder and call them however you need.

Colors folder can contain all color codes that are used throughout your app, it not only make it central but helps reduce copying code each time.

That's it for basic structuring, if you are using Redux consider looking into article.

Additional Articles:

How To Structure a React Native App For Scale

Structuring a React Native + MobX Application the Right Way

Okay, that's all.

Always make sure to you keep your code compact, steady and neat.

It might look like over work but believe me it saves your from all the troubles later especially when you scale your app.

Don't forget to drop a Clap.