Life is too short to wear boring clothes - Anonymous

Hey folks, this is going to be a slightly different post than usual. I've got some exciting news to share with you all – we've officially launched Burnousstraat Designs, your new go-to destination for one-of-a-kind and unique graphic apparel!

At Burnousstraat Designs, we're all about celebrating creativity and self-expression through our unique designs. Whether you're looking to make a bold statement with your outfit or add a touch of personality to your wardrobe, we've got you covered.

What sets Burnousstraat Designs apart? We specialize in designing and creating graphic apparel that's not only stylish but also high-quality and comfortable to wear. From eye-catching graphic tees to trendy hoodies and more, each piece in our collection is carefully crafted with attention to detail and a passion for design.

But that's not all – what makes Burnousstraat Designs truly unique is our commitment to customer satisfaction. We handle everything from design to manufacturing and shipping, ensuring a seamless and hassle-free shopping experience for our customers. So all you have to do is browse our selection, place your order, and wait for your stylish new threads to arrive at your doorstep!

We are a lifestyle brand and we design for variety of clothings such as hoodies, sweatshirts, oversized shirts, etc. We keep releasing new designs every week, so stay tuned for new collections. You can view them on Shopify under New Arrivals and on Etsy under this section.

You can find us on Etsy and on our own website, where you'll discover a curated collection of apparel that's sure to turn heads and spark conversations. And with new designs added regularly, there's always something fresh and exciting to explore at our shop.

I am beyond excited to embark on this journey with you all and can't wait to see how you rock your Burnousstraat Designs apparel. So go ahead, explore our collection, and let your style shine!

We are also active on Instagram where we frequently publish our new designs. If you like any of them and would like to order, just let us know by commenting and we will work together to place an order and ensure smooth delivery.

If you have any questions, feedback, or comments, please let me know through the shop website or via this contact form. If there is a design you like but isn't available in a specific type of apparel, color, or size, please let me know. I will take responsibility and do my best to make it available and ship it to your doorstep within the promised delivery window.

I am excited to be embarking on this journey, and I can't wait to see big things happen to my small business

Cheers~~
Jayesh Kawli.

Here are direct links to online shops:

Etsy

Website

Instagram

It's been a while since I posted. But better late than never. In today's blog post, I am going to write about how to use RxSwift to populate data in UITableView on iOS.

RxSwift is a library for composing asynchronous and event-based code by using observable sequences and functional style operators, allowing for parameterized execution via schedulers. (from Kodeco.com)

Pre-requisites

Before we get started with RxSwift, you need to add RxSwift dependencies in your Xcode project via Cocoapods (Or any other suitable dependency management system on iOS). For my project specification,  podfile looks like this,

target 'TravelPlanner' do
    use_frameworks!

    pod 'RxSwift'
    pod 'RxCocoa'
    pod 'RxSwiftExt'
    pod 'RxDataSources'

end

After you save this file, run pod install from the command line and open <project_name>.xcworkspace file.

Building Blocks

In order to build an app that can download and apply data to UITableView through RxSwift, we are going to start with basic building blocks which will form the foundation of the entire app we are building.

Building Views

The first thing we are going to do is build views. To keep it short and simple, I am not going to build everything from scratch, but we will make assumptions about the layout as we go along.

For our example, we are using a search bar and a table view. As the user is typing in the search bar, the app will input the entered text and send a request for locations matching with input text.

import UIKit
import RxSwift
import RxDataSources

final class SearchViewController: UIViewController {

    let dataSource: RxTableViewSectionedReloadDataSource<SectionModel<String, Station>>

    private lazy var stackView: UIStackView = {
        let view = UIStackView()
        view.axis = .vertical
        return view
    }()

    private lazy var searchBar: UISearchBar = {
        UIBarButtonItem.appearance(whenContainedInInstancesOf:[UISearchBar.self]).tintColor = .white
        let bar = UISearchBar()
        bar.placeholder = "Waar wilt u naartoe? (minimaal 2 karakters)"
        bar.searchTextField.backgroundColor = .white
        bar.barTintColor = .black
        return bar
    }()

    private lazy var searchResultsTableView: UITableView = {
        let view = UITableView()
        view.register(UITableViewCell.self, forCellReuseIdentifier: "Station")
        return view
    }()

    init() {
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // An utility method to set up views
        setupViews()

        // An utility method to set up view constraints
        setupConstraints()
    }

    //MARK: Private methods
    private func setupViews() {
        // Set up views
    }

    private func setupConstraints() {
        // Set up constraints
    }
}

After we run the app, this is how our UI will look like,

Building a Codable Station struct

As the downloaded location object represents the train station, we will create a new Codable struct called Station.

struct Station: Decodable {
    let code: String
    let fullName: String
}

Building a Network Service

Since we need to download data from the network, we will build a mock network service. This is just a dummy service for example, but you can replace this part with the actual service that is responsible for making a network call.

import Foundation

import RxSwift
import RxCocoa

struct StationsService {

    private let urlSession: URLSession
    private let decoder: JSONDecoder

    init(urlSession: URLSession = .shared, decoder: JSONDecoder = JSONDecoder()) {
        self.urlSession = urlSession
        self.decoder = decoder
    }

    func searchStations<T: Decodable>(for type: T.Type, route: APIRoute) -> Observable<[T]> {
        return urlSession.rx.data(request: ..<url_request>).map { data -> T in
            do {
                return try decoder.decode([T].self, from: data)
            }
        }
    }
}

Building a View Model

In order to support downloading and displaying locations, we will use the view model and inject it into a view controller.

The view model is responsible for following tasks

1. Intercepting input text and sending a network request to download the list of locations with the search query
2. Converting downloaded location models into section view models and notifying the view to update the table view with these view models

The view model will have two extra structs inside it. One for input and another for output. Input will observe for any change in the search text and Output will publish any changes with station sections.

import Foundation

import RxSwift
import RxDataSources

final class SearchViewModel {
    var input: Input?
    var output: Output?

    struct Input {
        // Input search text
        let searchText: AnyObserver<String?>
    }

    struct Output {
        // List of station sections which are returned based on the search text entered by user
        let stationSections: Observable<[SectionModel<String, Station>]>
    }    

    private let stationsService: StationsService

    init(stationsService: StationsService) {


        let searchText = PublishSubject<String?>()
        self.stationsService = stationsService

        //We are delaying sending request for input by 0.5 seconds
        let stations = searchText
            .debounce(.milliseconds(500), scheduler: MainScheduler.instance)
            .flatMapLatest { searchText -> Observable<[Station]> in

                guard let searchText, searchText.count > 2 else {
                    return .just([])
                }
                return stationsService.searchStations(for: [Station].self, route: .searchStations(query: searchText))
            }.catchError { [weak self] error in
                self?.errorMessageSubject.onNext(error.localizedDescription)
                return .just([])
            }

        let stationSections = Observable.combineLatest(stations, searchText).map { [weak self] (elements, searchText) -> [SectionModel<String, Station>] in

            guard let self else { return [] }

            return [SectionModel(model: "Current Search", items: elements)]
        }

        input = Input(
            searchText: searchText.asObserver()
        )

        output = Output(
            stationSections: stationSections
        )
    }
}

As you can see, there is a lot going on in the view model. First, we initialize the view model with the network service object. Then, we have an observer on the input search text. To avoid making duplicate and repetitive requests, we have added a delay of 500ms every time the user types in the text.

As soon as the text is entered and captured, we make a call to the network service with the input text. Service responds with the list of Station objects which is then mapped to a list of SectionModel objects. Each section model represents a table view section and associated list of station locations.

Adding Bindings in View Controller

Now we are done with view model bindings. In the next part, we see how to perform RxSwift bindings in the view controller.

View controller bindings are done for two reasons,

1. To bind the input search text to searchText observer property on the view model's input struct
2. To bind the view model-provided station sections to the data source and attach it to the table view to populate the list data

Please note that we will also need a DisposeBag object to store observable otherwise those are immediately released from memory and updates will be lost

Here's the partial source code for bindings,

.....
...
private let bag = DisposeBag()
..
....

init() {
	....
    ..
    
    self.dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String, Station>>(
            configureCell: { (_, tv, indexPath, element) in
                let cell = tv.dequeueReusableCell(withIdentifier: "Station")!
                cell.textLabel?.text = element.name.fullName
                return cell
            },
            titleForHeaderInSection: { dataSource, sectionIndex in
                return dataSource[sectionIndex].model
            }
        )
}

private func setupRx() {

    guard let input = viewModel.input, let output = viewModel.output else { return }

    searchBar.rx
            .value.orEmpty
            .bind(to: input.searchText)
            .disposed(by: bag)

    output
            .stationSections
            .bind(to: searchResultsTableView.rx.items(dataSource: dataSource))
            .disposed(by: bag)
}

As you can see, with the RxSwift, we saved on a lot of boilerplate code by eliminating routine table view datasource and delegate methods and replacing them with the RxTableViewSectionedReloadDataSource object

Running the App and Verifying the Results

Now that all the building blocks are ready, let's run the app and see the result.

As you can see, when the app starts for the first time, no results are displayed. As they start typing in the search bar, the text is recognized with a 500ms delay, the network request is sent with the search keyword and search results are populated in the TableView.

Conclusion

So that was all about how to use RxSwift to show data on UITableView in iOS using Swift. Hope this tutorial was helpful to you. RxSwift is a reactive iOS framework that is responsible for implicitly performing many operations. We saw one such operation - Applying data to table view via data sources without using iOS's native data source and delegate conventions.

If you have any questions or concerns about this article, please feel free to reach out to me on LinkedIn.

Support and Feedback

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation for me to keep writing more articles like this.

Consulting Services

I also provide a few consulting services on Topmate.io, and you can reach out to me there too. These services include,

1. Let's Connect
2. Resume Review
3. 1:1 Mentorship
4. Interview Preparation & Tips
5. Conference Speaking
6. Take-home Exercise Help (iOS)
7. Career Guidance
8. Mock Interview

In today's post, I am going to touch on a niche area in SwiftUI designs and string formatting. This is about how to apply custom formatting to localizable strings. It sounds complicated, so let me explain it with an example,

Suppose I have a localizable string like this,

Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage

Please note that this strings is likely to be translated in many languages where positional parameters might get tossed around in unpredictable manner. For example, in some languages station names might appear before "Going from" phrase or the station name that represents passing via argument may appear in the middle instead of at the end like this sentence in English.

The problem statement is, in the above example, we want to apply special formatting only to arguments. For example, station names must appear in bold form with red color in the background and white in the foreground.

One option is to extract arguments by start and end index and selectively apply styles to them. However, this approach won't work for apps supporting localization.

We are going to achieve this by recognizing literal arguments and applying selective formatting to them. Let's see how!

1. We will use the input string which contains regular text and arguments that need formatting. We will sequence arguments in the format %i$@ where i represents their position in the sequence and it starts with 1. For example, Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage
2. We will create a function that will take the input string and sequence of passed arguments replacing placeholder symbols (e.g. %1$@)
3. We will create another utility function which will take these parameters and return the array of FragmentType. Each fragment type represents either a literal or string
4. We will go over an array of FragmentType and apply styles to arguments (Or literals if that is the requirement)
5. We will combine the array of Text objects from the previous step into a single Text objects and display them on the SwiftUI view

First, we will define an enum to store fragments and literal from the input string

enum FragmentType {
    case literal(String)
    case argument(Int)
}

Next, we will write functions that take an input string and convert it into an array of FragmentType enums for later formatting.

    static func fragmentizeFormattedString(_ formatString: String) -> [FragmentType] {
        return getFragments(regex: "%\\d+\\$@", inputText: formatString)
    }

    static func getFragments(regex: String, inputText: String) -> [FragmentType] {

        var fragments: [FragmentType] = []

        guard let regex = try? NSRegularExpression(pattern: regex) else {
            return []
        }
        let results = regex.matches(in: inputText,
                                range: NSRange(inputText.startIndex..., in: inputText))

        var previousIndex = inputText.startIndex

        var currentIndex = 0
        for match in results {
            for range in 0..<match.numberOfRanges {
                let rangeBounds = match.range(at: range)

                guard let range = Range(rangeBounds, in: inputText) else {
                    continue
                }

                if range.lowerBound != inputText.startIndex {
                    let closedRange = previousIndex..<range.lowerBound
                    fragments.append(.literal(String(inputText[closedRange])))
                }
                fragments.append(.argument(currentIndex))
                previousIndex = range.upperBound
                currentIndex += 1
            }
        }

        if previousIndex < inputText.endIndex {
            fragments.append(.literal(String(inputText[previousIndex..<inputText.endIndex])))
        }

        return fragments
    }
    
    

There is a lot going on in the previous function. It accepts an input string along with a regular expression to extract arguments of type %1$@ from it. This is dictated by the regular expression. As it moves along, it breaks the original string into literal (non-arguments) and arguments. Literals are converted into literal case with text as an argument and arguments into argument case with argument index as an argument.

In the next part, we will see how to use these fragments for formatting specific parts of the string and presenting them on the SwiftUI view.

struct CustomStringFormat_Example: View {

    let inputString = "Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage"

    let arguments = ["Boston", "New York", "Providence"]

    var body: some View {
        VStack {
            let fragments = fragmentizeFormattedString(inputString)

            let output = fragments.map { fragment in
                switch fragment {
                case .literal(let staticText):
                    return Text(staticText).foregroundColor(Color.red).font(.largeTitle)
                case .argument(let index):
                    return Text(arguments[index]).foregroundColor(Color.yellow).font(.title)
                }
            }.reduce(Text(verbatim: ""), +)

            output
        }
    }
}

In the code above, we simply iterated over a list of output fragments and applied formatting one by one. Let's take a look at examples,

If you want to keep literal styles unchanged, you can also skip formatting on them.

case .literal(let staticText):
    return Text(staticText)
    

Localization

You might have noticed that I talked a lot about localization in this post. The reason for using formatted strings with arbitrary arguments is to facilitate the localization process. For example, if the arguments are embedded into the string with no distinction between literals and arguments, it can easily lose context and produce a garbled translation.

Referring to the above example, each language will have its own rules to position station names within the input string. Since we're passing them by arguments and the context of the string, translators can better place them to match the target languages' rules.

For example, consider the following line in the Localization file,

//A informational string where first two arguments indicate final source and destination stations. The last argument indicates the station through which the train will be passing

 "Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage" = "Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage";
 
 

Now, when the translator looks at the comment and the original English string, they know the context of this message, not just by looking at the raw string, but also the situation where these arguments are used in the user-facing message.

So final translations in some other languages will look like this,

// French
//A informational string where first two arguments indicate final source and destination stations. The last argument indicates the station through which the train will be passing

"Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage" = "Passer de %1$@ à %2$@. Bon voyage en passant via %3$@. bon voyage";

//Spanish
//A informational string where first two arguments indicate final source and destination stations. The last argument indicates the station through which the train will be passing

"Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage" = "Pasando de %1$@ a %2$@. Que tengas un feliz viaje pasando por %3$@. buen viaje";


//Hindi
//A informational string where first two arguments indicate final source and destination stations. The last argument indicates the station through which the train will be passing

"Going from %1$@ to %2$@. Have a happy journey passing via %3$@. Bon Voyage" = "%1$@ से %2$@ तक जा रहा हूँ। %3$@ से होकर गुजरने वाली आपकी यात्रा मंगलमय हो। बॉन यात्रा";

As evident from these translations, the absolute position of arguments changes by language, so relying on the arguments rather than their absolute position in English is the right way to apply translations and argument-wise formatting

Source Code

The full source code for this tutorial is available on GitHub Custom String Format Repo for further reference

Summary

So this was all about how to apply custom styles to localizable strings in SwiftUI. As more and more apps become available worldwide, localization is a requirement and not an option for any modern app. The solution mentioned in this post works well for any range of strings translated into any language.

Have you faced a similar issue in your production app before? How was your experience and how did you solve it? Does the solution mentioned here fit your use case? If not, what changes do you suggest to make it more robust and flexible? I would love to hear your thoughts.

Support and Feedback

If you have any comments or questions, please feel free to reach out to me on LinkedIn.

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation to keep writing more articles like this.

Consulting Services

I also provide a few consulting services on Topmate.io, and you can reach out to me there too. These services include,

1. Let's Connect
2. Resume Review
3. 1:1 Mentorship
4. Interview Preparation & Tips
5. Conference Speaking
6. Take-home Exercise Help (iOS)
7. Career Guidance
8. Mock Interview

Recently I have taken to reading annual reports of companies - For now, only public Indian companies. My father used to and still trades in stocks and I remember when I was a kid, we used to receive several huge paper reports at the year's end. Now, thanks to increased awareness about climate change, everything is represented in digital formats.

As a kid, my favorite activity was to look at the fancy pictures, cut them off, and glue them in my room. Since I started learning English too late, I couldn't understand a word of it. But it was still fun to look at all the top brass who I knew were the ultimate bosses of the company. Not sure how much anyone got out of those reports at that time, but we definitely made some good money selling those heavy reports as junk paper to local retailers and grocery merchants.

Now that I have grown up and have educated myself a little bit about good companies, stock markets, and returns, I have turned to reading public companies' annual reports during my leisure time. These documents look daunting in the beginning due to the sheer size, but you don't have to read every word of it. Most of the report is templated, and some of the content is repeated due to regulatory standards about how the report should be published.

So how do I read the report? Which things do I pay attention to and which things do I ignore? How do I manage time to read it? How does reading a report change my opinion about the company and ultimately about the investment decision? In this post, I am going to clarify my rationale behind the report reading and how it affects my investment decisions.

Choosing Which Report to Read

There are thousands of companies out there on NSE and BSE. It is virtually impossible for one person to sit and go through all their annual reports. Besides, you won't get much value when you are curious about everything around you. In my opinion, as far as report reading decision is concerned, companies fall into the following brackets,

1. Good companies I haven't invested in, but I still want to
2. Companies I am interested/invested in, but don't have much clue about
3. Companies with an innovative business model
4. Companies I am torn between - On one hand, I want to own the stock, but on the other hand, analysts are raking this company over the coal

For example, companies like Reliance Industries, Tata Motors, TCS, and Tata Coffee are well-known, stable, and have their business models straightforward, so I won't dig much into them. But if I come across less well-known companies or companies that are also doing some interesting stuff, I satisfy my curiosity by reading their reports. This includes Tata Elxsi, Devyani International, Jubilant Food, Thermax, IndiaMart, etc.

Which Content Do I Focus On

There is just too much content in the annual report, so reading it all is not practical. I usually focus on,

1. Company management (Resignations, scandals, unusual departures, scrutiny, compensation, etc.)
2. Has the company suffered from any penalty by the regulatory authority (Imprisonment, fines, lawsuits, etc.)
3. Management discussion and Analysis (Introspection and future outlook)
4. Known risks and risk mitigation strategies
5. Financial statements (Not too deep, but mainly focusing on free cash flow, retained earnings, EBITDA, debt/equity ratio, etc.)
6. Employee development (Training, insurance, parental support, ease of mobility, attrition rate, etc.)
7. Future expansion plans and major collaborations
8. Sustainability approach and renewable energy investments

Which Content Do I Ignore?

I believe SEBI has a pre-defined template for presenting annual reports. No matter what you do, you still have to adhere to it. This includes generic disclosures, legal opinions, annexure, auditors report, notices, e-voting instructions, and disclaimers regarding things out of control of management and the company.

There is also some content that gets repeated on many pages. For example, SEBI might ask companies to provide answers on two issues, but they both have the same answer. In that case, the company still has to publish it twice.

Vague Statements

Sometimes when asked about risk management, profitability of future outlook, the company makes generic statements that have little or no relation to the business. Reports might also be making claims about the popularity of specific products or services, but if you look up online, people aren't really happy about them.

In other cases, customer care of the company is not up to par and people receiving bad products badmouth the company on social media. In such cases, you no longer know which version to believe.

Look for Explanations

Companies might not be too lucky to put everything in place all the time. Sometimes things go wrong. For example, reduced profitability, lawsuits from tax authorities, public scandals, impairment of assets, etc. However, the company is still expected to provide satisfactory reasoning for such circumstances no matter how bitter they are.

As an investor, I would rather be happy to see the company being transparent and providing all the details and reasoning behind unfavorable outcomes or decisions than presenting it as "good" to convince shareholders that it's not as bad as it looks.

Look for Exceptional Items

Exceptional items are those that happen one time in the given financial year. They may significantly affect the profitability or loss. Although financial statements may look worse or better, you might need to check if there are any exceptional items causing it.

Key Audit Matters

Key audit matters are those matters that, in the auditor's professional judgment, were of most significance in the audit of the financial statements. They may be related to asset impairment or tax penalties that might have significantly moved the financial statements.

Summary

No matter how many times you have done it, annual reports are intimidating. They are at least 200 pages long and some can even stretch 550 pages long. Only look at the things that matter to you and focus on them. For example, if the company is already financially strong, you can gloss over its financial statements. If you already know about its operations and business model, you can skip the introductory pages.

Financial statements are one of the worst parts of a report. Unless you're an accountant, a lot of this stuff is not going to make sense to you. But you can still understand, company assets, liability, loans, impairment, profit after tax, tax, exceptional items, etc. These are still good things to know to gauge the company's financial strength.

Hope you liked this post which deviates a lot from my regular iOS articles. Are you an investor and are avid reader of the annual reports? What was your experience like? Are there things you pay attention to or perceive important that went unmentioned in this article? Please share your thoughts with me on LinkedIn.

Support and Feedback

If you have any comments or questions, please feel free to reach out to me on LinkedIn.

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation to keep writing more articles like this.

Introduction

In today's post, I am going to talk about how to apply the global style to the app with one click with the help of EnvironmentKey protocol. Often time we need to apply different styles to the app which may include fonts, colors, and icons that cater to specific users or app environments. Before SwiftUI, we had to maintain a global state and manually apply styles to the app.

Now with custom environment keys created using EnvironmentKey protocol, we can instantly change the whole app layout by updating styles associated with the current environment and automatically propagating that change to everywhere in the app that is using these styles to design the layout.

At the end of this tutorial, you will have a better understanding of,

1. Creating a custom environment key
2. Creating and updating custom styles on the fly
3. Updating custom environment properties

Creating Custom Environment Key

In the first step, we will create a struct that represents a custom environment key. We will add required properties to it and update it on the fly as per the requirement - In this case, we will add a computed property called styling that represents the current app style.

First, we will create a Styling struct that represents app styles such as spacing, colors, icons, etc.

import Combine
import SwiftUI

struct Styling: Identifiable, Hashable {
    let id = UUID()

    var spacing: Spacings
    var colors: Colors
    var icons: Icons
    var fonts: Fonts
    var title: String

    init(spacing: Spacings = Spacings(), colors: Colors = Colors(), icons: Icons = Icons(), fonts: Fonts = Fonts()) {
        self.spacing = spacing
        self.colors = colors
        self.icons = icons
        self.fonts = fonts
        self.title = "Marigold"
    }
}

This struct represents a custom style applied from the app. We will add four core styles components as follow,

1. Marigold
2. Sunflower
3. Brinjal
4. default style (Same as Marigold)

extension Styling {
    static var `default` = Styling()

    static var marigold = Styling()

    static var sunflower: Styling = {
        var styling = Styling()
        styling.colors = Colors()
        styling.colors.background = .green
        styling.colors.subText = styling.colors.yellow
        styling.colors.text = .red
        styling.icons.homePageIconName = "paperplane.fill"
        styling.icons.stylePageIconName = "tray.2"
        styling.title = "Sunflower"
        return styling
    }()

    static var brinjal: Styling = {
        var styling = Styling()
        styling.colors = Colors()
        styling.colors.text = .purple
        styling.colors.subText = styling.colors.purple
        styling.colors.background = styling.colors.yellow
        styling.icons.homePageIconName = "bookmark.fill"
        styling.icons.stylePageIconName = "person.circle"
        styling.title = "Brinjal"
        return styling
    }()
}

Next, we will create a custom environment key conforming to EnvironmentKey protocol. To satisfy the protocol conformance, the struct needs to implement the following property,

static var defaultValue: Self.Value { get }

We want to use the default style when no style is assigned. So we will use the default Style initializer to create a style struct with default style values and assign it to defaultValue on the custom environment key.

struct StylingEnvironmentKey: EnvironmentKey {
    static var defaultValue: Styling = Styling()
}

We will add a computed property styling on the built-in type EnvironmentValues which can be written to and read from using getter and setter. This will be used to read and write custom styles to the newly created environment key.

extension EnvironmentValues {
    var styling: Styling {
        get { self[StylingEnvironmentKey.self] }
        set { self[StylingEnvironmentKey.self] = newValue }
    }
}

When you create a new view, you may need to assign custom styles to the current environment variable before presenting it to the user. If you don't specify anything, it will use the default styles. In order to facilitate it, we will add a utility function by creating an extension on the View type.

extension View {
    func setStyling(_ value: Styling) -> some View {
        environment(\.styling, value)
    }
}

Using this extension, you can assign any styles you want to the custom view using the following one-liner,

HomeView()
    .setStyling(.brinjal)
    
    

Creating Structs for custom Colors, Spacings, Fonts, and Icons

Before we jump into applying styles, we need to create custom structs for our styles. These include the following components,

1. Spacings
2. Colors
3. Fonts
4. Icons

We will also add a couple of utilities to convert SwiftUI Color type into UIKit UIColor type

//Spacings.swift

import Foundation
import SwiftUI

struct Spacings: Hashable {

    static let _8: CGFloat = 8
    static let _12: CGFloat = 12
    static let _16: CGFloat = 16
    static let _20: CGFloat = 20

    init() {

    }

    var large: CGFloat {
        return Spacings._16
    }

    var medium: CGFloat {
        return Spacings._12
    }

    var small: CGFloat {
        return Spacings._8
    }

    var margin: CGFloat {
        return Spacings._20
    }
}

//Colors.swift

import SwiftUI

struct Colors: Hashable {

    var background = Color(hex: 0xffddff)
    var text = Color(hex: 0x181A1B)
    var subText = Color(hex: 0x94999E)
    var tintColor = Color.red

    var yellow = Color.yellow
    var purple = Color.purple

    var navyBlue = Color(hex: 0x3D73CD)
    lazy var primary = navyBlue

    init() {

    }
}

// Color + Utilities
extension Color {
    init(hex: UInt) {
        self.init(
            red: Double((hex >> 16) & 0xff) / 255,
            green: Double((hex >> 08) & 0xff) / 255,
            blue: Double((hex >> 00) & 0xff) / 255,
            opacity: 1.0
        )
    }

    var uiKitColor: UIColor {
        UIColor(self)
    }
}

//Fonts.swift

import SwiftUI

struct Fonts: Hashable {

    var title: Font = Font.system(.headline)
    var bodyFont: Font = Font.system(.body)

    init() {

    }
}

//Icons.swift

import SwiftUI

struct Icons: Hashable, Identifiable {

    var homePageIconName = "checkmark.circle.fill"
    var stylePageIconName = "smallcircle.fill.circle.fill"

    func hash(into hasher: inout Hasher) {
        hasher.combine(homePageIconName)
        hasher.combine(stylePageIconName)
    }

    var id: String {
        homePageIconName + stylePageIconName
    }

    var homePageIcon: Image {
        Image(systemName: homePageIconName)
    }
    var stylePageIcon: Image {
        Image(systemName: stylePageIconName)
    }

    init() {

    }
}

Creating a Custom Environment Object

Now that we have styles and custom environment key ready, let's start with the custom environment object with styling property that encodes all the appearance settings.

We will use the singleton instance of this class applicable to all views in the app.

import SwiftUI

final class PlantEnvironment {
    static var shared = PlantEnvironment()

	var styling: Styling

    init(styling: Styling = .marigold) {
        self.styling = styling
    }
}

In the above example, we are using the shared variable which represents the singleton of type PlantEnvironment. In case the app doesn't explicitly specify, we are using marigold as a default style.

We are expecting the whole app to change its appearance as soon as the style is changed. However, the above code only works on the SwiftUI views. Presumably, your app may also be making use of UINavigationBar APIs which will have no effect from the style change.

To apply styles to UIKit elements, we need to create an observer on styling property and update the navigation bar style as soon as a style change is detected.

The PlantEnvironment class looks like this after an update

import Combine
import SwiftUI

final class PlantEnvironment: ObservableObject {
    static var shared = PlantEnvironment()

    @Published var styling: Styling

    private var stylingCancellable: AnyCancellable?

    init(styling: Styling = .marigold) {
        self.styling = styling
        updateAppearances(with: styling)

        stylingCancellable = $styling.sink {
            self.updateAppearances(with: $0)
        }
    }

    private func updateAppearances(with styling: Styling) {
        let backgroundColor = styling.colors.background.uiKitColor
        let titleColor = styling.colors.text.uiKitColor
        let tintColor = styling.colors.tintColor.uiKitColor
        let titleFont = UIFont.boldSystemFont(ofSize: 25)
        let largeTitleFont = UIFont.systemFont(ofSize: 34)

        let navigationAppearance = UINavigationBarAppearance()
        navigationAppearance.configureWithOpaqueBackground()
        navigationAppearance.backgroundColor = backgroundColor

        navigationAppearance.titleTextAttributes = [.foregroundColor: titleColor, .font: titleFont]
        navigationAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor, .font: largeTitleFont]

        UINavigationBar.appearance().standardAppearance = navigationAppearance
        UINavigationBar.appearance().compactAppearance = navigationAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navigationAppearance

        UINavigationBar.appearance().tintColor = tintColor

        for window in UIApplication.shared.windows {
            for view in window.subviews {
                view.removeFromSuperview()
                window.addSubview(view)
            }
        }
    }
}

We will call updateAppearances the first time when the PlantEnvironment object is instantiated and then every time after styling is changed.

We also need a utility to assign the current style the styling key associated with the environment and by default pass the PlantEnvironment to SwiftUI views in the form of EnvironmentObject.

extension View {
    func plantEnvironment(_ plantEnvironment: PlantEnvironment = .shared) -> some View {
        self
            .environment(\.styling, plantEnvironment.styling)
            .environmentObject(plantEnvironment)
    }
}

Using this utility, you can apply any style and pass the pre-defined PlantEnvironment object to view before it is presented to the user. That way, the view will style itself using the style property defined in the current plant environment object.

This utility can be used on any view using the following syntax. By default, we will use the shared singleton instance of PlantEnvironment

HomeView()
    .plantEnvironment(.shared)
    
    

Building an app with Custom Styles and Environments

Now that our foundation is ready, we will create an app that will make use of custom styles and a global environment that will globally apply styles to all parts of the app as long as that screen is using the styles associated with the custom PlantEnvironment object in the form of EnvironmentObject.

First, we will create a top-level view that will use the shared singleton object of type PlantEnvironment and implicitly pass it down to all its children.

import SwiftUI

@main
struct GlobalStylingApp: App {

    @StateObject var plantEnvironment: PlantEnvironment = .shared

    var body: some Scene {
        WindowGroup {
            NavigationStack {
                HomeView()
            }
            .plantEnvironment(plantEnvironment)
            .navigationBarTitleDisplayMode(.inline)
            .background(plantEnvironment.styling.colors.background)
        }
    }
}

Children can reference, access, and use the styles associated with this passed object by referring to it with the following line,

@EnvironmentObject var plantEnvironment: PlantEnvironment

on the top level of the file.

As long as the plantEnvironment object is passed to the view, you can access the styles and apply color, spacing, and images associated with it to the corresponding view.

import SwiftUI

struct HomeView: View {

    @EnvironmentObject var plantEnvironment: PlantEnvironment

    var body: some View {
        VStack {
            plantEnvironment.styling.icons.homePageIcon

            NavigationLink {
                
            } label: {
                Text("Customize Styles")
                    .foregroundStyle(plantEnvironment.styling.colors.text)
                    .padding()
            }
        }
        .navigationTitle(plantEnvironment.styling.title)
    }
}

If you run the app now, you will see the default marigold style applied to the home screen.

Changing Styles

So far we saw how to create custom environment keys and styles that can be applied throughout the app. In this section, we will see how to update app styles on the fly and verify those changes.

We will use the SegmentedPicker to allow users to choose any style they want. As soon as the style choice is made, we will assign the chosen value to the styling property on plantEnvironment environment object passed to this view.

@EnvironmentObject var plantEnvironment: PlantEnvironment

Picker("Picker", selection: $plantEnvironment.styling) {
    Text("Marigold")
        .tag(Styling.marigold)

    Text("Sunflower")
        .tag(Styling.sunflower)

    Text("Brinjal")
        .tag(Styling.brinjal)
}
.pickerStyle(SegmentedPickerStyle())

We are assigning the tag to each of the segmented picker choices. As the user makes the choice, it will take the chosen value and automatically assign it to styling property on the plantEnvironment object.

With this main portion ready, let's create a style view from where user can change styles and add navigation to it from the home screen,

//StyleView.swift

import SwiftUI

struct StyleView: View {

    @EnvironmentObject var plantEnvironment: PlantEnvironment

    var body: some View {
        VStack {
            Text("Customize Styles")

            plantEnvironment.styling.icons.stylePageIcon

            Picker("Picker", selection: $plantEnvironment.styling) {
                Text("Marigold")
                    .tag(Styling.marigold)

                Text("Sunflower")
                    .tag(Styling.sunflower)

                Text("Brinjal")
                    .tag(Styling.brinjal)
            }
            .pickerStyle(SegmentedPickerStyle())
            }

        }
        .padding()
        .navigationTitle(plantEnvironment.styling.title)
    }
}

Navigating from the Home screen

//HomeView.swift

NavigationLink {
    StyleView()
} label: {
    Text("Customize Styles")
        .foregroundStyle(plantEnvironment.styling.colors.text)
        .padding()
}

Now let's run the app and observe styles changes as the user toggles between available choices,

Verifying Styles Changes

To make sure our style changes get propagated everywhere in the app, we will add a navigation link to StyleView screen which will take us further to the styles demo screen where we will be able to see all the changes associated with the current ly applied style.

Navigation from StyleView.swift screen

......
...

Picker("Picker", selection: $plantEnvironment.styling) {
    Text("Marigold")
        .tag(Styling.marigold)

    Text("Sunflower")
        .tag(Styling.sunflower)

    Text("Brinjal")
        .tag(Styling.brinjal)
}
.pickerStyle(SegmentedPickerStyle())

NavigationLink {
    StyleUpdateDemoView()
} label: {
    Text("Tap to view updated styles")
        .foregroundStyle(plantEnvironment.styling.colors.text)
}

......
....
..

StyleUpdateDemoView.swift Screen

import SwiftUI

struct StyleUpdateDemoView: View {

    @EnvironmentObject var plantEnvironment: PlantEnvironment

    var body: some View {
        VStack {
            Text("Title")
                .foregroundStyle(plantEnvironment.styling.colors.text)
            Text("Subtitle")
                .foregroundStyle(plantEnvironment.styling.colors.subText)
        }
        .background(plantEnvironment.styling.colors.background)
        .navigationTitle(plantEnvironment.styling.title)
    }
}

Now let's run the app, change styles, and view style changes on all three screens.

Source Code

The full source code for this tutorial is available on the GitHub GlobalStyles Repo for further reference

Summary

So this was all about applying global styles in the iOS app using SwiftUI APIs. Hope you liked it and will be helpful for you to improve styles in your existing app. Have you used any other global styling framework? Do you have any suggestions for improvement in the current code or this blog post? Let me know. I would love to hear your thoughts on this topic.

Support and Feedback

If you have any comments or questions, please feel free to reach out to me on LinkedIn.

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation to keep me writing more articles like this.

Consulting Services

I also provide a few consulting services on Topmate.io, and you can reach out to me there too. These services include,

1. Let's Connect
2. Resume Review
3. 1:1 Mentorship
4. Interview Preparation & Tips
5. Conference Speaking
6. Take-home Exercise Help (iOS)
7. Career Guidance
8. Mock Interview

Apple introduced the concept of Actors in iOS 13.0 and macOS 10.15. Actors allow us to modify the program state in a concurrent environment without data races and the possibility of corrupting data due to simultaneous access.

Data races happen when two threads access the same data and one of them is a write operation.

Swift makes it in such a way that there is no way to modify a mutable state simultaneously by two threads at the same time when used with actors. This helps developers write thread-safe code without having to manually control it using locks, atomics, or serial dispatch queues.

Let's try to understand multithreading and data race problem with an example,

Data Race and Threading Issue

class HeartRateCounter {
    var beats = 0

    func incrementBeats() -> Int {
        beats += 1
        return beats
    }
}

In the above example, we have a class named HeartRateCounter. It has a single variable named beats. The function incrementBeats increments the value of this variable every time it is called.

If we're running it in the single-thread synchronous context, it will work as expected. But if we were to run it in a multi-threaded environment in an async fashion, incrementBeats function will return different values based on the order of execution.

let heartRatesCounter = HeartRateCounter()

DispatchQueue.global().async {
    print("First increment beats \(heartRatesCounter.incrementBeats())")
}

DispatchQueue.global().async {
    print("Second increment beats \(heartRatesCounter.incrementBeats())")
}

Prints

Second increment beats 2
First increment beats 1

If we run it again, it now prints

First increment beats 2
Second increment beats 2

There is no predictable pattern in order in which print statements will be executed nor the output of return value from incrementBeatscalls.

Actors essentially help us fix this issue by constraining only one access to mutating variables at one time. If two threads try to simultaneously access it while one of them is a write access, one of the threads has to wait before the first operation is completed.

Problem with Data Races

The major issue with data races is not their implication, but the difficulty of reproducing them. It's easy to artificially create one, but even if you know the data race is happening in the production code, it can be challenging to reproduce it on your local machine.

So the best defense against them is to prevent them so that you don't have to deal with the headache of reproducing and fixing them later.

Meet Actors

Swift Actors provide synchronization for shared mutable data by isolating their state from the rest of the program. This results in mutual access to mutable states even in the multi-threaded environment.

Actors are types in Swift, just like struct, classes, and enums. You can create a new actor using Actor keyword followed by actor's name. They are reference types and may contain properties, methods, and initializers.

Actors though, share many similarities with classes, do not support inheritance

With concepts about Actors clarified, let's convert the HeartRateCounter class into an Actor. The only thing we change is a keyword from class to actor. Everything else remains the same.

actor HeartRateCounter {
    var beats = 0

    func incrementBeats() -> Int {
        beats += 1
        return beats
    }
}

Now that Actor is set up, it will restrict multiple threads from calling incrementBeats while another thread is busy executing. We can do it by using async keyword before calling incrementBeats. Now every access to its property and function is an async access. (There are exceptions though - More about that in later part).

let heartRatesCounter = HeartRateCounter()

Task {
    print("First increment beats \(await heartRatesCounter.incrementBeats())")
    print("Second increment beats \(await heartRatesCounter.incrementBeats())")
}

//prints this output every time the program is run

First increment beats 1
Second increment beats 2

This makes sure that while the actor is busy evaluating the first expression, the code will suspend and the CPU you're running on will do other useful work. When the actor becomes free, it will wake up the code and resume the execution again.

Let's take another more detailed example here,

let heartRatesCounter = HeartRateCounter()

Task.detached {
    print("First increment beats \(await heartRatesCounter.incrementBeats())")
}

Task.detached {
    print("Second increment beats \(await heartRatesCounter.incrementBeats())")
}

In the above example, we're calling incrementBeats on two detached tasks (two different threads). Although there is no order in which they will be executed, they are guaranteed to have exclusive access to beats variable and will never produce half-mutated value. When run, it can either print

First increment beats 1
Second increment beats 2

OR

Second increment beats 2
First increment beats 1

But nothing else. This makes sure one async operation is not interrupted by other thread while read or write operation is in progress and these two pieces of code never run simultaneously and always produce a valid result in the execution order.

Exceptions

Using await keyword results in the suspension of the thread and waiting until async operation is finished. However, you may not always need to use the isolated instance and await keyword while accessing data.

If the actor property is immutable and constant, you can access it without using await keyword. For example, if we delcare a new property named machineName with a constant value, the function that accesses it need not be isolated and have a mutually-exclusive access.

actor HeartRateCounter {
    var beats = 0

    let machineName = "US Heart Surgeons Machine"

    func incrementBeats() -> Int {
        beats += 1
        return beats
    }

    func getMachineName() -> String {
        return machineName
    }
}

Ideally, when I try to call getMachineName, it should allow me to do so without using await keyword. But unfortunately, in this case, I am getting an error thrown at me.

Expression is 'async' but is not marked with 'await'

This is because Swift assumes every function and property of the actor needs isolated access. However, this is not the case here. Since machineName is an immutable constant, the function that accesses it can have nonisolated access and can be called without using await keyword.

We can fix it by prefixing nonisolated keyword to getMachineName function. This explicitly tells the compiler that calling this function in a multithreaded environment will not cause data race.

nonisolated func getMachineName() -> String {
    return machineName
}

Now with this change in place, let's run the app and see the output

// prints "Machine name is US Heart Surgeons Machine"
print("Machine name is \(heartRatesCounter.getMachineName())")

Please remember that nonisolated keyword only works on actor functions. If you apply nonisolated to constant declarations, compiler will throw an error since constants are nonisolated by default

Summary

Actors offer a simple and boilerplate-less code to avoid threading issues and data races in a multithreading environment. Earlier, it used to be locks and serial dispatch queues. But it's often easy to go wrong with them and there is a lot of code involved. With the help of actors and async-await semantics, it becomes easy to detect and avoid data races during development cycle.

The beauty of this approach is, even if you write a code that might cause data race later, Actor will help you catch that even before you run the app.

What do you think about these new semantics introduced in Swift? Do you think they offer a better way to avoid data races? Have you tried Actors already? How was your experience with it? I would love to hear your thoughts on it.

Support and Feedback

If you have any comments or questions, please feel free to reach out to me on LinkedIn.

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation to keep me writing more articles like this.

Consulting Services

I also provide a few consulting services on Topmate.io, and you can reach out to me there too. These services include,

1. Let's Connect
2. Resume Review
3. 1:1 Mentorship
4. Interview Preparation & Tips
5. Conference Speaking
6. Take-home Exercise Help (iOS)
7. Career Guidance
8. Mock Interview

Some of the most frequent operations in iOS involve converting an array to a string and string back to an array. This happens when the user has an array of objects but needs to convert them into the user-facing message, or a long string separated by a fixed delimiter needs to be converted into array-based tokens.

Despite this frequent usage, iOS doesn't have easily memorable names for these APIs. In today's blog post, I am going to talk about standard iOS APIs to convert an array to a string and then string back to the array.

1. Converting Array to String in iOS using Swift

To convert a Swift string array to a single String, we are going to use joined method on Swift arrays. You must use the array of strings to use this method.

This method takes optional separator parameter. If no separator parameter is specified, all the array elements are joined without any space between them.

For example,

let names: [String] = ["Bob", "Tom", "Steve"]

let joinedNamesWithSeparator = names.joined(separator: ", ")
print(joinedNamesWithSeparator) // prints Bob, Tom, Steve

let joinedNamesWithoutSeparator = names.joined()
print(joinedNamesWithoutSeparator) // prints BobTomSteve

Since this API only works with string arrays as specified in the documentation below,

// Taken from official Apple documentation

extension Array where Element == String {
    public func joined(separator: String = "") -> String
}

you might wonder how to convert an array of custom objects to a string. You can easily do it by mapping an array of custom objects to an array of strings and then calling this API to get a single string back.

Let's understand it with an example below,

let people: [Person] = [Person(firstName: "Top", lastName: "Holland"), Person(firstName: "Doctor", lastName: "Strange"), Person(firstName: "Tony", lastName: "Stark")]

let joinedNamesWithSeparator = people.map { $0.firstName }.joined(separator: ", ")

// prints Top, Doctor, Tony
print(joinedNamesWithSeparator)

let joinedNamesWithoutSeparator = people.map { $0.firstName }.joined()

// prints TopDoctorTony
print(joinedNamesWithoutSeparator)

And that's it. Now you can convert either an array of strings or an array of custom objects to a string.

2.  Converting String to Array in iOS using Swift

In this next part, we are going to see how to convert a string into an array of strings. To convert single strings into an array of strings, you need to specify the delimiter which will be used to divide a single string into multiple tokens in the form of an array.

For example, consider this -

let namesCollection = "Top, Doctor, Tony"

let namesArray = namesCollection.components(separatedBy: ",")

// Prints ["Top", " Doctor", " Tony"]
print(namesArray)

We had a single string "let namesCollection = "Top, Doctor, Tony" where each substring was separated by a character ,. We used components(separatedBy API to tokenize this string into an array separated by , so that each substring separated by , became an individual element in the array.

If the separator character does not exist in the string, this API returns an array with a single element which is, the original string back.

let namesCollection = "Top, Doctor, Tony"

let namesArray = namesCollection.components(separatedBy: ":")

// prints ["Top, Doctor, Tony"]
print(namesArray)

Summary

And that's all folks. Next time when you run into converting an array to a string or a string to an array conversion, you can use these APIs as a handy tool. To summarize, here's how you can use them.

let names: [String] = ["Bob", "Tom", "Steve"]

let joinedNamesWithSeparator = names.joined(separator: ", ")

// prints Bob, Tom, Steve
print(joinedNamesWithSeparator)

let namesCollection = "Top, Doctor, Tony"

let namesArray = namesCollection.components(separatedBy: ", ")

// prints ["Top", "Doctor", "Tony"]
print(namesArray)

Support and Feedback

If you have any comments or questions, please feel free to reach out to me on LinkedIn.

If you like my blog content and wish to keep me going, please consider donating on Buy Me a Coffee or Patreon. Help, in any form or amount, is highly appreciated and it's a big motivation to keep me writing more articles like this.

Consulting Services

I also provide a few consulting services on Topmate.io, and you can reach out to me there too. These services include,

1. Let's Connect
2. Resume Review
3. 1:1 Mentorship
4. Interview Preparation & Tips
5. Conference Speaking
6. Take-home Exercise Help (iOS)
7. Career Guidance
8. Mock Interview