How to Know When Your App Becomes Active or Inactive in SwiftUI
Tags: swift, ios, swiftui
Published: 2021-10-02 16:46:29

---
title: How to Know When Your App Becomes Active or Inactive in SwiftUI
published: true
description: 
tags: #swift #iOS #SwiftUI
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>Recently I was working on a SwiftUI project were I needed to know when my app became active from being in the background. Like most things in SwiftUI, I found out that this was really simple to implement in my project. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In SwiftUI we have a environment element called <strong><a href="https://developer.apple.com/documentation/swiftui/scenephase">scenePhase</a></strong>. What <strong><strong><a href="https://developer.apple.com/documentation/swiftui/scenephase">scenePhase</a></strong></strong> allows us to do is monitor if the app is Active, Inactive, or in the Background. Lets take a look at how we can use this in our project. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first thing we will need to do is add the following variable to your code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>@Environment(\.scenePhase) var scenePhase</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This Environment variable is the key to monitoring what state your app is in. Next we will add an <strong>.onChange</strong> modifier to our view. This will allow us to see when our apps state has changed and then act on that change. Let’s now take a look at how I used the <strong><strong><a href="https://developer.apple.com/documentation/swiftui/scenephase">scenePhase</a></strong></strong> variable to reload a specific view when my app became active again.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>struct TodayWatchView: View {
    @StateObject var viewModel = TodayWatchViewModel()
    
    // 1) added scenePhase variable
    @Environment(\.scenePhase) var scenePhase
    
    var body: some View {
        ZStack {
            VStack {
                if !viewModel.isHolidaysEmpty {
                    List(viewModel.holidays) { holiday in
                        if holiday.url == "" {
                            Text("\(holiday.name)")
                                .font(.headline)
                                .bold()
                        } else {
                            NavigationLink(holiday.name, destination: HolidayWatchDetailView(holiday: holiday))
                        }
                    }
                } else {
                    EmptyState(message: "There was an issue loading Today's Holidays!\n Try again later")
                }
            }
            
            // 2)
            // Reload data when app becomes active!!
            .onChange(of: scenePhase) { newPhase in
                if newPhase == .inactive {
                    print("Inactive")
                } else if newPhase == .active {
                    viewModel.getHolidays()
                } else if newPhase == .background {
                    print("Background")
                }
            }
            .navigationTitle("Today Is....")
            .alert(item: $viewModel.alertItem) { alertItem in
                Alert.init(title: alertItem.title, message: alertItem.message, dismissButton: alertItem.dismissButton)
            }
            .onAppear {
                viewModel.getHolidays()
            }
            if viewModel.isLoading {
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .gray))
                    .scaleEffect(2, anchor: .center)
            }
        }
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>I hope this gives you a better understanding of how you can monitor your app and run functions depending on your apps state. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and happy coding!!! 👨🏻‍💻👨🏻‍💻👨🏻‍💻</p>
<!-- /wp:paragraph -->