EnviornmentKey and EnviornmentValues

In SwiftUI, EnvironmentValues and EnvironmentKeys are important key concepts that are used to manage and propagate values through the view hierarchy.
These are part of the SwiftUI environment system, which allows the sharing of data or configs between different parts of your SwiftUI app.

EnvironmentValues:

In the SwiftUI, EnvironmentValues is a container for key-value pairs.
Any view in the view hierarchy can access its value, and it is a read-only property.

struct CustomView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Current Color Scheme: \(colorScheme)")
    }
}

You can also define your own environment values in addition to ones provided by SwiftUI. In the above example, colorScheme is an EnvironmentValue that gives information about the color scheme of the app i.e. light or dark.
By using @Environment(\.colorScheme), the CustomView can update his view based on the color scheme of the app.

EnvironmentKeys:

EnvironmentKeys are the keys used to access values stored in EnvironmentValues. You can create your own EnvironmentKey to hold custom values that can be accessed in your view hierarchy.

struct CustomEnvironmentKey: EnvironmentKey {
    static let defaultValue: String = "Default value"
}

extension EnvironmentValues {
    var myCustomKey: String {
        get { self[CustomEnvironmentKey.self] }
        set { self[CustomEnvironmentKey.self] = newValue }
    }
}

struct CustomViewWithEnvironmentKey: View {
    @Environment(\.myCustomKey) var customValue

    var body: some View {
        Text("Custom Value: \(customValue)")
    }
}

Above we have defined a custom EnvironmentKey named CustomEnvironmentKey which holds a string value.
We will then add an extension to EnvironmentValues to access and set this value.

Now in CustomViewWithEnvironmentKey, we access the custom environment key using @Environment(\.myCustomKey).

Passing data down the View Hierarchy

One of the key benefits of EnvironmentKeys and EnvironmentValues is their ability to propagate values throughout the view hierarchy. By setting a value for an EnvironmentKey at a higher level, all child views can access and utilize that value. This allows for a consistent and easily maintainable environment across the entire app.

struct ContentView: View {
    var body: some View {
        VStack {
            CustomViewWithEnvironmentKey()

            CustomViewWithEnvironmentKey()
                .environment(\.myCustomKey, "Setting a new value")
        }
    }
}

At first the CustomViewWithEnvironmentKey will use the default string i.e. "Default value". In the second view, we will override the default string using the environment modifier with the new value.

Conclusion:

• EnvironmentValues provides a way to access the values stored in the environment
• EnvironmentKeys are the keys that define how to access these values and also set values in EnvironmentValues.
• You will need to use both to pass data down the value to view the hierarchy without having to pass them through a constructor or by creating a Binding.