nav

Author: inafi

.DS_Store

@@ -1 +1,4 @@
-*.xcuserstate
+*.xcuserstate
+*.xcworkspace
+*.pbxproj
+*.DS_Store

.gitignore

@@ -15,6 +15,7 @@
 		AB5C9B6D2ADBE02F00A358EC /* My_AppUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB5C9B6C2ADBE02F00A358EC /* My_AppUITests.swift */; };
 		AB5C9B6F2ADBE02F00A358EC /* My_AppUITestsLaunchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB5C9B6E2ADBE02F00A358EC /* My_AppUITestsLaunchTests.swift */; };
 		AB5C9B7C2ADBE8AF00A358EC /* ButtonView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB5C9B7B2ADBE8AF00A358EC /* ButtonView.swift */; };
+		AB5C9B802ADBF38700A358EC /* ListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB5C9B7F2ADBF38700A358EC /* ListView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -46,6 +47,7 @@
 		AB5C9B6C2ADBE02F00A358EC /* My_AppUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = My_AppUITests.swift; sourceTree = "<group>"; };
 		AB5C9B6E2ADBE02F00A358EC /* My_AppUITestsLaunchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = My_AppUITestsLaunchTests.swift; sourceTree = "<group>"; };
 		AB5C9B7B2ADBE8AF00A358EC /* ButtonView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonView.swift; sourceTree = "<group>"; };
+		AB5C9B7F2ADBF38700A358EC /* ListView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = ListView.swift; path = "My App/ListView.swift"; sourceTree = SOURCE_ROOT; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -101,6 +103,7 @@
 				AB5C9B552ADBE02F00A358EC /* Assets.xcassets */,
 				AB5C9B572ADBE02F00A358EC /* Preview Content */,
 				AB5C9B7B2ADBE8AF00A358EC /* ButtonView.swift */,
+				AB5C9B7F2ADBF38700A358EC /* ListView.swift */,
 			);
 			path = "My App";
 			sourceTree = "<group>";
@@ -260,6 +263,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				AB5C9B802ADBF38700A358EC /* ListView.swift in Sources */,
 				AB5C9B542ADBE02E00A358EC /* ContentView.swift in Sources */,
 				AB5C9B522ADBE02E00A358EC /* My_AppApp.swift in Sources */,
 				AB5C9B7C2ADBE8AF00A358EC /* ButtonView.swift in Sources */,

My App/My App.xcodeproj/project.pbxproj

@@ -8,11 +8,13 @@
 import SwiftUI
 
 struct ButtonView: View {
+    var label: String
+
     var body: some View {
         Button(action: {
             print("Button tapped")
         }, label: {
-            Text("Tap me")
+            Text(label)
         })
     }
 }

My App/My App.xcodeproj/project.xcworkspace/xcuserdata/inafi.xcuserdatad/UserInterfaceState.xcuserstate

@@ -9,14 +9,19 @@ import SwiftUI
 
 struct ContentView: View {
     var body: some View {
-        VStack {
-            Image(systemName: "globe")
-                .imageScale(.large)
-                .foregroundStyle(.tint)
-            Text("Hello, world!")
-            ButtonView()
+        NavigationView {
+            VStack {
+                Image(systemName: "globe")
+                    .imageScale(.large)
+                    .foregroundStyle(.tint)
+                Text("Hello, world!")
+                ButtonView(label: "Tap me!")
+                NavigationLink(destination: ListView(items: ["Item 1", "Item 2", "Item 3"])) {
+                    Text("Go to list")
+                }
+            }
+            .padding()
         }
-        .padding()
     }
 }
 

My App/My App/ButtonView.swift

@@ -0,0 +1,18 @@
+//
+//  ListView.swift
+//  My App
+//
+//  Created by Irfan Nafi on 10/15/23.
+//
+
+import SwiftUI
+
+struct ListView: View {
+    var items: [String]
+
+    var body: some View {
+        List(items, id: \.self) { item in
+            Text(item)
+        }
+    }
+}

My App/My App/ContentView.swift

@@ -93,17 +93,19 @@ struct ContentView: View {
 
 1. Let's add a new view to the project that creates a button. Right click on the folder tree and click "New File...". Select "Swift File" and click "Next". Enter "ButtonView.swift" as the file name and click "Create". You should see a new file called `ButtonView.swift` in the folder tree.
 
-2. In `ButtonView.swift`, add the following code:
+2. In `ButtonView.swift`, add the following shown below. By creating a `var label: String` property, we can pass in a label to the view. You can read more about properties [here](https://docs.swift.org/swift-book/LanguageGuide/Properties.html).
 
 ```swift
 import SwiftUI
 
 struct ButtonView: View {
+    var label: String
+
     var body: some View {
         Button(action: {
             print("Button tapped")
         }, label: {
-            Text("Tap me!")
+            Text(label)
         })
     }
 }
@@ -112,13 +114,70 @@ struct ButtonView: View {
 3. Go back to `ContentView.swift`. Add the following code to the `VStack`, under `Text`:
 
 ```swift
-ButtonView()
+ButtonView(label: "Tap me!")
 ```
 
 4. Click the play button on the top left of the screen to run your app in the simulator. You should see a button that says "Tap me!". When you tap the button, you should see "Button tapped" printed in the console (which is at the bottom of the screen).
 
 ![](/hackpack-assets/console.png)
 
+### Navigation
+
+1. Navigation is a way to navigate between different views. Let's add a navigation view to the app. Go back to `ContentView.swift`. Wrap the `VStack` in a `NavigationView`. You can read more about it [here](https://developer.apple.com/documentation/swiftui/navigationview).
+
+```swift
+NavigationView {
+    VStack {
+        Image(systemName: "globe")
+            .imageScale(.large)
+            .foregroundStyle(.tint)
+        Text("Hello, world!")
+        ButtonView(label: "Tap me!")
+    }
+    .padding()
+}
+```
+
+2. Let's create a new screen that displays a list of items. Right click on the folder tree and click "New File...". Select "Swift File" and click "Next". Enter "ListView.swift" as the file name and click "Create". You should see a new file called `ListView.swift` in the folder tree.
+
+3. In `ListView.swift`, add the following shown below. By creating a `var items: [String]` property, we can pass in a list of items to the view. You can read more about arrays [here](https://docs.swift.org/swift-book/LanguageGuide/CollectionTypes.html#ID105). 
+
+```swift
+import SwiftUI
+
+struct ListView: View {
+    var items: [String]
+
+    var body: some View {
+        List(items, id: \.self) { item in
+            Text(item)
+        }
+    }
+}
+```
+
+4. Go back to `ContentView.swift`. Add a navigation link to the `VStack`, under `ButtonView`. You can read more about it [here](https://developer.apple.com/documentation/swiftui/navigationlink).
+
+```swift
+NavigationView {
+    VStack {
+        Image(systemName: "globe")
+            .imageScale(.large)
+            .foregroundStyle(.tint)
+        Text("Hello, world!")
+        ButtonView(label: "Tap me!")
+        NavigationLink(destination: ListView(items: ["Item 1", "Item 2", "Item 3"])) {
+            Text("Go to list")
+        }
+    }
+    .padding()
+}
+```
+
+5. Here's what the app should look like now:
+
+![](/hackpack-assets/navigation.gif)
+
 ### Uploading to the App Store
 
 # Congratulations! 🎉