The next important thing I'd like to tackle is architecture; this is about how our React Native app will be laid out. While the projects we build for this book are meant to be done individually, I firmly believe that it is important to always write and architect code in a manner that expects the next person to look at it to be an axe-murderer with a short temper. The idea here is to make it simple for anyone to look at your application's structure and be able to follow along.
First, let's take a look at how the React Native CLI scaffolds our project; comments on each relevant file are noted to the right-hand side of the double slashes (//):
|Tasks // root folder
|__Android*
|__ios*
|__node_modules
|__.buckconfig
|__.flowconfig
|__.gitignore
|__.watchmanconfig
|__index.android.js // Android entry point
|__index.ios.js // iOS entry point
|__package.json // npm package list
The Android and iOS folders will go several layers deep, but this is all part of its scaffolding and something we will not need to concern ourselves with at this point.
Based on this layout, we see that the entry point for the iOS version of our app is index.ios.js and that a specific iOS folder (and Android for that matter) is generated.
Rather than using these platform-specific folders to store components that are only applicable to one platform, I'd like to propose a folder named app alongside these which will encapsulate all the logic that we write.
Within this app folder, we'll have subfolders that contain our components and assets. With components, I'd like to keep its style sheet coupled alongside the JS logic within its own folder.
Additionally, component folders should never be nested--it ends up being way too confusing to follow and search for something. Instead, I prefer to use a naming convention that makes it immediately obvious what one component's relation to its parent/child/sibling happens to be.
Here's how my proposed structure will look:
|Tasks
|__app
|____components
|______TasksList
|________index.js
|________styles.js
|______TasksListCell
|________index.js
|________styles.js
|______TasksListInput
|________index.js
|________styles.js
|____images
|__Android
|__ios
|__node_modules
|__.buckconfig
|__.flowconfig
|__.gitignore
|__.watchmanconfig
|__index.android.js
|__index.ios.js
|__package.json
From just a quick observation, you might be able to infer that TasksList is the component that deals with our list of tasks shown on the screen. TasksListCell will be each individual row of that list, and TasksListInput will deal with the keyboard input field.
This is very bare-bones and there are optimizations that we can make. For example, we can think about things such as platform-specific extensions for iOS and Android, as well as building in further architecture for Redux; but for the purpose of this specific app, we will just start with the basics.
