Chat App using SwiftUI - [Speed Code]

Wondering How To develop a Chat App using SwiftUI? In this Speed Code Tutorial you will learn how to create a messages app using the Whatsapp UI design.

I will also show you how to create a chat bubbles view most known from popular apps like Whatsapp or Apples Messaging app. Furthermore we are using SwiftUI 3.0 features like the Searchbar or custom Swipe Actions provided with SwiftUI Lists.

You will also learn how to implement an auto scroll animation to newly sent messages. This is a more advanced feature in SwiftUI, but it is very simple to implement in our chat app.

Last but not least I show you how to group messages so that we can display SwiftUI section headers with the current date. This is a very important feature in a messages app, because it improves the User Experience a lot.

In this SwiftUI Tutorial we will be working with XCode 13 beta and SwiftUI 3.0

🔴 SUPPORT ME ON PATREON:

► WATCH NEXT:

► SOCIAL MEDIA

TIMESTAMPS:
00:00 Intro
00:26 Setting Up
01:04 Adding Chat Row View
03:28 Adding Data Model
06:04 Transforming Static Chat Rows to Dynamic Ones
07:31 Adding Descriptive Date Strings
10:34 Adding SwiftUI Searchbar
11:16 Adding ViewModel
14:24 Adding Chat View
16:03 Adding SwiftUI Swipe Action
18:36 Adding Messages View - Chat Bubble
21:34 Adding SwiftUI Toolbar View
26:08 Adding Auto Scroll to Message
28:49 Adding SwiftUI Navigationbar Buttons
31:15 Adding SwiftUI Section Headers

🟣 Join the Discord Community Server:

🔵 Music:

[juliapp]

never seen message design done like this before🔥! like how u used the grid and morphed the grid with everything in it to create a nice UI. good job

[eric]

Great tutorial. Instead of multiple inits in the message, on the first one you could have just done "date: Date = Date()" that way if you didn't add a date, it would just default to the date, eliminating the need for the second initializer.

[codingwithmike]

I enjoy this tutorial a lot, and it’s a fresh one, not too long ago, hope more contents will be coming soon. Can’t wait 😜

[puzzleinart]

Are you planing to create a video for load more data in the when scroll down ?
I try few thing but Not worked for me.
In your tutorial for chatting app everything is very clear and step by step, so that's why I was looking for this load more data in list tutorial specially from you

[SurajBhatt-hgyz]

Good video . Can you please add up a small part(on click of keyboard message view should also lift-up like whatsapp and other chat apps)

[xiangliao]

thanks a lot for this video! I searched many videos and this one is really impressive and helpful!

[brudamonas]

thank you bro, these are really good!

[aleynaarslankaya]

It was the best chat project I've ever watched.😍 How do we select a user from the user list and switch to the messaging screen. I would be very happy if you add this part to the video.🙏

[duncanwallace]

Would love to see a schema design and full implementaiton in iClould database. I will tryi to do it but I know it wont be as smooth as your implementation.

[nat.serrano]

GREAT VIDEO. do you recommend firestore or real time database to save the data?

[commentator-life]

Cool example, but I would also like to include a inputAccessoryView with a keyboard and correct content movement on ScrollView (new messages, scrollview under keyboard, and another moments), After that, immediately + 500 K views on youtube;). But thank’s for that too!) 👍🏼👍🏼👍🏼

[shywoody-bo]

HI Haipp，I notice that Textfiled and keyboard was moved with animation at same time, becuse keyboard avoiding in iOS 14 it helps us to do this. If i wanna the same effect in iOS 13 do you have any suggestions in SwiftUI . As we all know it was easy in swift & Objective-C

[sergiovigano]

Where did you get the "sampleChat" from? Thank you!

[cedricbregnard]

My xcode somehow can not find ".searchable" for the Searchbar. Do you know how to fix this problem? Nice video btw :)

[davidagyakwa]

where did you get your profile pictures from

[MozartMargarethe]

Hey Haipp, do you have any idea if it's possible to scroll the ScrollView up to the last message when the keyboard appears? Before entering a new message the last message is visible but gets covered by the keyboard. In my opinion the last message should stay above the input field.

[XBROX_Official]

Chats Text and Text and Pencil icon are not shown at mine

[tikka]

How you learned Swiftui first, and which year?

[greenman]

there is no time stamp in the messages.

[thanishreddym.]

Give sample Chat
Text Without Patreon