SwiftUI folder structures as RN developer

Hyo
dooboolab
Published in
3 min readMar 24, 2020

I’d like to share the folder structures that I’ve decided to use for working on my first simple SwiftUI todo app.

My app is called TodoMagic

I’ve been searching for a SwiftUI directory structure practices and I’ve not found that fit my taste. Then I’ve found similar question in reddit.

The screenshot from the above Reddit link.

Pretty funny on how people reply to the question, ask to React developers 😆. I’ve also agreed in some sense and I’ve rather decided to structure things out myself and share others.

I’ve had eagerly maintained my react & react-native boilerplate through dooboo-cli which I’ve created for my own usage. Therefore, I was pretty interested in configuring boilerplate for Swift UI.

Simply sharing, I’ve managed to structure folders as below screenshot.

To elaborate above more simply, it’s like below.

TodoMagic/
├─ Assets
├─ Localizable
├─ resources
├─ models
├─ stores
├─ views
│ └─ navigation
│ └─ screen
│ └─ shared
├─ AppDelegate.swift
├─ SceneDelegate.swift
├─ ContentView.swift
├─ LaunchScreen.storyboard
├─ info.plist

The important part here are resources, models, stores, views (navigation, screen, shared).

  • resources folder contains app data such as core data.
  • models folder contains data object type.
  • stores folder contains ObservableObject that can also be used globally as an EnvironmentObject.
  • views folder contains Views in Swift UI. They are divided into three parts.
    - navigation handles the group of screen views and will explain further.
    - screen folder contains View as a full screen sized view so that we know it wraps all the screen.
    - shared folder contains View that can be the part of the screen.

I’ll explain about views in detail.

Upper right-hand labels explain the characteristics of current screens

The navigation view acts like a container here. It is a group of screens.

Example `HomeTab` navigation view

The screen view is a full-screen sized view which can be represented as a screen unit. Any view that is smaller than the screen view will be treated as a shared view.

Example of `Todo` screen

The List is fully wrapping iOS screen and TodoRow is a list item that is the part of the screen. Therefore, Todo is a screen and TodoRow is a shared view.

I think this is all about how I’ve thought of bringing up the folder structure in Swift UI as I’ve done it in React Native.

Also, you can check out the repo of TodoMagic.

Thank you.

How do you like my idea of folder structuring?

--

--