How to Create Custom Environment Values in SwiftUI?

In SwiftUI, @Environment is used to propagate values and information down the view hierarchy without having to explicitly pass them as parameters. In this tutorial, we'll take an overview of @Environment Property Wrapper and learn how we can define our custom environment value using EnvironmentKey and EnvironmentValues.

1. What is Environment Property Wrapper?

@Environment is a property wrapper in SwiftUI that allows a view to access values stored in the environment. The environment is a container for values that are global to the current view hierarchy, such as the device's appearance mode (light/dark), locale, and more. You can use @Environment to access these values without directly passing them as parameters to your views. For example:

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        Text("Color Scheme: \(colorScheme)")
    }
}

2. What is EnvironmentKey?

EnvironmentKey is a protocol that you can adopt to define your own custom environment values. So, it is a key for accessing values in the environment.

3. What is EnvironmentValues?

EnvironmentValues is a type that holds the actual values of the environment. So, it is a collection of environment values propagated through a view hierarchy. SwiftUI provides a set of predefined environment values that you can access using the @Environment property wrapper like colorScheme, locale etc.

4. How to create SwiftUI Custom Environment Values?

4.1 Defining the Custom Environment Key

First, you need to create a custom environment key by creating a new type that conforms to the EnvironmentKey protocol. Now add the a defaultValue for environment key.

struct MyCustomEnvironmentKey: EnvironmentKey {
    static var defaultValue: String = "Default Value"
}

4.2 Extend EnvironmentValues

Next, you need to extend the EnvironmentValues, which holds the actual value of the environment.

extension EnvironmentValues {
    var myCustomValue: String {
        get { self[MyCustomEnvironmentKey.self] }
        set { self[MyCustomEnvironmentKey.self] = newValue }
    }
}
  • This myCustomValue computed property provides a way to get and set the value associated with MyCustomEnvironmentKey in the environment.
  • Using self[MyCustomEnvironmentKey.self], SwiftUI looks up the environment to find the value associated with the custom key.

4.3 Using the Custom Environment Value in a View

Now, you can use the new custom environment value in your SwiftUI view. For example:

struct ContentView: View {
    @Environment(\.myCustomValue) var myCustomValue
    
    var body: some View {
        Text("Custom Value: \(myCustomValue)")
    }
}

4.4 Set or Update Environment Value

To set or update the environment value, you need to use .environment modifier. For example to modify myCustomValue form App file:

struct SampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(\.myCustomValue, "Hello, World!!")
        }
    }
}

You can use this .environment modifier from any SwiftUI View.

This was a simple example myCustomValue was String type. But you can create a custom Environment Value with other available types in Swift. The combination of @Environment, EnvironmentValues, and EnvironmentKey allows SwiftUI to efficiently manage and propagate values that are relevant to the entire view hierarchy, making it easy to build responsive and dynamic user interfaces.


Discussion

Read Community Guidelines
You've successfully subscribed to Developer Insider
Great! Next, complete checkout for full access to Developer Insider
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.