Let's cover the SwiftUI geometry reader over the next few days starting with the basics. This view can be a little confusing at first. It's very powerful and solves some problems as you will be seeing.

📙Follow along with the FREE book sample: https://www.bigmountainstudio.com/free-swiftui-book 

First of all, it's a container that will push out to fill up all available space. You can add child views that will center themselves within.

This may not be the intended use but that is what is rendered at this time. I can't guarantee this is how it'll be rendered in the future either. In beta, child views appeared in the top left of the geometry reader.

Take a look at this example

struct Introduction: View {
    var body: some View {
         VStack {
            Text("GeometryReader")

            Image(systemName: "bolt.circle.fill")

            GeometryReader { geometry in
                 Image(systemName: "bolt.circle.fill")
            }.border(Color.green)

        }.font(.largeTitle)
    }
}

The green outline defines the extent of the geometry reader. It's pushing up the other views to the top.

It's effectively the same as this code:

struct Introduction: View {
    var body: some View {
         VStack {
             Text("GeometryReader")
             Image(systemName: "bolt.circle.fill")
             Spacer()
             Image(systemName: "bolt.circle.fill")
             Spacer()
         }.font(.largeTitle)
    }
}

But the geometry reader can do so much more...

This is your first little introduction to using the geometry reader. It's a container view but yes, it can do much more.

Later, I'm going to show you how to create this "sticky header" effect:

And this parallax effect where the background scrolls more slowly than the rest of the content:

Before we get there we need to cover some basics that are also covered in the free book sample above. Keep following along and we'll cover them together. 😃

Continue to Part 2

Free SwiftUI Picture Book

Screenshots for every code example? Yes! Get your FREE SwiftUI picture book here.