DEV Community: Jeroen Leenarts

How To Set Up Your Coding Environment

Jeroen Leenarts — Tue, 06 Feb 2024 16:42:37 +0000

Many coding tutorials start with a blanket statement that tells you to set up a project environment. Here are some examples:

Make sure to have Python available
Create a Ruby environment
You need to have Node installed

You’re told what to do but not how to do it. You might know what to do, but oftentimes, it might be foreign to you.

If the latter is true for you, you might be wondering, “, So now what?”

Let’s explore what setting up an environment means, why it is important, and the steps you need to take to set up your environment. In this article, we will show you how to set up an environment for Python, Node, and Ruby since we come across these ourselves most of the time.

What Is An Environment?

As it relates to programming, the concept of an environment is pretty straightforward. It is the context of the processes you run to compile, interpret, and/or run some code. When you are instructed to set up or have an available environment, there is often an indication of what language and version you need.

One project might require you to have the latest Node 18 available, while another tutorial might indicate that you need Node 20 available. You can’t have both, right? Well, you actually can. It just requires additional setup on your part to make sure that you can have both of these language runtimes installed at the same time. You can go even further and have the same Node version installed multiple times. This is not something you will need for Node, but for a Python runtime, this can actually be beneficial.

Regardless, an environment is about creating a situation where you can decide exactly which language runtime version you are running your code against and make sure this language runtime has a dedicated storage mechanism for library versions to be made available to the code you want to compile or run.

Why Setting Up An Environment Is Important

There are three reasons why setting up your environment is important:

Availability
Stability
Flexibility

Let’s explore each of these.

Availability

Your operating system of choice might come with Node, Python, or whatever language runtime you need. But, it might not. On top of that, if you rely on an installed version pre-packaged with your operating system, it might not be the specific version you need. If a runtime version is made available by your operating system, it is most often an older version of the language runtime you actually need for the content you are reading.

Stability

Often, a codebase has specific version requirements on the dependencies that you use. What if you are dealing with multiple codebases that all need the same runtime and packages, but in different versions? Are you going to uninstall and re-install all these versions whenever you need to switch between projects?

What if you rely on an operating system-packaged version of a language runtime? MacOS comes with Ruby installed. But you shouldn’t really install random Ruby gems (Ruby language-based libraries) into the Ruby installation provided by your operating system. You simply cannot tell what adverse interactions you might cause; let alone update the operating system installed package versions. You could end up with a system that is unstable or might not even boot correctly anymore.

On top of that, after days or weeks of picking just the right packages and working with those, there’s an operating system upgrade, and all your modifications to the system-provided language runtime are gone, making you have to apply them all over again.

To make your day even worse after suffering such a disaster, your code suddenly won't compile or run anymore because the operating system-provided language runtime received some much-needed version updates bringing breaking changes to your codebase.

Flexibility

As you might be able to tell, it is very beneficial to have just the right version of a language runtime for your code with all the packages it needs on your machine.

When you need to switch to a different codebase with different requirements, make sure that the switch between these requirements is as quick and easy as possible. You might even want to be able to run the same language runtime side by side for different projects using different versions and different installed packages.

There are many ways you can get a running Node, Python, or Ruby environment. Something to be aware of is to try and keep your system-installed language runtime untouched. The runtimes supplied by your operating system are important. In fact, often, they are reset and cleaned with a system update. If you do not isolate your system-installed language runtime from installing and updating random packages, there will come a day that parts of your system or your whole system will come down with random issues. If you install packages used for development into your system-installed language runtimes, there’s a good chance a system update will reset parts of your development environment and thus break your workflow.

In general, our advice is to keep it simple by separating these kinds of things. Leave your host OS untouched and try to run as much of your development work in an isolated environment. This also makes it easier to transfer your local work to a server later.

Get Availability, Stability, and Flexibility with A Project-Specific Language Runtime

Isolating your language runtimes between codebases and ensuring each runtime meets the codebase’s exact version requirements and dependencies gives you all the power you need to deal with many codebases on the same machine simultaneously.

Each language runtime has different ways to set up such an environment. Often there are even multiple ways you can achieve the same result.

In this article, we will share what environment setup strategies we like to use at Stream for:

Node
Python
Ruby

Setting Up a Node Environment

For Node, internally here at Stream we tend to use NVM. It can be installed on a Mac with:



curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Make sure to check the current version of that NVM installation command at the GitHub page of NVM. There you can also find instructions specific to other operating systems beyond MacOS.

On a Mac, do not use HomeBrew to install NVM. The NVM project recommends using their script. We had a few issues using NVM installed through HomeBrew over the years — issues we did not have when using their installer script.

The README of NVM specifically states the following:

Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below before filing an issue.

Once you have installed NVM, you also need to install a Node version. Running this command without a version will install the latest version of Node.



nvm install node

If you specifically want to install Node version 21.1.0, you could run the following command:



nvm install node 21.1.0

To list installed Node versions, run the following command.



nvm use 21

This command will pick the latest installed version of Node 21.

And that’s it.

You are now ready to start using Node on your machine in isolation. Each installed Node version has its own storage for Node packages. With the way Node handles packages, that’s all you need to do. Node and NPM are quite powerful in dealing with dependencies correctly, and this fact allows you to safely share a specific node version across multiple codebases without issues.

Setting Up a Python Environment

For this setup instruction we are assuming Python 3.9. But you can pick any reasonable Python version you need, these instructions should work on lower versions of Python as well. You can discover which version you have installed by running the python --version command.

Also, we are using venv to create and manage our so-called virtual environments. A virtual environment is defined at the file system level by having a folder with specific content at a specific location in your file system. Usually, this virtual environment folder lives at the root level of the codebase you are working with.

So at the root level of a specific codebase, you need to run the following command:



python -m venv my-new-venv

What actions does this command perform?

create a directory in our project folder (called my-new-venv - we could also name it any other way)
places a pyvenv.cfg file inside of the directory (which points to the Python installation from which the command was run)
create a bin sub-directory, which contains the Python binaries and another one for the packages that’ll be installed

💡 Note: you can add the llm-env folder to the .gitignore file.

When working with virtual environments in Python, you need to activate it first. You do that by running the following command at the same location as when you created your environment



// macOS, Linux
source my-new-venv/bin/activate

We have a working separate Python environment now and can install the required packages for the project without making those packages available to any other Python code running on your system.

Ruby

Setting up a Ruby environment is, yet again, different.

To run a Ruby environment in isolation, you need to install some prerequisites first using Homebrew.



brew install rbenv ruby-build

Next we need to add a bit of configuration to the terminal configuration. We could do this manually, but rbenv has a convenient command for just that.



rbenv init

You can install specific Ruby versions using the rbenv install command.



# Install Ruby
rbenv install 2.3.3
rbenv global 2.3.3

More details on how to pick a specific version to install is available on the RBEnv website.

Conclusion

By setting up your environment in isolation, you can prevent yourself from a lot of issues when experimenting with code. It makes your code behave more predictable due to the defined state of the runtime environment you are working with. This article should provide you with enough information to get started, but obviously, there is a lot more power embedded in NVM, Virtual Environment and RBEnv. So make sure to check their documentation.

As always, if there are any questions, feel free to reach out to us over X.

Build an iOS 17-Style Action Composer in SwiftUI

Jeroen Leenarts — Tue, 30 Jan 2024 14:55:05 +0000

Apple tends to bring improvements to the UI on each major platform release. One of these nice improvements is the new Action Menu List. The Action Menu List is a nicely animated menu, typically under a button at the bottom left of an app’s message entry screen. When building for iOS 17 and beyond, you’ll want to build a UI that takes the best of what Apple shows us.

Did you know it’s possible to achieve the same look with Stream? Let’s recreate the Apple-designed user interface on top of the Stream Chat UI Component Library.

We will be building a UI that looks as follows:

Please note this article is based on one of several UI cookbooks we have available in our documentation.

To get started, you must have a codebase available on the Stream Chat SDK. To do that, first run through the SwiftUI Chat tutorial. Or grab the finished tutorial codebase from our GitHub repository.

A fully working demo implementation of this code is available on GitHub in our SwiftUI Demo Application.

Implement the Custom Composer

Begin by creating a new file AppleMessageComposerView, and paste the following code.



import StreamChat
import StreamChatSwiftUI
import SwiftUI

struct AppleMessageComposerView<Factory: ViewFactory>: View, KeyboardReadable {}

The AppleMessageComposerView will be a SwiftUI view with a generic over a ViewFactory protocol. The ViewFactory protocol is part of the Stream Chat UI Component Library and is where you can indicate that you would like specific views to be overridden by one of your own implementations. If you implement the ViewFactory and provide a View adhering to the interface indicated by the ViewFactory protocol functions, you should end up with your custom-implemented view integrating seamlessly into the rest of Stream’s UI Component Library. We also require the implementation of Stream’s KeyboardReadable protocol. The KeyboardReadable protocol provides your custom view with useful keyboard handling.

The next step is to define a few properties we will need during the implementation of our custom view. Make sure to paste the following code in the body of the AppleMessageComposerView we just created.



    @Injected(\.colors) private var colors
    @Injected(\.fonts) private var fonts

    // Initial popup size, before the keyboard is shown.
    @State private var popupSize: CGFloat = 350
    @State private var composerHeight: CGFloat = 0
    @State private var keyboardShown = false

    private var factory: Factory
    private var channelConfig: ChannelConfig?

    @State private var state: AnimationState = .initial
    @State private var listScale: CGFloat = 0

    @StateObject var viewModel: MessageComposerViewModel

    var onMessageSent: () -> Void

The @Injected properties provide access to StreamChat's SDK specific objects, such as fonts and colors. It is Stream’s way of centralizing themable properties across the entire UI Component library. By adhering to the content of these injected properties, your custom component will take part in the theming process of Stream’s UI Components.

The @State properties allow us to track the view's state, such as the size of the composer popup and whether it's expanded. We also need a MessageComposerViewModel view model to handle the entered text, validation, presentation logic, as well as the sending of a message. We will reuse the MessageComposerViewModel available in the UI Components library.

Let’s finish the AppleMessageComposerView first by adding an init method.



public init(
    viewFactory: Factory,
    viewModel: MessageComposerViewModel? = nil,
    channelController: ChatChannelController,
    onMessageSent: @escaping () -> Void
) {
    factory = viewFactory
    channelConfig = channelController.channel?.config
    let vm = viewModel ?? ViewModelsFactory.makeMessageComposerViewModel(
        with: channelController,
        messageController: nil
    )
    _viewModel = StateObject(
        wrappedValue: vm
    )
    self.onMessageSent = onMessageSent
}

Our view still doesn’t have a proper `body ' yet. We will create a horizontal stack with a plus button and a text input field as the main content of the composer. When the user picks the attachment button, the composer should expand by moving up and providing the user with buttons allowing attachment of supported attachment types.

Showing this requires us to add a vertical stack to contain the picker in a compact state. When the attachment type is activated, we must move it up with an animation.

So, to reiterate, the components in the composer to keep an eye on are the plus button, input view, and bottom attachment picker.

Now we discussed what we aim for, let’s add the body of our AppleMessageComposerView by pasting below body function into the AppleMessageComposerView.

`swift
var body: some View {
VStack(spacing: 0) {
HStack(alignment: .bottom) {
plusButton

        ComposerInputView(
            factory: DefaultViewFactory.shared,
            text: $viewModel.text,
            selectedRangeLocation: $viewModel.selectedRangeLocation,
            command: $viewModel.composerCommand,
            addedAssets: viewModel.addedAssets,
            addedFileURLs: viewModel.addedFileURLs,
            addedCustomAttachments: viewModel.addedCustomAttachments,
            quotedMessage: .constant(nil),
            maxMessageLength: channelConfig?.maxMessageLength,
            cooldownDuration: viewModel.cooldownDuration,
            onCustomAttachmentTap: viewModel.customAttachmentTapped(_:),
            removeAttachmentWithId: viewModel.removeAttachment(with:)
        )
        .overlay(
            viewModel.sendButtonEnabled ? sendButton : nil
        )
    }
    .padding(.all, 8)

    factory.makeAttachmentPickerView(
        attachmentPickerState: $viewModel.pickerState,
        filePickerShown: $viewModel.filePickerShown,
        cameraPickerShown: $viewModel.cameraPickerShown,
        addedFileURLs: $viewModel.addedFileURLs,
        onPickerStateChange: viewModel.change(pickerState:),
        photoLibraryAssets: viewModel.imageAssets,
        onAssetTap: viewModel.imageTapped(_:),
        onCustomAttachmentTap: viewModel.customAttachmentTapped(_:),
        isAssetSelected: viewModel.isImageSelected(with:),
        addedCustomAttachments: viewModel.addedCustomAttachments,
        cameraImageAdded: viewModel.cameraImageAdded(_:),
        askForAssetsAccessPermissions: viewModel.askForPhotosPermission,
        isDisplayed: viewModel.overlayShown,
        height: viewModel.overlayShown ? popupSize : 0,
        popupHeight: popupSize
    )
}
.background(
    GeometryReader { proxy in
        let frame = proxy.frame(in: .local)
        let height = frame.height
        Color.clear.preference(key: HeightPreferenceKey.self, value: height)
    }
)
.onPreferenceChange(HeightPreferenceKey.self) { value in
    if let value = value, value != composerHeight {
        self.composerHeight = value
    }
}
.onReceive(keyboardWillChangePublisher) { visible in
    if visible && !keyboardShown {
        if viewModel.composerCommand == nil {
            withAnimation(.easeInOut(duration: 0.02)) {
                viewModel.pickerTypeState = .expanded(.none)
            }
        }
    }
    keyboardShown = visible
}
.onReceive(keyboardHeight) { height in
    if height > 0 && height != popupSize {
        self.popupSize = height - bottomSafeArea
    }
}
.overlay(
    viewModel.showCommandsOverlay ?
        factory.makeCommandsContainerView(
            suggestions: viewModel.suggestions,
            handleCommand: { commandInfo in
                viewModel.handleCommand(
                    for: $viewModel.text,
                    selectedRangeLocation: $viewModel.selectedRangeLocation,
                    command: $viewModel.composerCommand,
                    extraData: commandInfo
                )
            }
        )
        .offset(y: -composerHeight)
        .animation(nil) : nil,
    alignment: .bottom
)
.modifier(factory.makeComposerViewModifier())
.accessibilityElement(children: .contain)
.overlay(
    ComposerActionsView(viewModel: viewModel, state: $state, listScale: $listScale)
        .offset(y: -(UIScreen.main.bounds.height - composerHeight) / 2 + 80)
        .allowsHitTesting(state == .expanded)
)

}
`

If you look closely, we add a few modifiers to the view as well. With these, we read the height of the popup, keyboard keyboard-related actions and they help us show the commands overlay.

Pay special attention to the last overlay modifier; this is the one that helps us show the composer actions view with an animation.

We still need to create one more thing to make it all work. And that’s the Composer Actions View.

Creating the Composer Actions View

To keep things simple, we will put everything in the file we created earlier. To get the Composer Action View started we begin by defining what an action is. Create a new struct called ComposerAction, with the following properties.

`swift
struct ComposerAction: Equatable, Identifiable {
static func == (lhs: ComposerAction, rhs: ComposerAction) -> Bool {
lhs.id == rhs.id
}

var imageName: String
var text: String
var color: Color
var action: () -> Void
var id: String {
    "\(imageName)-\(text)"
}

}
`

This struct will contain the required information needed to show action in the list of actions.

We got the struct for the data to display in an action, now let’s define how an action should look on screen. Let’s create the ComposerActionsView. The composer actions view has a blurred background because it looks cool and it seems that’s what Apple does as well. On top of the blurred background, we will display the composer actions we want to offer to our end users. We will also add a small animation that will make the list bounce a little bit by scaling the list and adjusting the offset during the animation.

Paste the following code below the ComposerAction struct we created earlier.

`swift
struct ComposerActionsView: View {

@ObservedObject var viewModel: MessageComposerViewModel

@State var composerActions: [ComposerAction] = []

@Binding var state: AnimationState
@Binding var listScale: CGFloat

var body: some View {
    ZStack(alignment: .bottomLeading) {
        Color.white.opacity(state == .initial ? 0.2 : 0.5)

        BlurredBackground()
            .opacity(state == .initial ? 0.0 : 1.0)

        VStack(alignment: .leading, spacing: 30) {
            ForEach(composerActions) { composerAction in
                Button {
                    withAnimation {
                        state = .initial
                        composerAction.action()
                    }
                } label: {
                    ComposerActionView(composerAction: composerAction)
                }
            }
        }
        .padding(.leading, 40)
        .padding(.bottom, 84)
        .scaleEffect(
            CGSize(
                width: state == .initial ? 0 : 1,
                height: state == .initial ? 0 : 1
            )
        )
        .offset(
            x: state == .initial ? -75 : 0,
            y: state == .initial ? 90 : 0
        )
    }
    .onAppear {
        setupComposerActions()
    }
    .edgesIgnoringSafeArea(.all)
    .onTapGesture {
        withAnimation(.bouncy) {
            switch state {
            case .initial:
                listScale = 1
                state = .expanded
            case .expanded:
                listScale = 0
                state = .initial
            }
        }
    }
}

}
`

Notice the onAppear modifier, we set up our composer actions when the view appears. There is some work involved with setting up the actions, so we factored it out in a separate function. Let’s add the implementation of the setupComposerActions next.

`swift
private func setupComposerActions() {
let imageAction: () -> Void = {
viewModel.pickerTypeState = .expanded(.media)
viewModel.pickerState = .photos
}
let commandsAction: () -> Void = {
viewModel.pickerTypeState = .expanded(.instantCommands)
}
let filesAction: () -> Void = {
viewModel.pickerTypeState = .expanded(.media)
viewModel.pickerState = .files
}
let cameraAction: () -> Void = {
viewModel.pickerTypeState = .expanded(.media)
viewModel.pickerState = .camera
}

composerActions = [
    ComposerAction(
        imageName: "photo.on.rectangle",
        text: "Photos",
        color: .purple,
        action: imageAction
    ),
    ComposerAction(
        imageName: "camera.circle.fill",
        text: "Camera",
        color: .gray,
        action: cameraAction
    ),
    ComposerAction(
        imageName: "folder.circle",
        text: "Files",
        color: .indigo,
        action: filesAction
    ),
    ComposerAction(
        imageName: "command.circle.fill",
        text: "Commands",
        color: .orange,
        action: commandsAction
    )
]

}
`

The actions we define influence the state of the picker and its type based on the user’s input.

We are not done yet. We have code to show a list of actions, but we have not yet defined how a single action should look. So our next task is to implement the ComposerActionView, which will describe how an action should look.

`swift
struct ComposerActionView: View {

private let imageSize: CGFloat = 34

var composerAction: ComposerAction

var body: some View {
    HStack(spacing: 20) {
        Image(systemName: composerAction.imageName)
            .resizable()
            .scaledToFit()
            .foregroundColor(composerAction.color)
            .frame(width: imageSize, height: imageSize)

        Text(composerAction.text)
            .foregroundColor(.primary)
            .font(.title2)
    }
}

}
`

We have now created all the custom UI we need. Along the way we called upon a few utility types that helped us define how the blurred background should look and a few other details. Let’s add these utility types and then move on to integrating everything into the rest of our codebase.

Add the following code to the bottom of the file we’ve been working on the entire tutorial.

`swift
struct BlurredBackground: View {
var body: some View {
Color.clear
.frame(
width: UIScreen.main.bounds.width,
height: UIScreen.main.bounds.height
)
.background(
.ultraThinMaterial,
in: RoundedRectangle(cornerRadius: 16.0)
)
}
}

struct HeightPreferenceKey: PreferenceKey {
static var defaultValue: CGFloat? = nil

static func reduce(value: inout CGFloat?, nextValue: () -> CGFloat?) {
    value = value ?? nextValue()
}

}

enum AnimationState {
case initial, expanded
}
`

Integrating the Composer

The last thing we need to take care of is making our new custom composer available to the Stream Chat SwiftUI SDK. To do this we will need a custom view factory. Create a new file called CustomViewFactory and add the makeMessageComposerViewType from the ViewFactory protocol.

`swift
import StreamChat
import StreamChatSwiftUI
import SwiftUI

class CustomViewFactory: ViewFactory {

@Injected(\.chatClient) public var chatClient

func makeMessageComposerViewType(
    with channelController: ChatChannelController,
    messageController: ChatMessageController?,
    quotedMessage: Binding<ChatMessage?>,
    editedMessage: Binding<ChatMessage?>,
    onMessageSent: @escaping () -> Void
) -> some View {
    AppleMessageComposerView(
        viewFactory: self,
        channelController: channelController,
        onMessageSent: onMessageSent
    )
}

}
`

Depending on which components you use, you should provide this view factory, replacing the default one. For example, if you are using a ChatChannelListView, you can pass it in the creation process.

swift var body: some Scene { WindowGroup { ChatChannelListView(viewFactory: CustomViewFactory()) } }

If you run your app now, you should see the updated composer, as shown on the screenshot.

Summary

This article aimed to show you how easy it is to add customized components to our SwiftUI Chat SDK in your application. We’ve looked at Apple’s composer view as an example of how we can customize any component to look like anything you can come up with.

Hopefully, you will take away from this article how flexible and powerful our SwiftUI Chat SDK is. Also, have a look at our cookbooks in our documentation for other inspiring examples of how to customize our SDKs.

Also note, that our Video SDK has similar capabilities as our Chat SDK in regards to flexibility and customization.

Build a Pixel Perfect Threads Clone in Swift UI—With a Twist!

Jeroen Leenarts — Fri, 18 Aug 2023 13:27:51 +0000

You've probably heard about the new Twitter competitor, Instagram Threads. It launched to great fanfare, but it's missing one crucial feature: DMs! Learn how to make a Threads clone—with a twist!

Whenever a new app arrives, it is a fun exercise to try and recreate its UI to learn exactly how it might be put together.

The Threads app UI is pretty straightforward with a few exceptions. The follower “bubble” and profile tab selection is the most interesting UI feature I’ve found in the Threads app.

In this blog post, we’ll create an Instagram Threads clone in Swift UI and to top it off use Stream’s chat API to add real-time user-to-user messaging. 😎

With the boring stuff out of the way, let’s jump into some code 🛠️

Getting Started

We are going to start by picking apart the Threads UI visually. Once we did that, we will create individual components and put everything together in a semi-working mockup implementation.

When looking at the Threads UI there are some immediately noticable things. The UI has a number of fun elements that both provide a strong Threads brand and look fun to recreate. I like to call those elements the “followers bubble” and the “profile detail tab selection”.

Everything else is a matter of stacking views together using HStacks and VStacks. It still baffles me how flexible these two layout elements are when using SwiftUI.

Threads introductory video

If you would like to follow along as we’re building or explore the project code, it is available on our Github here, don’t be shy, please leave us a 🌟.

The Follower Bubble

Right now we do not even have a project to work with, so let’s start there.

Open up Xcode and click “File” menu and then the entry “Create new Project”. Select “SwiftUI app” and give it any name you like.

We now have our empty project. Let’s rely on Xcode previews while we put together our project.

Create a new SwiftUI View (File -> New -> File -> SwiftUI View), name it “BubbleView”..

Before we can begin, we need some assets. The easiest way to resolve this is to delete the current “Assets” entry from the project and copy in the one from the completed repository. You can either download the project as a zip file or clone it to your machine: https://github.com/GetStream/threads-mock-chat/tree/main.

In this repository, you can find an Assets catalog in the directory “ThreadsChat” from the root of the repository. Drag and drop the Assets directory into your Xcode project.

Make sure the option “Copy items if needed” is checked. Now we have a set of assets available.

When looking at the BubbleView, you might have noticed it has 4 different display styles. Zero, one, two or more followers.

I skipped showing you the option with zero followers, because there is not much to see, just an empty black square.

Let’s define the basics of the BubbleView. Since we are dealing with a variable number of display styles based on follower count, adjust the auto-created BubbleView to look as follows:



struct BubbleView: View {
    var replyCount: Int

    var body: some View {
        Text("Hello, World!")
    }
}

struct BubbleView_Previews: PreviewProvider {
    static var previews: some View {
        BubbleView(replyCount: 0)
        BubbleView(replyCount: 1)
        BubbleView(replyCount: 2)
        BubbleView(replyCount: 3)
    }
}

In the preview area we can now select between 4 different previews of the same view. All looking the same.

Within the body of our new BubbleView, let’s add some code to change that.



        switch replyCount {
        case 0:
            Spacer()
        case 1:
            Image(systemName: "person")
                .resizable()
                .frame(width: 15, height: 15)
                .clipShape(Circle())
                .aspectRatio(contentMode: .fit)
        case 2:
            HStack {
                Image(systemName: "person")
                    .resizable()
                    .frame(width: 15, height: 15)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(systemName: "person")
                    .resizable()
                    .frame(width: 15, height: 15)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
            }
        default:
            HStack {
                Image(uiImage: UIImage(named: "jeroen")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(uiImage: UIImage(named: "amos")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                Image(uiImage: UIImage(named: "kimmy")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
            }
    }

We add a switch with 4 paths, zero, one, two and a default option. Each relates to one of the possible display styles of the bubble view. Note how we add an image, mark it resizable, choose a size, clip it to a circle.

It all looks great now, except for the default option. When you look at the fourth preview in Xcode, you notice that there are 3 images next to each other, while they should be grouped in a nice cluster.

We can fix that by switching the HStack of the default path to a ZStack and moving the images around a bit by using padding.



        default:
            ZStack {
                Image(uiImage: UIImage(named: "jeroen")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: -30, trailing: -5))
                Image(uiImage: UIImage(named: "amos")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 30))
                Image(uiImage: UIImage(named: "kimmy")!)
                    .resizable()
                    .frame(width: 20, height: 20)
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 30, trailing: -20))
            }

The BubbleView now looks exactly as we want it to look. So let’s move to the next component, the “profile detail tab selection”.

The Profile Detail Tab Selection

Since “profile detail tab selection” is quite a mouth full, let’s call this view SegmentedPickerView.

Again we create a new SwiftUI view called SegmentedPickerView.

There are a few tricks we put together for this challenging view, so let’s dive in. Let’s create a view to help with previewing the SegmentedPickerView we are going to create.



import SwiftUI

public struct SegmentedPickerView: View {
    public var body: some View {
        Text("Hello")
    }
}

struct SegmentedPickerViewPreviewHelperView: View {
    @State var selectedIndex: Int?

    var body: some View {
                SegmentedPickerView()
    }
}

struct SegmentedPickerView_Previews: PreviewProvider {
    @State var selectedIndex: Int = 0
    static var previews: some View {
        SegmentedPickerViewPreviewHelperView()
    }
}

This will just create an empty canvas with a single text.

Let’s start building things. Since it is a picker view, we need to be able to add subviews as content which we can select by tapping an area on screen.

After some trial and error, this is what I came up with.



import SwiftUI

public struct SegmentedPickerView<Element, Content, Selection>: View
    where
    Content: View,
    Selection: View {

    public typealias Data = [Element]

    @State private var frames: [CGRect]
    @Binding private var selectedIndex: Data.Index?

    private let data: Data
    private let selection: () -> Selection
    private let content: (Data.Element, Bool) -> Content

    public init(_ data: Data,
                selectedIndex: Binding<Data.Index?>,
                @ViewBuilder content: @escaping (Data.Element, Bool) -> Content,
                @ViewBuilder selection: @escaping () -> Selection) {

        self.data = data
        self.content = content
        self.selection = selection
        self._selectedIndex = selectedIndex
        self._frames = State(wrappedValue: Array(repeating: .zero,
                                                 count: data.count))
    }

    public var body: some View {
        ZStack(alignment: Alignment(horizontal: .horizontalCenterAlignment,
                                    vertical: .center)) {

            HStack(spacing: 0) {
                ForEach(data.indices, id: \.self) { index in
                    Button(action: { selectedIndex = index },
                           label: { content(data[index], selectedIndex == index) }
                    )
                    .buttonStyle(PlainButtonStyle())
                    .background(GeometryReader { proxy in
                        Color.clear.onAppear { frames[index] = proxy.frame(in: .global) }
                    })
                    .alignmentGuide(.horizontalCenterAlignment,
                                    isActive: selectedIndex == index) { dimensions in
                        dimensions[HorizontalAlignment.center]
                    }
                }
            }

            if let selectedIndex = selectedIndex {
                selection()
                    .frame(width: frames[selectedIndex].width,
                           height: frames[selectedIndex].height)
                    .alignmentGuide(.horizontalCenterAlignment) { dimensions in
                        dimensions[HorizontalAlignment.center]
                    }
            }
        }
    }
}

extension HorizontalAlignment {
    private enum CenterAlignmentID: AlignmentID {
        static func defaultValue(in dimension: ViewDimensions) -> CGFloat {
            return dimension[HorizontalAlignment.center]
        }
    }

    static var horizontalCenterAlignment: HorizontalAlignment {
        HorizontalAlignment(CenterAlignmentID.self)
    }
}

extension View {
    @ViewBuilder
    @inlinable func alignmentGuide(_ alignment: HorizontalAlignment,
                                   isActive: Bool,
                                   computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View {
        if isActive {
            alignmentGuide(alignment, computeValue: computeValue)
        } else {
            self
        }
    }

    @ViewBuilder
    @inlinable func alignmentGuide(_ alignment: VerticalAlignment,
                                   isActive: Bool,
                                   computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View {

        if isActive {
            alignmentGuide(alignment, computeValue: computeValue)
        } else {
            self
        }
    }
}

struct SegmentedPickerViewPreviewHelperView: View {

    @State private var selectedColorIndex = 0

    let titles = ["Threads", "Replies", "Reposts"]
    @State var selectedIndex: Int?

    var body: some View {
                SegmentedPickerView(
                            titles,
                            selectedIndex: Binding(
                                get: { selectedIndex },
                                set: { selectedIndex = $0 }),
                            content: { item, isSelected in
                                VStack {
                                    Text(item)
                                        .foregroundColor(isSelected ? Color("primaryThreads") : Color.gray )
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .frame(maxWidth: .infinity)
                                    Color.gray.frame(height: 1)
                                }
                            },
                            selection: {
                                VStack(spacing: 0) {
                                    Spacer()
                                    Color.primary.frame(height: 1)
                                }
                            })
                            .onAppear {
                                selectedIndex = 0
                            }
                            .frame(maxWidth: .infinity)
                            .animation(.easeInOut(duration: 0.3), value: selectedIndex)
    }
}

struct SegmentedPickerView_Previews: PreviewProvider {
    @State var selectedIndex: Int = 0
    static var previews: some View {
        SegmentedPickerViewPreviewHelperView()
    }
}

It works in preview and looks really good.

Now we have our BubbleView and SegmentedPickerView, we can start building some real UI.

The biggest base elements are the rows in each List.

Create the `ThreadActivityRowView`

We start by creating another SwiftUI file called ThreadActivityRowView. The contents of this file should look like this.



import SwiftUI

struct ThreadActivityRowView: View {
    @StateObject
    var model: ThreadActivityRowModel
    var body: some View {
        NavigationLink {
            Text("Replace with the ThreadView(model: model)")
        } label: {
            VStack {
                HStack {
                    VStack {
                        ZStack(alignment: .bottomTrailing) {
                            Image(uiImage: model.avatarImage)
                                .resizable()
                                .frame(width: 30, height: 30)
                                .aspectRatio(contentMode: .fit)
                                .clipShape(Circle())
                            ZStack {
                                Circle()
                                    .frame(width: 15, height: 15)
                                    .foregroundColor(.white)
                                Image(systemName: "heart.circle.fill")
                                    .resizable()
                                    .frame(width: 15, height: 15)
                                    .foregroundColor(.red)
                            }
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: -5, trailing: -5))
                        }
                        if model.isReply {
                            Spacer()
                        } else {
                            HStack {
                                Divider()
                            }
                        }
                    }

                    VStack {
                        HStack {
                            Text(model.username)
                                .foregroundColor(.primary)

                            Image(systemName: "checkmark.seal.fill")
                                .foregroundColor(.blue)
                            Spacer()
                            Text(model.postAge)
                                .foregroundColor(.secondary)
                            Text("···")

                        }
                        Text(model.message)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.primary)
                        if let image = model.image {
                            Image(uiImage: image)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .cornerRadius(15)
                        }
                        HStack {
                            Image(systemName: "heart")
                            Image(systemName: "bubble.right")
                            Image(systemName: "repeat")
                            Image(systemName: "paperplane")
                            Spacer()
                        }
                        .padding(.top, 10)
                    }
                }
                HStack {
                    if model.isReply {
                        Text(model.footer)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.secondary)
                            .padding(.leading, 40)
                    } else {
                        BubbleView(replyCount: model.replyCount)
                            .frame(width: 30, height: .infinity)

                        Text(model.footer)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .foregroundColor(.secondary)
                    }
                }
                Spacer()
            }
        }
    }
}

struct ThreadActivityRowView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadActivityRowView(model: ThreadActivityRowModel(id: "2", username: "amos", message: "Hello world too!", image: UIImage(named: "Hotel"), likeCount: 51, replyCount: 1, postAge: "1h", replies: []))
    }
}

You can see it is a reasonably straightforward usage of various vertical and horizontal stacks.

We will also need its related model: ThreadActivityRowModel, so let’s add that to the file too.



class ThreadActivityRowModel: ObservableObject, Identifiable {
    init(id: String,
         username: String,
         message: String,
         image: UIImage?,
         likeCount: Int,
         replyCount: Int,
         postAge: String) {
        self.id = id
        self.username = username
        self.message = message
        self.image = image
        self.likeCount = likeCount
        self.replyCount = replyCount
        self.postAge = postAge
        self.replies = []
        self.isReply = true
    }

    init(id: String,
         username: String,
         message: String,
         image: UIImage?,
         likeCount: Int,
         replyCount: Int,
         postAge: String,
         replies: [ThreadActivityRowModel]) {
        self.id = id
        self.username = username
        self.message = message
        self.image = image
        self.likeCount = likeCount
        self.replyCount = replyCount
        self.postAge = postAge
        self.replies = replies
        self.isReply = false
    }

    var id: String
    var username: String
    var message: String
    var image: UIImage?
    var likeCount: Int
    var replyCount: Int
    var postAge: String
    var isReply: Bool
    var replies: [ThreadActivityRowModel]

    private var likeString: String? {
        switch likeCount {
        case 0:
            return nil
        case 1:
            return "1 like"
        default:
            return "\(likeCount) likes"
        }
    }

    private var replyString: String? {
        switch replyCount {
        case 0:
            return nil
        case 1:
            return "1 reply"
        default:
            return "\(replyCount) replies"
        }
    }

    var footer: String {
        let footerStrings: [String] = [likeString, replyString].compactMap { $0 }
        return footerStrings.joined(separator: " • ")
    }

    var avatarImage: UIImage {
        return UIImage(named: username) ?? UIImage(systemName: "person")!
    }
}

The ThreadActivityRow is a view we will be using on almost all other screens.

This is how it looks in preview.

The layout looks a bit off in Preview, but when put in an actual view everything lines up as it should.

Now we can move on with building the underlying ThreadView.

Building the `ThreadView`

The ThreadView is a drill down from the main navigation in our app to a specific Thread. It reuses the ThreadActivityRowView. So is, again, pretty straightforward to build.



import SwiftUI

struct ThreadView: View {
    @StateObject
    var model: ThreadActivityRowModel

    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    NavigationLink {
                        Text("Replace me with ProfileView()")
                    } label: {
                        HStack {
                            ZStack(alignment: .bottomTrailing) {
                                Image(uiImage: model.avatarImage)
                                    .resizable()
                                    .frame(width: 30, height: 30)
                                    .aspectRatio(contentMode: .fit)
                                    .clipShape(Circle())
                                ZStack {
                                    Circle()
                                        .frame(width: 15, height: 15)
                                        .foregroundColor(.white)
                                    Image(systemName: "heart.circle.fill")
                                        .resizable()
                                        .frame(width: 15, height: 15)
                                        .foregroundColor(.red)
                                }
                                .padding(EdgeInsets(top: 0, leading: 0, bottom: -5, trailing: -5))
                            }
                            Text(model.username)
                            Image(systemName: "checkmark.seal.fill")
                                .foregroundColor(.blue)
                        }
                    }
                    Spacer()
                    Text(model.postAge)
                        .foregroundColor(.secondary)
                    Text("···")

                }
                Text(model.message)
                    .frame(maxWidth: .infinity, alignment: .leading)
                if let image = model.image {
                    Image(uiImage: image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(15)
                }
                HStack {
                    Image(systemName: "heart")
                    Image(systemName: "bubble.right")
                    Image(systemName: "repeat")
                    Image(systemName: "paperplane")
                    Spacer()
                }
                .padding(.top, 10)
                Text(model.footer)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .foregroundColor(.secondary)
                ForEach(model.replies) { reply in
                    Divider()
                        .padding(.horizontal, 0)
                    ThreadActivityRowView(model: reply)
                }
                .listStyle(PlainListStyle())
            }
            .padding()
        }
        .navigationTitle("Thread")
    }
}

struct ThreadView_Previews: PreviewProvider {
    static var previews: some View {
        let model = ThreadActivityRowModel(id: "1", username: "nash", message: "Hello world!", image: UIImage(named: "Swift"), likeCount: 8, replyCount: 23, postAge: "10m", replies: [
            ThreadActivityRowModel(id: "5", username: "kimmy", message: "This is awesome!", image: nil, likeCount: 51, replyCount: 1, postAge: "30mh"),
            ThreadActivityRowModel(id: "6", username: "jeroen", message: "Such a cool feature.", image: nil, likeCount: 51, replyCount: 1, postAge: "10m"),
            ThreadActivityRowModel(id: "7", username: "amos", message: "Let's go!", image: nil, likeCount: 51, replyCount: 1, postAge: "1m")])

        ThreadView(model: model)
    }
}

Go back to the ThreadActivityRowView and replace the line Text("Replace with the ThreadView(model: model)") with ThreadView(model: model)

Next, we need to move to the ProfileView. This is a view we can navigate to from the ThreadView. In the ThreadView we created you might have noticed a Text("Replace me with ProfileView()").

Creating the `ProfileView`

Create a SwiftUI file called ProfileView. In the ThreadView replace the occurrence of Text("Replace me with ProfileView()") with ProfileView(). Now go back to the ProfileView file.

Paste the following into the ProfileView file, replacing all code currently present in the file. Notice how we again reuse the row view,



import SwiftUI

struct ProfileView: View {

    @State private var selectedColorIndex = 0
    @StateObject private var viewModel = ThreadsViewModel()

    let titles = ["Threads", "Replies", "Reposts"]
    @State var selectedIndex: Int?

    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    VStack {
                        Text("Neevash Ramdial")
                            .frame(maxWidth: .infinity, alignment: .leading)
                        HStack {
                            Text("nash0x7e2")
                            Capsule()
                                .fill(.tertiary)
                                .frame(width: 80)
                                .overlay {
                                    Text("threads.net")
                                        .font(.footnote)
                                        .foregroundColor(.secondary)
                                }
                            Spacer()
                        }

                    }
                    Spacer()
                    Image(uiImage: UIImage(named: "nash")!)
                        .resizable()
                        .frame(width: 60, height: 60)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                }
                Text("Leading #DevRel/Dev Marketing at @getstream_io • @GoogleDevExpert Dart & Flutter • @FlutterComm • Formula 1 fanatic • Striving for excellence")
                HStack {
                    Image(uiImage: UIImage(named: "amos")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                    Image(uiImage: UIImage(named: "jeroen")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .padding(EdgeInsets(top: 0, leading: -15, bottom: 0, trailing: 0))
                    Image(uiImage: UIImage(named: "kimmy")!)
                        .resizable()
                        .frame(width: 20, height: 20)
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .padding(EdgeInsets(top: 0, leading: -15, bottom: 0, trailing: 0))
                    Text("52.321 followers • neevash.dev")
                    Spacer()
                }
                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }
                SegmentedPickerView(
                            titles,
                            selectedIndex: Binding(
                                get: { selectedIndex },
                                set: { selectedIndex = $0 }),
                            content: { item, isSelected in
                                VStack {
                                    Text(item)
                                        .foregroundColor(isSelected ? Color("primaryThreads") : Color.gray )
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .frame(maxWidth: .infinity)
                                    Color.gray.frame(height: 1)
                                }
                            },
                            selection: {
                                VStack(spacing: 0) {
                                    Spacer()
                                    Color.primary.frame(height: 1)
                                }
                            })
                            .onAppear {
                                selectedIndex = 0
                            }
                            .frame(maxWidth: .infinity)
                            .animation(.easeInOut(duration: 0.3), value: selectedIndex)

                ForEach(viewModel.activities) { item in
                        ThreadActivityRowView(model: item)
                    }
            }
        }
        .toolbar {
            Spacer()
            Image(uiImage: UIImage(named: "Instagram")!)
                .resizable()
                .frame(width: 20, height: 20)
            Image(systemName: "bell.fill")
            Image(systemName: "ellipsis.circle")
        }
        .padding()
    }
}

struct ProfileView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ProfileView()
        }
    }
}

class ThreadsViewModel: ObservableObject {
    @Published public var activities: [ThreadActivityRowModel] = [
        ThreadActivityRowModel(id: "1", username: "nash", message: "Hello world!", image: UIImage(named: "Swift"), likeCount: 8, replyCount: 23, postAge: "10m", replies: [
            ThreadActivityRowModel(id: "5", username: "kimmy", message: "This is awesome!", image: nil, likeCount: 51, replyCount: 1, postAge: "30mh"),
            ThreadActivityRowModel(id: "6", username: "jeroen", message: "Such a cool feature.", image: nil, likeCount: 51, replyCount: 1, postAge: "10m"),
            ThreadActivityRowModel(id: "7", username: "amos", message: "Let's go!", image: nil, likeCount: 51, replyCount: 1, postAge: "1m")
        ]),
        ThreadActivityRowModel(id: "2", username: "amos", message: "Hello world too!", image: UIImage(named: "Hotel"), likeCount: 51, replyCount: 1, postAge: "1h", replies: []),
        ThreadActivityRowModel(id: "3", username: "kimmy", message: "Hello world! This is going to be a really long message. I want to see what happens with a lond message. Does it work ok?", image: UIImage(named: "React"), likeCount: 5, replyCount: 2, postAge: "2h", replies: []),
        ThreadActivityRowModel(id: "4", username: "jeroen", message: "Hello world! This is going to be a really long message. I want to see what happens with a lond message. Does it work ok?", image: nil, likeCount: 5, replyCount: 0, postAge: "2h", replies: [])

    ]
}

We now have the ActivityRowView, ThreadView, and ProfileView. We only need to alter the entry point of the app and make sure we show a list of Threads.

Let’s create the list of Threads first.

Create the `ThreadsView`

Create a file called ThreadsView. Notice the plural Threads.

Make sure the content of this file looks as follows and notice how little code we need to write since we did all the work already in previous views.



import SwiftUI

struct ThreadsView: View {

    @StateObject private var viewModel = ThreadsViewModel()

    var body: some View {

        List(viewModel.activities) { item in
            ThreadActivityRowView(model: item)
        }
        .listStyle(PlainListStyle())
    }
}

struct ThreadsView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadsView()
    }
}

Since we would like to have a tab bar at the bottom, we also create a file called ThreadsTabView.

The contents of this file should look as follows.



import SwiftUI

struct ThreadsTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                ThreadsView()
            }
                .tabItem {
                    Image(systemName: "house")
                }

            Text("")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                }

            Text("")
                .tabItem {
                    Image(systemName: "square.and.pencil")
                }

            Text("")
                .tabItem {
                    Image(systemName: "heart")
                }

            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                }
        }
    }
}

struct ThreadsTabView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadsTabView()
    }
}

Again very little code, but the end result should look something like this.

Putting the `ThreadsTabView` in the App class

The final thing we need to do is add the ThreadsTabView to the app struct to show our UI when starting the app.

To do that, open up the project’s app file. If you named your project ThreadsChat, the file should be named ThreadsChatApp.

Make its contents look like:



import SwiftUI


@main
struct ThreadsChatApp: App {
    var body: some Scene {
        WindowGroup {
            ThreadsTabView()
        }
    }
}

Now run the project on a simulator.

Adding DMs

We’ve now completed the rebuild of a UI looking like Meta Threads. But we promised to add a DM feature to this project.

To do that we first need to add the Stream Chat SDK to the project.

Select "Add Packages…" in File menu
Paste the URL https://github.com/getstream/stream-chat-swiftui
In the option "Dependency Rule" choose "Branch", in the single text input next to it, enter "main"

Choose "Add Package" and wait for the dialog to complete
Only select "StreamChatSwiftUI" and select "Add Package" again

Now we need to do a few things to load and initialize the Stream Chat SDK.

Open up the App file and change its contents to look like this.



import SwiftUI
import StreamChat
import StreamChatSwiftUI

@main
struct ThreadsChatApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ThreadsTabView()
        }
    }
}


class AppDelegate: NSObject, UIApplicationDelegate {

    var streamChat: StreamChat?

    var chatClient: ChatClient = {
        var config = ChatClientConfig(apiKey: .init("8br4watad788"))

        let client = ChatClient(config: config)
        return client
    }()

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions:
                        [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
        // The `StreamChat` instance we need to assign
        streamChat = StreamChat(chatClient: chatClient)

        // Calling the `connectUser` functions
        connectUser()

        return true
    }

    // The `connectUser` function we need to add.
    private func connectUser() {
        // This is a hardcoded token valid on Stream's tutorial environment.
        let token = try! Token(rawValue: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoibHVrZV9za3l3YWxrZXIifQ.kFSLHRB5X62t0Zlc7nwczWUfsQMwfkpylC6jCUZ6Mc0")

        // Call `connectUser` on our SDK to get started.
        chatClient.connectUser(
                userInfo: .init(id: "luke_skywalker",
                                name: "Luke Skywalker",
                                imageURL: URL(string: "https://vignette.wikia.nocookie.net/starwars/images/2/20/LukeTLJ.jpg")!),
                token: token
        ) { error in
            if let error = error {
                // Some very basic error handling only logging the error.
                log.error("connecting the user failed \(error)")
                return
            }
        }
    }
}

Next, we need a view to show a chat interface.

Create a SwiftUI file called ThreadChatView with the following contents.



import SwiftUI

import StreamChat
import StreamChatSwiftUI

struct ThreadChatView: View {

    @Injected(\.chatClient) var chatClient
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some View {
        ChatChannelView(
            viewFactory: DefaultViewFactory.shared,
            channelController: chatClient.channelController(
                           for: try! ChannelId(cid: "messaging:my-channel-id"),
                            messageOrdering: .topToBottom
                        )
                        )

    }
}

struct ThreadChatView_Previews: PreviewProvider {
    static var previews: some View {
        ThreadChatView()
    }
}

Next, we need to make sure we can get to this new view. To do that we open up the ProfileView and look for the HStack with the empty buttons.



                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }

As the final item in this HStack add a NavigationLink sending the user to the ThreadChatView.



                HStack {
                    Button {
                        // TODO
                    } label: {
                        Text("Follow")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(Color.primary)
                            .foregroundStyle(.background)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    Button {
                        // TODO
                    } label: {
                        Text("Mention")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background)
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }

                    NavigationLink {
                        ThreadChatView()
                            .toolbar(.hidden, for: .tabBar)

                    } label: {
                        Text("Chat")
                            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 40)
                            .background(.background )
                            .foregroundStyle(Color.primary)
                            .cornerRadius(10)
                            .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray, lineWidth: 2))
                    }
                }

This will result in a new button on the ProfileView.

Tapping that button brings us to the view ThreadChatView.

Notice how the ChatChannelView is created and added to the view hierarchy with minimal effort and the end user can just start chatting when they land on this view.

We have integrated Stream Chat into our Threads-inspired user interface mockup. This not only highlights the seamless integration available by using our Chat SDKs but also offers visually stunning screenshots that showcase the potential look of Meta's Threads, but with an in-app chat feature.

Conclusion

By now you will have noticed how easy it can be to add chat to anything. If you have a suggestion of a mash-up we can add chat to, please reach out through Twitter. We love to hear from you to learn what you feel might be interesting to explore.

This article barely scratches the surface of what our Chat SDK can do. You will probably want to make our chat screens look just like the rest of your app. And that’s where theming and styling come in. Fortunately, we have an excellent quick-start guide about theming available.

DEV Community: Jeroen Leenarts

How To Set Up Your Coding Environment

What Is An Environment?

Why Setting Up An Environment Is Important

Availability

Stability

Flexibility

Get Availability, Stability, and Flexibility with A Project-Specific Language Runtime

Setting Up a Node Environment

Setting Up a Python Environment

Ruby

Conclusion

Build an iOS 17-Style Action Composer in SwiftUI

Implement the Custom Composer

Creating the Composer Actions View

Integrating the Composer

Summary

Build a Pixel Perfect Threads Clone in Swift UI—With a Twist!

Getting Started

The Follower Bubble

The Profile Detail Tab Selection

Create the ThreadActivityRowView

Building the ThreadView

Creating the ProfileView

Create the ThreadsView

Putting the ThreadsTabView in the App class

Adding DMs

Conclusion

Create the `ThreadActivityRowView`

Building the `ThreadView`

Creating the `ProfileView`

Create the `ThreadsView`

Putting the `ThreadsTabView` in the App class