Mat and cataa do not rhyme, yet Lyrcs is showing they do. The cause is a simple one but easy to miss; String.count and NSString.length do not always return the same value especially when emojis are involved. Lyrcs was performing the following:

let string: String = ...
let range = NSRange(location: 0, length: string.count)
(string as NSString).enumerateSubstrings(in: range, options: .byWords) { substring, range, _, _ in
    ...
}

This meant that the range was a few characters short of the whole range of string.

An excellent resource to learn more about this is Counting Characters from the Swift programming language book:

The count of the characters returned by the count property isn’t always the same as the length property of an NSString that contains the same characters. The length of an NSString is based on the number of 16-bit code units within the string’s UTF-16 representation and not the number of Unicode extended grapheme clusters within the string.

There are a couple of ways to solve this:

1. Use a Swift range created from string

    let string: String = ...
    let range = string.startIndex..<string.endIndex
    string.enumerateSubstrings(in: range, options: .byWords) { substring, range, _, _ in
        ...
    }
   

2. Use NSString.length

    let string: String = ...
    let range = NSRange(location: 0, length: (string as NSString).length
    (string as NSString).enumerateSubstrings(in: range, options: .byWords) { substring, range, _, _ in
        ...
    }
   

3. Use Swift.utf16.count

    let string: String = ...
    let range = NSRange(location: 0, length: string.utf16.count)
    (string as NSString).enumerateSubstrings(in: range, options: .byWords) { substring, range, _, _ in
        ...
    }
   

The pure Swift approach would be the first one but there are times where you're dealing with Objective C APIs and it may be easier to resort to the trusty as NSString cast. You'll be pleased to know this has since been fixed in Lyrcs 3.5.1.

This is occurring as of Xcode 15.3 (15E204a) on simulator and device

There is a situation in Lyrcs where:

1. UITextView has keyboard focus

2. Popover appears from a button tap

3. Sheet appears from the popover

When the user dismisses the sheet and popover, UITextView will no longer have keyboard focus but the user can no longer make the keyboard appear by tapping on the UITextView . If the user holds down on the text input then the caret appears but still no keyboard. Even when using iOS simulator, characters typed with the macOS keyboard do not appear in the text input.

This occurs with any keyboard focus element; UITextField, TextField, TextEditor etc.

This is demonstrated with the following sample code:

struct ContentView: View {
    @State private var text = ""
    @State private var isPopoverPresented: Bool = false
    @State private var isSheetPresented: Bool = false

    var body: some View {
        VStack {
            Button("Show Popover") {
                isPopoverPresented = true
            }
            .popover(isPresented: $isPopoverPresented, content: {
                Button("Show Sheet") {
                    isSheetPresented = true
                }
                    .presentationCompactAdaptation(.popover)
                    .sheet(isPresented: $isSheetPresented, content: {
                        Text("I am a sheet")
                    })
            })
            TextField("Enter text", text: $text)
        }
    }
}

Until this is fixed, Lyrcs uses the following workaround (placed on the VStack) which dismisses the keyboard when the popover is presented:

extension View {
    func workaround_dismissKeyboardWhenPopoverAppears(isPopoverPresented: Bool) -> some View {
        onChange(of: isPopoverPresented) { previous, new in
            if new, new != previous {
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder),
                                                    to: nil, from: nil, for: nil)
            }
        }
    }
}

This has been submitted to Apple (FB13802395).

You've decided to only offer it to users that have paid for a subscription called PRO (which isn't the case with Lyrcs, printing is FREE 😉).

Can you guess how easy it is?

DocumentGroup(newDocument: AppDocument()) { file in
    ContentView(document: file.$document)
}
.commands {
    CommandGroup(replacing: .printItem) {
        Button("Print...") {
            print?()
        }
        .keyboardShortcut("p", modifiers: [.command])
        .disabled(print == nil)
        .badge("PRO") // <--- All you need
    }
}

Easy! You may start to see some PRO badges in Lyrcs (but not for printing ❤️).

You get your first feature request; printing. Easy enough because you've heard you can add commands to your Scene:

struct ExampleApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: AppDocument()) { file in
            ContentView(document: file.$document)
        }
        .commands {
            CommandGroup(replacing: .printItem) {
                Button("Print...") {
                    // ...
                }
                .keyboardShortcut("p", modifiers: [.command])
            }
        }
    }
}

You even throw in a cheeky shortcut because you care about making the lives of your users easier.

But wait a second, how does the app know which document to print given a user can have multiple documents opened at the same time.

Please welcome focusedSceneValue(...) to the stage 👏

Let's get started:

1. Create a Focused Value

extension FocusedValues {
    enum PrintValueKey: FocusedValueKey {
        typealias Value = () -> Void
    }

    var print: PrintValueKey.Value? {
        get { self[PrintValueKey.self] }
        set { self[PrintValueKey.self] = newValue }
    }
}

2. Add the Focused Value to your App

struct ExampleApp: App {

    @FocusedValue(\.print) // <--- New
    private var print

    var body: some Scene {
        DocumentGroup(newDocument: AppDocument()) { file in
            ContentView(document: file.$document)
        }
        .commands {
            CommandGroup(replacing: .printItem) {
                Button("Print...") {
                    print?() // <--- New
                }
                .keyboardShortcut("p", modifiers: [.command])
                .disabled(print == nil) // <--- If no Scene is active, print is disabled.
            }
        }
    }
}

3. Update your ContentView to print the document.

struct ContentView: View {

    @Binding
    var document: AppDocument

    var body: some View {
        TextEditor(text: $document.text)
            .focusedSceneValue(\.print) {
                print(document)
            }
    }
}

Try it out and you too can offer an incredible printing experience like Lyrcs ❤️

A quick search showed I needed to reach for one of these functions:

func popover<Content>(
    isPresented: Binding<Bool>, 
    attachmentAnchor: PopoverAttachmentAnchor = .rect(.bounds), 
    arrowEdge: Edge = .top, 
    @ViewBuilder content: @escaping () -> Content
) -> some View where Content : View

func popover<Item, Content>(
    item: Binding<Item?>, 
    attachmentAnchor: PopoverAttachmentAnchor = .rect(.bounds), 
    arrowEdge: Edge = .top, 
    @ViewBuilder content: @escaping (Item) -> Content
) -> some View where Item : Identifiable, Content : View

This was my first attempt:

struct ContentView: View {
    @State private var isPresented: Bool = false
    var body: some View {
        Button("Show Popover") {
            isPresented = true
        }
        .popover(isPresented: $isPresented, content: {
            Text("Hello")
        })
    }
}

A modal isn't what I was after 😬

All is not lost though, in the iOS 16.4 SDK, we were blessed with:

   func presentationCompactAdaptation(_ adaptation: PresentationAdaptation) -> some View

By specifying .popover INSIDE the popover content we can achieve exactly what we're after.

.popover(isPresented: $isPresented, content: {
    Text("Hello")
        .presentationCompactAdaptation(.popover)
})

Happy popover-ing and look forward to seeing a popover or two in Clean Share in the future!

I had concerns that localizing Clean Share (app for removing tracking identifiers) to German would be a painful process but found that SwiftUI and advancements in Xcode makes this straightforward. Follow along to see how easy it is 🎉

Prepare Strings

This can be done in two ways.

Component Initializer

Many SwiftUI components come with an initializer that takes a LocalizedStringKey. This allows you to use a string literal.

Text("Hello")
Toggle("Is On", isOn: ...)
Button("Help", ...)

String Initializer

If you have a string that is passed around, you can use the localized initializer.

String(localized: "Buy a book")

It is also recommended to give a comment to provide context and assist localizers.

Text("Hello", comment: "The title of the home screen.")
String(localized: "Hello", comment: "The title of the home screen.")

String Catalog

An Xcode string catalog is a file format used to manage localized strings. It allows developers to store all the translations for different languages in a structured format, making it easier to manage and update text in multi-language applications.

Create a String Catalog via File > New > File > String Catalog

Add a new language using the bottom button.

Build your project to see the list of strings you prepared in the earlier step.

Edit the strings for the new language using the editor.

Plurals

Languages have different rules for pluralizing nouns based on their specific grammatical structures. For example, English uses "1 Book" for singular and "X Books" for plural, while other languages may vary.

To support this, use string interpolation:

Text("\(bookCount) Books")

After building again, select the String catalog > Right Click Row > Vary By Plural

Vary by Device

It is also possible to vary strings by device. For example on smaller devices you may want to display less content or specify a particular interaction (tap vs click). See the screenshot above for the button location.

Testing Translations

You can test your translations in two ways:

Scheme

Product > Scheme > Edit Scheme > Run > Options > App Language

Settings

Open the Settings app on device and either change the device language or for the particular app.

Conclusion

Localizing apps has never been easier with the addition of String catalogs and SwiftUI. Combine this with translations through an LLM and you can perforn localization very quickly. This allowed me to localize Clean Share to German in less than a day. See how it works for you ❤️

Further reading in Apple's documentation.

1. Look at the root view in your body i.e. Image, Text, Label, Button, List etc.

2. Replace your component's View suffix with that root view name.

Some examples below could be achieved by using …Style, however these examples are purposely kept brief and the idea still applies as your components grow beyond the capability of …Style.

Examples

The following design is taken as inspiration.

// ✅ TransactionCategoryImage instead of...
struct TransactionCategoryView: View {
    let image: String
    var body: some View {
        Image(image)
            .resizable()
            .frame(width: 20, height: 20)
    }
}

// ✅ TransactionDescriptionText instead of...
struct TransactionDescriptionView: View {
    let description: String
    var body: some View {
        Text(description)
            .font(.caption2)
            .foregroundStyle(.primary)
    }
}

// ✅ TransactionCostLabel instead of...
struct TransactionCostView: View {
    let amount: Double
    var body: some View {
        Label(String(describing: amount), systemImage: "dollarsign")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
}

// ✅ TransactionButton instead of...
struct TransactionView: View {
    let transaction: Transaction
    let action: () -> Void
    var body: some View {
        Button(action: action) {
            HStack {
                TransactionCategoryImage(image: transaction.image)
                TransactionDescriptionText(description: transaction.description)
                TransactionCostLabel(amount: transaction.amount)
            }
        }
    }
}

// ✅ TransactionsList instead of...
struct TransactionsView: View {
    let transactions: [Transaction]
    var body: some View {
        List(transactions) { transaction in
            TransactionButton(transaction: transaction) { }
        }
        .listStyle(.plain)
    }
}

Conclusion

If you're finding too many instances of components named with View in your code just like I did in Clean Share, this tip may be for you.