Directory structure

Now is probably a good time to talk about good practices concerning the directory structure. How to organize the various types of files we've made and are going to add? There's no fixed rule for this and depending on your needs you will need more or less, but for your average sized app this could be a starting point:

├── src
│   ├── app
│   │   ├── App.tsx
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   ├── components
│   ├── fixtures
│   ├── hooks
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── styles
│   ├── types
│   │   ├── types.ts
│   ├── main.tsx

Notice how there's a division between components and screens, just like you would distinguish between components and pages for web. The navigators (we'll talk more about this later) have their own directory navigation and so do your global styles. All types are grouped together in one file, helper functions are put in services and hooks go in hooks.