# Exploring the New UIContentUnavailableView by Apple

Welcome to my tech blog! Today, I'll introduce you to a recently introduced feature by Apple: the `UIContentUnavailableView`. This built-in view is designed to display when your app's content is unavailable. There are two common scenarios where this can be particularly useful:

1. **No Data Available**: This occurs when no data is displayed based on the user's selection or search criteria.
    
2. **Errors**: This happens when unexpected errors arise due to network issues.
    

With the new `UIContentUnavailableView`, you can effortlessly present an empty view or an error view with just a few lines of code. Let's dive in and see how it's done!

### Show An Empty View

To display an empty view with simple text, start by creating an empty `UIContentUnavailableConfiguration`.

```swift
var viewConfig = UIContentUnavailableConfiguration.empty()
```

Next, set the text property with the message you want to display to the user.

```swift
viewConfig.text = "No data available"
```

Finally, create the `UIContentUnavailableView` by passing in the configuration.

```swift
let emptyView = UIContentUnavailableView(configuration: viewConfig)
```

The complete code snippet will appear as follows:

```swift
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "No data found"
let emptyView = UIContentUnavailableView(configuration: viewConfig)
```

With this setup, your screen will appear as shown below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717369476199/967bdecc-f469-4b33-9405-ae91a3c5beca.png align="center")

To enhance the screen, consider adding a description to provide more details.

```swift
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "No data found"
viewConfig.secondaryText = "Try again later. More data will be available soon."
let emptyView = UIContentUnavailableView(configuration: viewConfig)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717371677676/60d64a9d-7c96-4068-a8c3-c2d62c7d543c.png align="center")

### Showcasing the Error View

Let's now explore creating an error view with an image and a refresh button.

You can integrate an image into the `UIContentUnavailableView` by assigning an image to the `image` property within the `UIContentUnavailableConfiguration`.

```swift
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "Error occurred!"
viewConfig.secondaryText = "Could not reach to the server."

viewConfig.image = UIImage(systemName: "exclamationmark.triangle")

var errorView = UIContentUnavailableView(configuration: viewConfig)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717423339863/e6cb1592-0624-4fb7-a164-589e217a56f1.png align="center")

To incorporate the refresh button, start by creating a `UIButton.Configuration` and specifying the desired title for the button.

```swift
var buttonConfig = UIButton.Configuration.bordered()
buttonConfig.title = "Refresh"

viewConfig.button = buttonConfig
```

This button will serve as the primary action for the created view. Next, we can define the target action for the button as follows.

```swift
viewConfig.buttonProperties.primaryAction = UIAction(handler: { _ in
    /// Implementation related to refresh
})
```

Designing of the error view is now complete, and the full code snippet will appear as follows:

```swift
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "Error occurred!"
viewConfig.secondaryText = "Could not reach to the server."
viewConfig.image = UIImage(systemName: "exclamationmark.triangle")
        
var buttonConfig = UIButton.Configuration.bordered()
buttonConfig.title = "Refresh"
viewConfig.button = buttonConfig
        
viewConfig.buttonProperties.primaryAction = UIAction(handler: { _ in
    /// Refresh implementation goes here
})
        
var errorView = UIContentUnavailableView(configuration: viewConfig)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717424868379/524ceb47-5286-4cf9-9f9f-0955fee306c7.png align="center")

### Built-in Views with UIContentUnavailableView

As of the time of writing this article, `UIContentUnavailableView` includes two built-in views:

1. **Search**
    
    This view is intended for use when the user's search criteria do not yield any results.
    

```swift
var viewConfig = UIContentUnavailableConfiguration.search()
var searchView = UIContentUnavailableView(configuration: viewConfig)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717426601726/e53e821a-5ebe-4d12-8507-ab84b2b7c29b.png align="center")

* **Loading**
    
    This built-in loading view is useful when you need to present a loading screen.
    

```swift
var viewConfig = UIContentUnavailableConfiguration.loading()
var loadingView = UIContentUnavailableView(configuration: viewConfig)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717426692067/4f6826a8-ed53-435b-b577-8b37c7c4e7b9.png align="center")

### Conclusion

`UIContentUnavailableView` is an incredibly useful tool for creating error views or empty views with just a few simple steps. You can either use the built-in views or customize the view to suit your needs. Additionally, it's important to note that `UIContentUnavailableView` is available starting from iOS 17.0 and up.

### References

[https://developer.apple.com/documentation/swiftui/contentunavailableview](https://developer.apple.com/documentation/swiftui/contentunavailableview)