Using Environment Variables in SwiftUI

Written by Team Kodeco

In SwiftUI, Environment is a powerful feature that enables you to pass down configuration and data, thereby customizing your views in a decoupled and elegant way. Environment variables can manage everything from layout direction, accessibility options, and locale settings to custom data for your application.

Let’s see how to leverage environment variables with an example:

import SwiftUI

struct ContentView: View {
  @Environment(\.layoutDirection) var layoutDirection
  
  var body: some View {
    if layoutDirection == .leftToRight {
      Text("Left to Right layout")
    } else {
      Text("Right to Left layout")
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
      .environment(\.layoutDirection, .rightToLeft)
  }
}

Your preview should look like:

In this example, you use the layoutDirection environment value, which indicates whether the layout direction of the view’s content is left-to-right or right-to-left. Inside the preview, you change the default value of layoutDirection, thus changing the view.

Next, consider a scenario where you have a large view hierarchy with multiple child views that need to use a specific layout direction. Instead of manually setting the layout direction in each view, you can use the environment modifier to set the layout direction for all child views.

Here’s how you can do that:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("This is a title in a child view with multiple lines")
        .font(.title)
        .frame(maxWidth: .infinity)
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
      
      Divider()
      
      VStack {
        Text("This is a title in a child view with multiple lines")
          .font(.headline)
          .frame(maxWidth: .infinity)
          .padding()
          .background(Color.blue)
          .foregroundColor(.white)
      }
      .environment(\.layoutDirection, .rightToLeft)
    }
  }
}

Here’s what your preview should look like:

In this example, the ContentView contains two child VStack views, each with a multiline Text view. The first child uses the default left-to-right layout direction, while the second uses the .environment(\.layoutDirection, .rightToLeft) modifier, setting the layout direction to right-to-left for this VStack and its child views.

This shows how the same content can be presented in different ways according to the environment value. The environment variable set by environment applies only to the view and its children where it is defined, leaving the rest of the views in the hierarchy unaffected.

In conclusion, SwiftUI’s environment variables provide a powerful way to propagate values through the view hierarchy. This can help reduce code duplication and complexity when several views in the hierarchy require access to the same data.