Reading time: 1 min

This tutorial shows how to use SVG images in SwiftUI.

First, add the Macaw library to your project. Then, wrap its SVGView using this simple UIViewRepresentable wrapper:

import Macaw

struct SVGImage: UIViewRepresentable {
  // a binding allows for dynamic updates to the shown image
  @B...

Continue Reading...

Reading time: 1 min

This tutorial shows you how to create a search bar in SwiftUI. The end result will look something like this:

Search bar in SwitUI

The search bar has a button to clear its content, as well as to hide itself with the Cancel button.

struct SearchBar: View {
    @Binding var isShowing: Bool // determines visibilit...

Continue Reading...

Reading time: 1 min

This tutorial shows how to customize the navigation bar buttons as images. It applies to both the back button, as well as the button on the right-hand side. The end result will look something like this:

Customized navigation bar buttons

To do so, use the navigationBarItems(leading:trailing) method. As always, the navigation...

Continue Reading...

Reading time: 1 min

A common issue in SwiftUI is that, when the keyboard appears, it covers up a part of your UI. This is especially problematic if it overlaps the exact TextField you're editing, so that you can't even see what you're typing!

Take this credit card input field at the bottom of a screen:

If you o...

Continue Reading...

Reading time: 1 min

Ocassionally you wish to make a View fit entire width of its parent. You can do so by setting both minWidth and maxWidth:

Text("Some text")
  .frame(minWidth: 0, maxWidth: .infinity)

For a Text specifically, this is even more useful if you wish to have it, say, leading-aligned in a center-...

Continue Reading...