SwiftUI — Creating a custom @Environment

SwiftUI enables us to access common pieces of information throughout the app using `@Environment` objects avoiding the cumbersomeness of passing data through the views.

There are many built-in environments such as `openURL`, `colorScheme` or `managedObjectContext` to manage data storage with Core Data.

All these environments are defined in the Swift standard library as part of an extension of the `EnvironmentValues`:

extension EnvironmentValues {
public var managedObjectContext: NSManagedObjectContext
}

While these built-in objects are very convenient, SwiftUI gives us the ability to create tailor-made environments to meet our needs.

In this demo, we’ll be creating a tracking environment object to follow different states and user actions for analytic purposes.

The first step is to create a struct that will conform to the `EnvironmentKey` protocol with only one requirement: a default value.

struct TrackStateKey: EnvironmentKey {
static let defaultValue: TrackStateAction = .init(state: .loading)
}

Then, we need to extend the `EnvironmentValues` struct and define a property that will be exposed to our views.

Just like SwiftUI’s built-in environments, we use `KeyPath` to access or mutate the default value static property.

extension EnvironmentValues {
var trackState: TrackStateAction {
get { self[TrackStateKey.self] }
set { self[TrackStateKey.self] = newValue }
}
}

Let’s create a `TrackState` enum to follow the different states and actions.

enum TrackState {
case loading
case appear(String = .init())
case create(String = .init())
case tap(String = .init())
case error(Error)
}

The `TrackStateAction` class encapsulates the core logic of our environment.

class TrackStateAction {
var state: TrackState

init(state: TrackState) {
self.state = state
}
func callAsFunction(_ newState: TrackState) {
state = newState
sendState()
}
private func sendState() {
switch state {
case .appear(let value),
.create(let value),
.tap(let value):
/// send value to back-end analytics
case .loading:
/// send loading state to back-end analytics
case .error(let error):
/// send error state to back-end analytics
}
}
}

At last, in order to follow specific events such as the creation of a view, we need to create a custom modifier through the `View` extension:

extension View {
func trackState(_ newState: TrackState) -> some View {
environment(\.trackState, TrackStateAction(state: newState))
}
}

The `environment` function takes two arguments that is your `WritableKeyPath` (which is the property from the `EnvironmentValues` extension) and the new value.

func environment<V>(
_ keyPath: WritableKeyPath<EnvironmentValues, V>,
_ value: V) -> some View

We can now use our custom environment object and track app states and actions inside our SwiftUI code.

In a real-life app, each state would be initialized with a specific context such as `.tap(“Custom view — Log in”)`.

struct CustomView: View {
@Environment(\.openURL) var openURL
@Environment(\.trackState) var trackState
var body: some View {
Button {
login()
trackState(.tap())
} label: {
Text(“Log in”)
}
.trackState(.create())
.onAppear {
trackState(.appear())
}
}
}

To enable analytics for the entire view hierarchy — which is most likely the case — we would inject the environment at the app level.

@main
struct CustomApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.trackState, .init(state: .loading))
}
}
}

— Conclusion

By leveraging SwiftUI’s powerful APIs, `@Environment` objects allow us to create an elegant way of encapsulating common behaviours within the app.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store