Build a WhatsApp Clone with React Native (Expo Router, Reanimated, Clerk, Gestures, Gifted Chat)

what's up Galactic friends and welcome to another massive tutorial on this channel today we are replicating the WhatsApp UI with react native and we're going to use a bunch of Epic packages like Expo router reanimated we will use clerk for authentication we're going to use JJ CH Handler gifted chat and so many more great packages from the community to build a really really epic clone speaking of Clark there also the sponsor of this video so go check it out at clerk.com you can get started completely for free by now up until 10K active monthly user so in the previous video which you should definitely check out that was the Airbnb clone which is already beyond my wildest dreams of numbers but by now it's not 5K monthly active users it's actually 10K active users and I really enjoy working with clerk in the past we've used email authentication uh Apple o and Google off and today we're using OTP so we will actually get passwords to our device and a verification code and we're going to replicate exactly the flow you're going to see in the WhatsApp application there's so much going on in this tutorial so the whole code is linked below this video you can grab the assets and everything that we've done and I will also provide all the links to the packages that we use as we will rely on the community of the react native Community which has great great packages as you will see so let's start with a quick walkr of what you will learn in this WhatsApp clone tutorial in the first part we will set up our application which means a new Expo application using Expo router and we will immediately go for Expo pre-built so in the past we usually used Expo go but we will make sure that we have our own application so we can use our own native modules continuous native generation from Expo and enjoy pretty much all the bennets that are available in the second part we will create the actual UI of this First Landing part we're going to have uh this clone page then we can go to another page where we can answer our phone number and once we click next we will get a password OTP from clerk this will actually be handled then in the third part of this video where we built the input the verification input for that OTP and the security mechanisms to protect our Pages within the Expo application using the clerk SDK once we've done that we arrive in part four where we'll set up the T Bar of our application using the Expo router and the underlying react navigation package to achieve the same UI as you can see in the WhatsApp application Pi five is then about the settings page and how we can create something that looks like this and works great on iOS with big titles up here with search bars and also how we can create a really cool looking view just like this in part six we will move over to the calls page and implement this based on some dummy data we're going to load this data and we will in part seven also Implement a segmented control that looks like this so we can switch between all and and the missed calls in part eight we will continue with that page and we're going to implement a swipeable row so we can swipe these rows delete rows and additionally use reanimated to create something like this which shifts out everything and also allows us to smoothly transition between these elements using layout transitions in part nine we will finally move into the chats page creating this great looking overview again using everything that we learned before and creating our own little flat list and once again use the apple style swipeable to create something that looks like this part n is then about building a little model that pops up once we click here where we have sort of a section list but it's actually another component which gives us this cool little alphabet scroll on the side to quickly move between those sections in part 11 we will finally move into the details page and build this out using gifted ched we will customize the hell out of gifted ched and we're going to see how we can override a bunch of components while still getting all the benefits of gifted chat including this bottom input area and how we can customize it to exactly our needs and finally in part 12 we're going to add on top of this a custom swipe to reply gesture which allows us to reply and render a little message down here once again using packages from the community but on top also using reanimated our knowledge about entering and exiting animations and how we can spice up our views all right if you're now ready for the WhatsApp clone roll up your sleeves and let's dive straight into the code all right so let's begin our journey by creating a new Expo application using npx Create Expo app followed by the name of your project and then we're going to use the template tabs this template will give us file based routing with Expo router version 3 this is currently using uh Expo SDK 50 and we should have a nice solid base for our project we can also do this manually there are a few steps just to get file based routing but I rather not do this while this is installing let's talk about a few packages that will instantly add to this once it's done so here is the GitHub repository again where you can find the Assets in case we need them what we're going to definitely install right here is react native reanimated which will be used for some animations and because we're going to do a pre-build with Expo more on that in a second we should do this right here in the beginning because it's just easier otherwise we would have to do all the things again um then we're going to also right now install two packages um I just want to mention them up front so the first one will be react native mask input and the second one will be react native confirmation code field so you see we're diving straight into building our OTP verification screens which are the very first screens of this application actually I think I have the old application up and running so what we want to get is something like this so on what's you will be greeted usually by this screen once you press agree you get to this screen you can add your phone number here um and then we want to press next we would get our onetime password so this is the first step uh so let's see how far is this okay it's great uh what happens if I just go like code WhatsApp now I just want to open it in there was a command to open it like in this editor I forgot about it it's such a I think I saw it in a video from uh James qqu I think he had a shortcut or like there was something to immediately open it I just forgot it anyway here is our application now open we could now uh run npx Expo which would bring up the Expo go Application in our simulator uh I could now press I to open it up here in iOS which would give us a quick preview of the application but this is not exactly what I want to do I want to show you something else so very cool we got we got a tab bar we got two tabs we got a model uh everything can be found here in that folder but we're going to anyway remove most of that in a second as we are going for a different way of building and debugging our application so this here is the Expo go application which allows us to very quickly run our code in this container however there just a limited uh set of sdks bundle with this for example if I now want to use is um a package that is not bundled and that is using native modules meaning native IOS and Android code it won't work in Expo go and we will certainly come to a point where we have packages that won't work with Expo go so therefore I just want to show you right here in the beginning how we can get into pre-build okay so to configure pre-built uh I will kill this now again and actually before we configure pre-build I will run my installation command for uh the react native mask input for the react native confirmation code field and also for reanimated okay for reanimated we actually have to configure something and that's uh good point to do this right now so heat over to your beel config and you're going to find right in here Babel preset Expo and we need an additional line with plugins react native reanimated plugin good um there's one more package that I want to install so um checking out the previous application I can show you what I want to can we yes go here so if I press on the mech command control Z it would open up this view this is a special debugging view that we get because this is the Expo go Application if we do a regular pre-build now it means me we're basically creating an iOS and an Android folder of our project and we can serve that directly on the simulator again however we wouldn't have this view we would have like the default react native debugging experience which is just this little action sheet at the bottom in order to get this cool view we can now also install one more package which is the Expo def client so the Expo def client basically helps you to build your own Expo go Application you can I think even customize it to some degree um and with that in place I think there's like one more thing we could probably set this up for clerk already um do we need this right now I don't know are we're going to do it like this okay so let's see let's talk about pre-built npx Expo pre-built all right this asks us what would you like to uh name your Android package so Comm whatever let's call this com from Galaxy's WhatsApp uh iOS bundle identifier should be the same and I will press enter this will generate an Android folder with an Android project and an iOS folder with an iOS project it will also at the same time I think update our app Json so if you check this out there should be the bundle identifier for iOS and the package name here for go away overlay go away oh go away here's the Android block and this is the iOS block okay so we got the bundle identifiers automatically added in here which means whenever we regenerate our project uh a term called continuous native Generation all these settings here will be used uh on top of that um we should also there was another entry here after type routes uh which is TS config path I don't know why this is not said why are we on Expo SDK 50 yes we are certainly we're on Expo SDK 50 um I don't know exactly why TS config pass is now disabled again because I think it was actually enabled uh nonetheless it is set up here so this just helps us to import files more easily uh from different levels of our application um the pre-build should be finished so after that first pre-build we can now start our application and we can use npx Expo run basically like before but we can say npx Expo run iOS now so this is the cool thing you can actually also say Dash D device uh where is my I had like code completion here in my IDE that is completely gone uh something must have messed that up this tool I installed today I don't know okay we're going to use a different port here no problem because I had my application running on that other Port that I previously prepared so what is happening now we're now trying to deploy this to a simulator and we are not using Expo go anymore this should in theory deploy my application uh we're using probably no we're using a different bundle I think we're safe we should be fine uh this should deploy it right here and then we can continue using the application as if we were using the Expo go client however we have the full flexibility and freedom of um a standard react native project we can install native modules we just have to uh redo the pre-build if we add some kind of native modules to our application but overall this is in the future the usually recommended and preferred way to create Expo applications the Expo go application was always meant as sort of a testing application to quickly spin up something to preview it and I think people still assign Expo with this experience of Expo go that you can just like have these dummy projects and spin up something but I want to right here show you that this is not the case we're going pre-build we're having all the native stuff running through as you can see it we're going to have our own native application but we still have the benefit of using Expo with the def Cline with continuous native generation in our application so hopefully this is done pretty soon um meanwhile we can prob already get into a bit of the code here um as we will yeah I'm I'm I'm sad to say this but we're going to remove most of this it is cool to have this basic template and everything laid out but it will mostly confuse us and I I would just like to start from a blank slate instead so we're going to get rid of most of the stuff in here um I can already start by removing the theme provider we won't really use that yes we will actually use um some of the other stuff in here uh we can probably keep this we don't need the unstable settings uh that's not really something for us but see here this is our application that just came up I don't know which it is it's probably this one right and let's see I'm I'm changing stuff in here and it's refreshing and this is a good point to now get rid of the stuff so I will add a new file in here which is the index TSX this is going to be the first page uh that's on the screen because the index page is always load first we can then safely remove tabs HTML not found and model so we just end up with this one page okay this is the index page this is the layout uh it currently defines the tabs we we don't have tabs so this is actually incorrect I will just just call this index and header shown fult which even removes the header so you just see like the small text up there and with that we are ready to tackle basically everything that react native throws in our way uh I will also remove the components folder um and under constants we can define a few colors so I brought in some colors from the uh I think from the yeah it's from the official WhatsApp application I try to screenshot and get most of the colors you can find again all of this as well on uh GitHub and I also have a little styles that we can reuse for a block item and separate actually don't know how much of this we will reuse but I thought it might be a good idea and maybe we can extract some more and even improve the code uh as we move along so my layout only renders the first screen in the stck we have a pre-built bu up and running which we can confirm by changing something and then we're going to see it reloads and we got this up here and also I can press command contrl Z which brings up this nice preview I can even go home here um oh I want to select this one again and got the benefits of this custom Expo go def client build okay so this is the first step for you make sure you have your pre-built up and running uh install the packages we had before all of them are also listed on the GitHub page and once you're ready we can tackle the next step which is the OTP all right so at this point have your application up and running and we can create the first screen which is the welcome screen this is not a super special screen I'd say um but it's a nice exercise to warm up um to create some yeah some actually helpful UI because I think most applications have this sort of like getting started screen uh so let's begin by repping everything everything in a container and adding stylesheet up here so we're not breaking everything um okay we're going to also use um some pading in here so let's add a pading of 20 we should already see our text coming up and of course we're going to use an image here on this screen so import the image from react native and we can set the source so we can set it to something like this uh where it requires our image however I would prepare to use an import uh statement that looks more up to date so we're going to use import welcome image from and I think I've placed my image under uh assets slash images SL welcome PNG let's see uh assets images welcome PNG yeah there it is again you can find the assets on GitHub as well and once you got that line we still need to transform this so we can now say const welcome image equals image so we're using the image component from react native. resolve asset source. Yuri so this will give us the actual Yuri and we can now use this here as the source for our image uh let's see voila it comes up it looks horrible of course so we going to put in some uh styling for that as well let's say for welcome we're going to use the full width here here um and we're going to use a he of 300 and then we're going to of course attach these in here styles. welcome okay that makes it a bit bigger um I will also justify the content here Center and also align items in the center um and set the background color to white because we had a little issue here okay yeah that's better that's better uh and for the welcome we probably also want to set well we actually don't really need a border radius but I would like to set a margin bottom so let's set a margin bottom of I don't know something like 80 okay that puts it up here that should be fine now let's add a bit more uh we're going to use some styling we have a headline coming up we have a description coming up um and then we're going to have links in them as as well so links will actually use the color first of all from our constants uh so they should have like uh gray color uh not colors but color okay so after the initial image we have our headline okay so headline welcome to Whatsapp clone for the headline we should probably have a font size of um 24 and a font weight of Bolt so can I have like a font weight bolt okay yep getting better and probably some do we need some margin yeah let's add some margin vertical uh as well of 20 okay that separates this a bit all right below that we're going to have our description and Link so let's put in some text here so I want to use uh another function and Define this up here open link I'm going to do this in a second for now this is all we need you see if we do it I hope my head is not covering this we get gray privacy poly in terms of servers so this is how we can make certain elements in our text clickable okay so we can really have this onpress attached to the text element and just give it a bit different styling um for the description we're going to also use bit smaller text uh and align everything in the center uh I think for the the link let's use primary yeah then we got a nice contrast here that looks better that looks better uh and finally we have a button on this page okay so we have a button coming up uh that button should take the full width and for the background color actually don't really need that uh we just need to align the items in the center that's all we need uh but we also will have a button text so you usually have a button with a text uh let's say this one has no this is completely wrong let's say 22 and color well we're going to set the color in a second so as we want to route to the next page we should of course add a next page that makes sense right so let's call this one ot. TSX this will be the page uh on which we're going to add our phone number uh and then we will be able to go to another page on which we verify the phone number okay uh we can add them in here should we add them in here I feel like we should probably do so let's add another entry for my OTP screen so on that OTP screen I actually want to have the header so I want to probably set the header title to something in a second so I'm including this page here now and because of file based routing we can now easily use the link component to navigate to that next page so add the link from Expo router the atra is and we should get code completion here nice to OTP um and what we're going to do as well is we're going to rep no let's let's do the basic let's do the basic first so this will be a touchable opacity uh which looks mostly like a button we'll use our Styles button and then agree and continue you don't have to make this uppercase that's not really necessary uh touchable opacity what's the what's the issue oh no closing element right okay so we got that agree and continue button now here um we should give the button text or make this different so we're going to use colors. primary again and we're going to make the font weight a bit bigger um oh sorry forget the Comm font weight bolt all right that looks good so if I click on this nothing happens so far uh why is that the case that's a good question actually uh we do have the layout we have the ODP screen we have this one why am I not going to the next page let's see I will just do a little reload here sometimes it gets messed up when you add files um and what I forgot of course is here to add as child so if you've wrapped the link component around something you're going to have to add as child if you're not using it as the bare link component this gives us the next screen the OTP screen but there's a problem so what we see up here is we can go back which is the default behavior of a stack since we pushed a new page on that stack however in the official ENT uh application of WhatsApp you actually press this once and you're on the screen you can't go back so in those cases you can add replace in here which would replace place the page so let's do another reload agree and continue and you see I can't even use Swipe to go back and also uh that button up here is gone additionally we can now give the header something more meaningful like enter um your phone number and we can also make sure that even if for some reason we still get the back button we can say header back visible false okay so that would certainly disable the header back so now we're on that OTP screen and I think we finished our first screen so this screen is done um this is a types screw issue we don't really have to fix it because actually everything is correct I don't know why it's complaining in the first place so now the OTP screen is going to be a bit more challenging do I still have the other application to show you as a reference uh uh it's probably this one or is it the other one I don't know let's see okay it's probably not this one is it an expo go I don't think so right uh we don't really have that in Expo go uh this is the one I'm currently oh this is probably I could probably serve the other one in here as well right yeah all right so this is what we want to create next so we got a bit of text up here and down here again with those little link text elements then we have basically a group here and above we could have a selection in the official app you're going to see you click on this it opens a modal it's not too exciting I don't want to drag this whole OTP verification to like two hours we want to get to the inside area at some point so we're going to just keep it like this on the UI but what I wanted to show you is still how we can get a cool input field like this here all right so this is a number input which is currently geared towards a German uh number so we have plus 49 uh which could also be automatically set by selecting Germany uh I don't know what the United States actually but anyway uh and then you going to have more numbers and we can do this with a specific mask for that input so let's get to our very own screen and of course we're going to have this like little next button here at the bottom I'm actually in the same I'm in the same boat here right I can just switch between these apps that pretty cool I I didn't expect to be that smart uh let's get started um since we have an text input on this page I want to wrap my whole page with a keyboard avoiding view um yeah there are different packages it's probably not the best but in this case it actually serves the purpose and should work just fine uh can we import the text keyboard avoiding view okay uh we need some state so we definitely need some sort of uh loading loading set loading and use state fults in the beginning exactly uh we want access to the phone number so let's call this phone number set phone number we're going to start with an empty string I also need access to the Expo router if we want to use navigation from code and not just the link components so I will use the use router hook to access it um and once we got this uh there's one more thing I wanted to add uh which we later need for the correct keyboard offset so you can use something like keyboard vertical offset and check the current platform so if the platform is IOS uh I will use something like 90 on Android I will use zero oh I completely forgot on the login screen uh we had this uh open link function here uh I'm sorry but you can just use the linking package and call open URL and use whatever URL you prefer So htps galaxies. Def should Now give me that page so if I reload the application ah I pressed on the wrong key of course uh if I click here it should open galaxies. Dev automatically nice all right here we go and continue back to that page because we're going to actually need that on the OTP page again so we can just copy paste it and put it in this place and import linking from react native again we can Define the functions that we need so we're going to need send OTP uh which will probably be an OTP um uh it will probably be an ASN function uh but we're going to also have another one which is called con try sign in because if the user is already authenticated before and used OTP before that's actually going to be an error in that flow so we're going to manage it like this let's also add some styling down here react native stylesheet and I will start with a little container and adding my colors again and whenever I use the snippet for the stylesheet is not adding uh the stylesheet up here which is mildly annoying uh but anyway we going to get around that so inside the keyboard avoiding view I will put another view which will have my container styling and within that container we can start with a description first of all so let's add the description down here which is I think the same as we had before and then we can have our little description element here text uh style equals styles. description close it and our text okay uh where is my text on the screen uh I don't see oh yeah we need to give that one up here a flex of one otherwise we won't see anything good here we go so now we can do the list um I think we have to create our own little list styling in that case um I think I prepared something up front do we want to use that or do we want to do it manually uh it's Such a Pity that you can't answer right now I love to hear your opinion um so the list is this block uh which will have a white background color and a bit of Border radius and padding so this is like this white block up here and within that list we're going to of course have some list items so the first one was um style let's call this list item so we have to Define that in a second and that will be this oh no don't do it like this always put in text or react native screams in your face don't put text in here without a text element it's like always the same so the list item uh will look like this okay we got our box which is white uh and then we have the elements which is the list item I think for the list item text we should also use a bit bigger font size and a different color uh so once we got this let's heat over back here and let's give this one the style styles. list item um and next to it I also want to place ionicon which is at the end so that indicates that something um is that correct uh I would actually use Chevron forward instead and just a size of 20 and colors gray okay so not too bad as I said I don't really want to use this at all um this is just meant as some sort of dummy list item and top of that I will put a little separator in here uh how can we get my separator I think I had like a uh didn't have like a separator styling in our Styles here uh um yeah probably going to use a bit different separator anyway uh so let's make this one down here styles. separator and let's add a separator styling so this one will use the full width um heit of either one or um let's use the opacity one so we actually see the uh separator oh yeah this is how you spell it okay yeah that is too much of course so let's go back to the aity of 0.2 I wonder if I want to use hate one or if I want to use a very thin line so you can also use stylesheet do hairline width so that gives it a really really thin in that case I probably up the opacity a tiny bit but anyway we're not here to play with those things um let's add the text below so we have a legal and a link text as well uh which go right below uh our field here and then we're going to focus on the actual input so these fields are like I just want to make the colog look as close as possible but at the same time I don't want to do too much and bore you with um like these boring things okay so this should go beyond or behind that view okay so we got the same stuff like before uh which opens up a list and then I want to place a touchable opacity at the bottom of this view which then triggers this function we seen with next um so I will keep this in here and use a touchable opacity from rect native um this should have some styling on press I definitely want to call send OTP that's correct and then we have a text element which says next uh and a closing element as well okay so this would place the button up here this is of course very wrong uh and we also don't have the styling yet so button um needs some styling and button text as well button will get the full width and we'll get a light gray background color um I think this is actually oh yeah we're not yet attaching this yet that makes sense um we're going to change this also with we're going to add an enabled background color and a button text because the button can either be like very grayish or enabled and then we're going to switch the color so let's dynamically change them um first we're going to go back to our touchable opacity and if we want to use uh Dynamic Styles we can wrap them in an array now so first of all I want to say Styles button will be attached all the time um oh that is smart if loading I want to use sty sty enabled that's kind of smart nah it's not smart it's actually wrong so what I want to do is I want to check if the phone number is unequal to an empty string if that is the case I want to use styles. enabled otherwise I will use null all right um okay yeah I messed that up okay so here we go if the phone number is now something let's change this manually it will look like this uh but we not yet using the right styling for our text element so we're going to do the same in Here style open up that block by default it will have styles. button text okay which makes it look grayish um but then once we got a phone number here if phone number is not null anymore we're going to use Styles enabled uh or otherwise null okay so now it will look like this and if I switch this to an empty string we have this disabled button uh at the same time you probably also yeah the problem is if we disable it um it will also look a bit different I think no it's actually good yeah that's a good good point valid point I completely agree we should also use this abled okay cool we got it it's only in the wrong place I wanted to have it completely at the bottom and if you want to do this an easy heck is to place something in between here uh which takes up the full he and with available so you can just do this by adding another view in here with a flex of one as everything is using a flex uh column layout right now this would just span over the entire space and move the element to the bottom as you can see however now it's a bit too much at the bottom so uh let's change it back uh let's probably use uh something like oops uh margin bottom we could actually use uh we could also use the safe area um do we want to use the save area I'm just thinking we probably could use that uh Let's do let's try um use sa what is it use Save area inser from react native save area context right and I want to extract the bottom value so here we go and then I can use can I use the bottom value cannot find name bottom um now this is certainly not true uh what what am I getting back here I'm getting back Edge insets top right bottom so bottom is a number yeah I would have to use this in my my code here right um oh my so I would have to use margin bottom bottom like this and then remove whatever entry I had here would this work yes it would respect now the safe area down here because we're using use safe area insets and getting the bottom value so on Android that might be null and we're also Now using this here on our touchable aity so it makes it look a bit different a bit more complicated but I hope it's still clear on how we got to that point of having the dynamic layout now the mask input f um so let's place this beyond the separator and we're going to start with actually let's try and look at what the default looks like re native mask input is there an example yes we can import The Mask input which is always a good idea to import the package and then we can place it like this on my page cool I love it all right property phone doesn't exist yeah it's called phone number in my case is um set phone number okay and voila we have this small tiny input here which is a bit H it's really very small so let's see and give this a bit bigger size um I do it like this uh it should be bigger let's see uh where is the phone phone phone phone here we go um I can attach some styling here styles. input okay that makes it a bit bigger and now I can put in something how does the mask input work well the mask input has a specific mask as you can see and by the way I tried different packages this was the it was good it was okay okay I don't want to say anything bad about this package but is also not updated last 3 years I think a few parts at least um oh it's actually updated last year okay that's okay um but all the other packages I tried were really really outdated and didn't work some people said just do it yourself yes but I really don't want to manually Implement these basic things so this is going to be a theme across this video we're going to use stuff that other people from the react and react native Community have created and use that and change it to the way that we need it because this is an essential skill you don't need to reinvent the wheel all the time okay so in this case I want to use a different mask so I came up with this mask which matches a German phone number we have plus two digits an empty space three digits empty and then more digits okay so instead of the Mask here I just want to use now the German phone and you can have different mask setup and then based on the selection in the above field you would then use it um okay let's see I also think that why is this so like um um I feel like something is wrong my my upper thing here this Germany thing is doesn't look right yeah this is list item text ah a lot better A lot better now we got it okay uh on top of that oh no on top of that uh we see that if I press something we get a lock statement here we get the uh masked and the unmasked value I actually want to get the mask value so this is fine up here we can remove the rest here uh we have my mask the value is phone number uh a few more changes I would set the keyboard type to um because if I now open the keyboard you're going to see I actually have this one I don't want that I want to have a numeric keyboard right here so here we go that's a lot better uh I also want to automatically Focus this field when I enter that page because there's pretty much no other oh well we could have the other thing but I think in the actual application this is also an autofocus and then we can also have a placeholder which says like plus 49 your phone number okay let's see that looks pretty good okay so I can do something and then I can do 49 so this is of course not my number but the phone input seems to work really really well then and once we got to that point we should also have a loading view um I used some packages in the past but we don't really need that so let's do if okay let's do not loading because then we can see it in action during testing uh because that is true right now uh I will add a new view style let's do this in here uh so we can do stylesheet do absolute fill and then um yeah let's also do some some loading okay let's close this the loading should just be at a specific okay we can probably put everything in here um but I think we actually can we can we use a spread operator in here can we use everything from stylesheet do absolute uh I just want to have absolute fill oh I can get it as an object and then use it nice that is cool this is so cool whenever I create these tutoral for you I learned something new so uh you can also use Styles sheet absolute fill object which gives you all the properties of that uh then we can use the rest so now you see it is applied to my application uh it turns everything wide this is what you're going to see in the official WhatsApp application as well so I will keep it like this on top of that what I want to have in that view is I want to have an activity indicator uh size large color primary okay so that's going on here and then we have another text element which says sending code okay uh or lowercase code okay and that should probably have like a font size of I don't know 18 and some pading of 10 okay so this is what people would see once they press the next button okay let's see so send OTP I should set my loading to true and now after a little timeout I will set it to false and push a new page that is mostly correct however we don't have that next page to verify the OTP yet let's add that as well and you might ask oh Simon where's the logic for uh the OTP wait for it that's coming in the next part we first want to prepare the UI and then we can completely focus on how the OTP with clerk actually works so I will go and create a new folder I will show you why in a second so I will call this verify and I will add a new file with brackets around this one here okay because once we get to that page I want to show the phone number at the top of that page okay so let me check this uh R native function export page if we want to access the phone number now on this page we can get it uh not like this phone and we're going to use local search perams from Expo router we're actually have some typing in here so if we want to you could say something like phone string eventually we'll also pass another value to this page called signin uh string because there are different ways as I already said uh if the user does the OTP for the first time or for a second time because then the account is already created so let's get both of these values then we of course going to have a code and set code which is a state here and on that page um yeah I think we we're actually at a point where we should build that page right I think we're at that point okay so um as I said in my OTP page I want to now route to the next page the next page has now the link verify phone uh yeah mostly like this we can just copy this over and do it like this uh I wonder I wonder I wonder uh if we should probably Define this in my stti yeah I think we should because we need some uh some custom styling so I will grab that object and place it in here the name of that page is exactly the file so this should be verify SL phone no uh the title is verify your oh come on where's that symbol coming in verify your phone number um the header should be shown yes um and the header back title should be number so we can go back from that page to the previous page by doing this okay let's see so we're starting on the index page and oh no on the we're starting on the index page we get here we click Send OTP and after 2 seconds of loading we push to the verify page let's try agree disabled I put in my number I press next it loads it sends the code and we arrive at this page voila very nice and we have by the way edit number number and verify your phone number up here good this works actually better than I expected so yeah I'm I'm really uh kind of shocked okay so on the previous page we used the react native mask input now we're using another package called the react native confirmation code field and we installed all of these packages in the first part of the tutorial so we're going to do something that looks pretty similar to this uh this is how it works this is an explanation and then there's a basic usage uh we can actually start by importing all of that in here and then we will be able to use that however there's a bit more that we need to do on this page so let's prepare um we will use a use effect here um which tries to verify our code so we're going to check the code and once the code length so if the code. length is equal to six I'll just put a Luck instead here and then it will say something okay so this is the point to do verify code this is where we want to verify our OTP okay and send it to cleric that means we're going to have a function to verify our code Asing function something and then as I said before there are different uh ways to verify if you're signing in after using it already so we're going to have verify code and verify sign in additionally it might happen that the user did not get the code so let's add a resent code function in here okay that is prepared as well and now we can get into our view let's start by adding some styling down here and I think once we get to the inside oh this is interesting uh I didn't expect that uh once we get to the inside Area I think we will have a bit less styling in here but this is just like a little glimpse of Hope for you um okay so let's put it here and we call this one hour styles. container cool um on top of that we can have the legal text again and the button and the button text as well so let's bring that over we have the legal text the button text and the button um we can put this all on our page so let's start with the boring legal text which are we have sent you an SMS with a code to the number above the complete phone please enter the six-digit activation code by the way if we at this point want to verif uh want to change the stuff here in the header we can easily do this so you can say stack in here do screen the same setup like like we used uh in other places and we can just use the options in here and set the title to um let's just set it to phone okay so now that we're on the screen let's say this is my number I go next and this is not yet working I probably have to reload or are we using let's see let's see next um why does it say verify it should not do that anymore if I set my title um probably probably probably the header is visible uhu good question are we actually getting the right phone I mean that's I think we do right we do get the right phone number why are you not setting the stack screen in here because this should definitely be [Music] possible why does it keep using that one I don't know if we have like to do a full rebuild or something uh verif it still says verify phone number let's say if I remove the header Title Here uh shouldn't it be header title in here let's see uh I should do yeah yeah yeah it's that one okay so now it works yeah now it would show the phone number up here uh and I should by the way decrease this timeout it's annoying while we test things okay so we got the uh first legal text in here uh and then I want to add another button which is a touchable opacity again we're circling in on the uh harder stuff here um but this touchable opacity will actually be to resend my code so it will say uh like didn't receive a code then go ahead and get a new one okay so this would trigger it now the more important part is the code field so we already brought in the import there are some stylings uh this is how the code field looks ooh okay okay this is going to be challenging so everything is red great great the let's start with the easy one the cell count that should be six uh I will Define it up here nonetheless because we're cool kids then we had a REV or they had a ref they used a ref to that field like this use blur on field with the value so the value in my case is actually our code so it's not called a value it's called code and we got it we can also remove that part here we don't need that yet okay we need some props do we need them uh by the way what is oh yeah they had this as well they had this on the page as well so Props value and set value in my case the value is code and the set value function is set code so okay we fixed that one um the value as I said is code unchange text set code uh then we have uh styling so we could call this code root field if we want to I think they had this uh yeah they had the styling for the code root field as well let's add it in here okay so far we don't really see anything yet uh because we don't have the cell and the focus cell uh so let's call this uh actually let's I like I would like to call this differently I would like to call The Styling here um symbol is focused cursor I think this is correct so far uh but I will call this cell text I think this is more uh in tune and focus cell can stay as it is um let's see actually oh no actually this is correct this is the cell route so it's this CH package is a bit more challenging okay let's bring in three additional stylings okay let's go down here we got a cell rout we got a which has a specific width and height then we have the cell text which is like the value inside and then we have the cell that is currently focused okay and that is what we want to apply so at the top here around this actually this should be a view in my case the view has the cell root styling and if it is focus it also has the focus cell then within I want to use the cell text styling and either display the symbol or if it is focus Cura or null okay so we still got that let's try we're going here and we're getting closer okay so we see if it is focused it gets the black border uh and it has the blinking cursor so both of these are true we also yes we also have a numeric uh pet uh text content type what what is this text content type uhuh uhuh I think if this is set to one time code probably it will automatically give us this um uh this uh overlay here if we get a message then on iOS you can say import from message and I've seen this before by the way okay um is everything else correct in here I wonder we have the code field root um no so now if I put in the last number uh I actually get a lock message so that means our use effect works as well um did it look like this in the past as well it's just my question to like my myself uh which is hard to say because in that other application I already have the um the clerk Authentication integ ated hm well I think we're fine I think we're fine uh I wonder if we're actually not using any kind of loading overlay on this page anymore so we can also get rid of that um I think we're kind of done like I can go back I can go to that screen we have all the functionalities laid out so once we come to that point here we can actually do a little check so if sign in come on if sign in is equal to true so you can't say true uh because it's passed as a string uh in the URL then we're going to use verify sign in and otherwise I want to use verify code okay so we got that as well and I just wonder if we can have a bit more petting between those input Fields uh cell rout with he margin top Gap yeah I could probably change the gap of these fields right does it change anything yeah it does okay so where were I before at six uh yeah that looks good to me okay I think we can live with that so this is our code verification screen that means we have laid out all the the grun work the basic work here uh we're using sell text correctly I hope um yes we have a text Style with the cell text we have the cell rout we have our uh get cell layout Handler applied correctly at least I hope we did it correctly and so we have used the package correctly now the only thing missing is uh probably we can do this right now before we get into cler what happens once we have successfully verified this we would get to the actual inside area of our application so I want to do a new TS layout and I will group these files so with the brackets I can now group this I'll put in an index. TSX um call this page and call this like inside so we just see that we're uh able to go to this inside page uh we can do the tab bar in a minute but for now I just want to have this page in here um and once I verify something like let's say I just verify the code uh I will then then use router um actually we don't need to do it because we're going to catch this with authentication at the top level so yeah I think we will leave it like this make sure you got it until this point so you can step through and then we're ready for the real authentication okay time to implement the actual OTP Logic for this we will use Clark Clark is also the sponsor of this video as I mentioned before and also we've done a great video with clerk the Airbnb clone which you should also definitely check out that was an epic one as well and more to come in the future so clerk is really the most comprehensive user management platform you get like everything that you need for the best inclass authentication and user management and on top of that they have a fair price in where you can get started with a free plan up to 10K monthly active user which is pretty impressive and then it starts at 25 per month so it really scales with you and we're going to use the uh SMS OTP verification which will be quite easy to implement so let's go to my dashboard and I will create a new application I will call this WhatsApp video I want to use phone number actually I will disable the rest of this because in our application we can only use phone number and I will create this however this is not too important here um we're now greeted by the screen which is pretty nice so I can use this key in fact it's not the clerk it should actually be the Expo public key uh I don't know why it's not included like this so in my project I will create a EnV file and I will add the Expo public clerk publish key which should be this one okay so if you have a production version so this is your development mode okay so once you switch that to production uh create the production instance you have to use that code as well um on top of that we need to install some packages we need to install two packages and I think we might have to do a real a new pre-build so the first one is npm install at clerk SL uh clerk D Expo okay that's the first package and because we want to securely in a save way store our key we will also install another Expo package called Expo secure store once this is done um by the way you will see or You might have a question because sometimes I install packages with npm which simply installs the latest version uh latest major version of that package and sometimes I use npx Expo install which I will do for the next package once this is done I don't know why this takes like ages um did I mess up something uh or is my connection just so bad I don't know it's defin it's certainly strange uh usually this shouldn't take as long because uh at cler collect D EO yeah well it's done anyway let's not further talk about it um the second package and by the way my ID is snow I just noticed it uh the second package is npx can I can I type okay yeah this is the package but oh come on npx Expo install Expo secure store so if you install something with Expo installed it will make sure it is using the right version that's working with the latest version of the Expo SDK so this is what I wanted to say for about a minute now uh I don't want to open a Java project I'm getting mad at you vs code stop it okay so we installed those two packages that's good and we have the color key let's just make sure that our stuff is actually enabled so we don't have any users yet that's cool um we do have phone number authentication uh one of the settings yes require allow users to sign in verify at sign up yes we're going to keep all of that like it is I will now also disable password as an authentication factor and click at the bottom on apply changes um because this kind of messed up my the authentication logic from time to time so I really just want to have phone number authentication not password as another Factor so these are like authentication factors that you can use um and of course if your application requires one of these cool you can enable them but for our WhatsApp clone we only really want to use SMS verification we don't have to plug in anything here in our development instance and we can use this now as it is so that's is pretty cool um therefore let's move on to my application um and what we want to do is we need to wrap our application now with clerk so a few changes are required I still want to keep most of the stuff that we have here because it's quite helpful to have that from Expo uh however let's import the clerk publishable key the one I can't pronounce correctly and from cler the CL provider and use o from the package that we just installed so now down here in my root layout nef I will return clerk provider and I will wrap this around our app the publishable key is now the clerk publishable key I just had I don't know what this is but we don't need that um and this goes completely around my app there's something missing in here which is the token cach so there's a special way um I think this is described in the documentation to use a specific secure store uh this sort of adapter like behavior is pretty common and that basically means we can supply our own logic to the clerk provider and how it loads and stores the JWT because authentication is happening and in our case it is using the secure store from Expo so the native way to SEC uh securely store our information get token would then call get item Asing and save token would call set item Asing and now we just need to pass that token cache in here okay and then the clerk provider should be mostly happy if I say that this key is definitely set okay cool um I will also now change this up so I will bring all the screen Logic for the stti in here um and within the clerk Pro provider I will just use let's call this I don't know initial initial layout and then I will call this one up here um const initial layout equals this okay so now we have wrapped our clct stuff around my initial layout um and I want to also tell here so we're going to call do we have to um I kind of want to stay consistent with how my code looks so I will use it like this uh and then I will add the export default root layout NV so this is used clock is around the app the initial layout will load and put some magic and Logic on top this is important why because we're using Expo router and pretty much everyone could go to the file uh if we're using URL based routing so we need to make sure that our files are now protected and as well that we can automatically move to the inside area so the inside Area will be this TS folder right here I actually I'll do something like chats let's call this chats. TSX okay it looks a bit better um in my initial layout I now need a few things um I will need the router so cons router equals use router from oh no I think I imported something wrong I think I mean made a horrible mistake somewhere yeah up here go away um next to the router I also need segments so I want to access these segments which are basically the parts of the URL which give me some more information and then I will also load is loaded and is uh is signed in from use o so these are from Clerk and we can use that information to protect my pages in the best possible way so as I said I want to keep all of this which loads some specific fonts uh and returns an empty layout in case uh we're not yet ready actually if we're not loaded or not is loaded we can return null um I had some problems with this I will change this to view usually Expo router is not really happy if you just return null so I will just return a view instead and now we can put in our logic you have perhaps seen this before perhaps not um we're going to make the use effect dependent on is signed in um if at this point oops nope that's not what I want if is loaded so if Clark is not yet ready we just going to abandon and return otherwise I will check if we are in the TS group so if we're trying to access something in there so we can check if segments at the index zero is equal equal to what I call this TS or o i wonder um I think I called this TS right okay so this will check if we're in the TS group so now the question is if we are signed in if the user is signed in and the user is not yet in the TS group the question is where is the user so the user is still on one of those OTP pages and that means I want to bring the user to the inside Area I want to bring her there by using router replace so I don't want to go back at any point and I want to go to/ tabs slash I think calls or chats or something um slash tab slchs uh why are not picking up on that probably because I don't have any uh Expo command running so so after adding that package I think we need to do a new pre-build as we Chang some native stuff yeah we definitely did so let's do a pre-build and add-- clean that is important because it will actually Wipe Out the folders that we had the IOS and Android folders and regenerate them uh using our app Json information and config plugins or whatever should be applied so if you don't do it with clean you probably won't get the new stuff included in your application so do that um also we're done and we can do npx Expo run iOS once again yes I want to use that Port I'm fine with that so let's close it okay um I think in a minute this should work when it picks up um the types or it understands that I actually have that file uh but for now let's keep it like it is so otherwise it just means means well we're not signed in uh maybe we can do like an else if else if not is signed in in that case I want to bring the user to the uh initial screen this also means that we're basically having the whole Logic for authentication in place so if we are in the inside area in the tops area calls wherever settings and the user signs out is signed in will switch and the clerk package will inform us use effect is triggered it finds on oh the user is not signed in so we're automatically brought back to the like lockin or OTP verification screen here again and otherwise if we sign in we will automatically be brought to the inside Area okay um this means I guess that we're good we have the use effect we have my stti here with everything that we need need and as far as I know we should be let's close this a bit so we see what's going on uh we can go to the first page which is the OTP page right so on that OTP page we need to send the OTP or try to sign in in case the OTP fails so this is going to be interesting on this page we can now access uh everything that we need we can access sign up and set active from use uh sign up from Clerk and we can also get uh const sign in oh come on using all the wrong Keys all the wrong Keys all the time today okay so mostly we got it right okay here we go again we're back on our page everything uh is still still cool so to send out my OTP what I want to do is I want to wrap everything here in the big TR catch block uh I will catch an error at some point and I want to lock out that error as well okay we start by saying sign up so this is the default way sign up. create uh and when I call create I can just pass in the uh phone number but as an object I think right yes phone number so as is called phone number in our case as well we can just do it like this uh once we got this it will create a user then we're going to follow this up with prepare uh phone number verification okay this prepares it and by calling this it should oh no documentation oh that's a Pity um prepare phone number verification would now try to send the OTP to the user that also means at this point I'm ready to go to the next page so router push uh to verify phone we had it before I messed up I'm sorry so yes let's use the string lals in here pass my phone number to that page good if the user was verified before we're going to hit that error block here and now it's interesting because I found out that we can use it like this so we can check if this is a clerk API response error and pass in the error so in that case typescript knows that the error is now of the type uh API whatever and we can further check if error. errors so we see we now get actually the real typings here so if the errors at the index zero dot code is equal to and now we have to use form identifier exists I hope I have no typo in here if that is the case uh I will say user exists and we're going to try await try sign in instead okay otherwise uh if in any other case well it should be error like this uh I would set my loading to fults and I would call probably alert. alert with error message okay cool um at this point it should actually be possible to send out my number so I would have to use my own number now to get a message um so I will have to somehow hide this U because I don't want everyone to call in and ask me for support um but maybe we can do the sign in as well right now now so in this case uh the flow looks a bit different I think it's actually described very well here in this document so the first flow is the signup flow this is the one we just implemented um okay so create verify uh and once we try to verify we're going to have to do this on the next page actually that something we can do right here so on the verify page if we want to verify the code uh we can use that exact logic so in that case uh uh we also need to use the two Imports we just had before so let's add them from use sign up and use sign in and then we can verify the code uh pretty easily so we can attempt phone number verification with our code and most importantly we have to then set our session active uh and we're going to add the the alert from react native okay right uh this is the whole logic which is uh basically the same attempt phone number verification and if it is complete we can set our session which would then automatically trigger at the top layout file the change of is signed in um if we are on the other end of the spectrum uh if we need to verify and try to sign in the user the code looks a tiny bit different but mostly it's still the same so what we're going to do is we're going to get the first factors the supported of that user in our case we only support phone number authentication so we are sure that um there has to be a phone code strategy usually but I wanted to follow the docks and this is how they present it once you are at that point you can call the prepare first Factor sign in so we're now using the signin object not the sign up object we use the same strategy phone code and my phone number and at this point I also want to go to that next page on which I can verify the code however we're now in this different mode of signin so now what we're going to use is we will go to verify and put in our phone number but I will also add a query parm of sign in true and I will also set my loading to fault so by doing this query peram here we're now able to get that information here we already implemented the logic in the use effect in the first place so if this signin is true we're going to use a different function we're not using verify code we're using verify signin and I mean it's not it's not very different but it's a tiny bit different flow so we got to be prepared for that uh I was certainly hit by this because I created my user I signed in I signed out I tried again and it didn't work so with this code and with this flow you should be very safe because now we can verify the user um with the first Vector code so await sign in I pass in the code and it's hopefully correct and then we activate my session to wrap this up uh let me quickly expand on recent code so you're going to find the code for the whole authentication flow as well as always on GitHub um resent code is pretty much going through all the steps again if sign in is true we're going to do the first Factor stuff otherwise we're going to create and prepare phone number verification so with all of that in place let's check we have our layout authentication logic which reacts to let's say let's put this in here uh is signed in changed so we're going to get some messages okay then once we are there we're going to replace and go to the inside area and before that we have my verification screen or the OTP screen and the verification screen so let's give this a try okay I will put in my phone [Music] number okay then I will hit next this should hopefully uh let's see on my uh where are we we're on the OTP screen right uh I oh we not using my keyboard vertical offset that's a Pity um well we can't really confirm that we could probably use the keyboard vertical offset at the bottom I just noticed this one little uh one little yeah this should go actually to my keyboard avoiding view uh let's let's do it in here keyboard vertical offset sorry um just adding this we forgot about this before Behavior should be padding uh if we're on okay anyway uh let's try and verify my number um okay I'm going to get more space here so let's hit next we're sending a code and if we did everything correct yep I got a code I got a code from random number which I can now insert here uh actually our not we should probably also autof focus on here uh so let's say this is my code uh is it okay we got the full code and oh yes we are moved automatically to the inside area we got the luck message is signed in change through oh praise the clerk SDK we're here okay so what happened um I inserted my number I got the OTP on my actual real device we haven't configured anything else you saw how I configured clerk um we verified the code on the phone verify screen and because is signed in change to true the use effect in our top layout file was triggered and we were brought to/ tabs SL chats the question is uh why we still have this back area here but we're going to fix this in a second as we Implement our tab bar the most important part is that we have a verified user and we can confirm this usually by going to our users here exactly and we should have a new user or you should have a new user in your clerk dashboard where you can go into the settings and manage that user if I now press R for a big reload I am also immediately signed in because clerk will get that session the JWT that was stored in the secure store loaded and confirm and of course my um my layout here strikes again is Che changed and we're brought directly to my ts inside Area okay I hope you were able to follow along with all of this there was quite a lot of code for especially the OTP screens uh and the verification screens uh including this check between signing in and creating that user you can now or later try to sign out and then sign in again it should go the other Branch where it goes into the sign in so I hope all of that works for you I hope you also see the inside area and once you got that you can continue with the next step if you've made it this far congratulations first of all we will now implement the basic Tap bar for this area uh that means here in my folder I will now do a new underscore layout file if you have questions about the Expo router and how layouts and pages and everything worked go check out the other videos I did on this there's like a big live stream I also did where I walk through all the layouts basically you can have your own layout file in these folders um if you use it like this it would appear in the URL so if you would Host this as a website verify would actually be part of the URL if we use brackets around this it's more like a group and you don't have to use it in the URL it's more like grouping stuff together and I just like to use it like this okay um in my t bar we're going to have multiple pages so we're going to have updates. TSX I will just use uh this all the time so we have updates we do have I think communities. TSX like all the tabs here then we have settings. TSX we have calls. TSX and I think that's all right calls oh no chats chats we have chats huh forgot the most important part never mind oh we actually have a chats calls chats communities settings and updates good now we want to present all of that in our T bar so let's see where is my T Bar this should be it so I will wrap everything here with tabs from Expo router if we do this um we are back at square zero why am I here um okay here we go this is interesting this is fun um my T bar now looks like this it will first of all pick up all the tabs and it General it works that's not too bad um we see we have a duplicate header that's the first thing we should fix we should fix this at the top level because in my top layout I still specify or I don't specify it yet but I should specify this area so as another screen named tabs or actually the name of that folder so it applies to all the files in that folder I want to set the options header shown to fals okay so now we are here and we don't have that header anymore that's a good start additionally we can now move into designing the TPS so we move this a bit up and I hope that we can uh all see it correctly uh what I want to do at this point as well is as we going to use some gestures later I will wrap the whole inside Area here in the gesture Handler root view uh have I installed that package actually I haven't I haven't done that yet that's a Pity uh we definitely should install the oh no this is a native change as well right ah I'm going to have to do the pre-build again do I really no I will not do the pre-build right now again uh I will probably wait for this and do it later also whenever I install something here it looks like my whole Visual Studio code goes into uh a crazy state of I don't want to work with you anymore but let's hope this works uh in a second again uh okay okay so we got our T Bar uh we should Now define the different tab screens so they're named chats settings whatever um we're going to start actually with the one that's most to the left which is updates and start by changing its appearance so under the hood this is still using react navigation uh so we're using the same properties that you're probably used to so this one is updates and I also want to uh see now we have updates and updates down here but I also want to affect the icon so Tap bar icon um and in the Tap bar icon we got access to size and color we should D structure this and use these Val values because we can then use them for an icon I think I used a material icon name update and then size and color Okay so this gives us the first icon we can use a bunch of different we can use feather ionicons material icons it doesn't really matter most important is that my coffee is still warm I can just got a fresh cup okay so here is the first screen let's define the other screen so the second one will be calls I will give it a title calls and then I will use uh material Community icons and phone outline okay this is the second one third one is I think communities communities uh so we got communities and the icon that I want to use for communities is a material icon people okay good next one is chats chats and as an icon for chats uh I want to use chat bubbles from ionicons ionicons chat bubbles okay and finally we got settings settings and the icon in this case is the from ionic consons okay good so we got the tab bar all of these tabs now have a nice name they have a nice icon but we can also change the uh appearance so the color scheme we got here uh let's put it here now this is actually a bad place let's put it up here um and if we want to affect this for all the TS we can do this at the top TS element here it is by the way screen options not just options so we can set the tap but bar style um and in here I can set the background color I want to set this to my own colors do background so that should turn it slightly gray okay um maybe I'm going to do it just for the sake of this example like this um then we have the Tap bar active tint color for that I want to use primary it's not a big change but still I want to follow my scheme and the tab bar inactive background color should also be colors background and also the T Bar active background color is my background so I want to just make sure that we have the right colors uh in the right places additionally what is this um additionally tap tab bar what is this tab bar what was the name active background color uh yeah I think so uh finally I want to add a bit to the header area so we don't really see the header area yet here we go header style and for the header I also want to use my background color and on most places I want to hide this little Shadow it's probably not even visible on the camera on the recording but we can say header Shadow visible FS so that gets rid of that area uh which will be really helpful on some screens okay good so we got this in all the screens um we can navigate around we will at some point change um a bit of the layout again because we're want to have um a special behavior in some screens and we also need like their own stack which means we have a nested stick in a t bar this is going to be a bit more challenging but for now I think we're done with the general styling of the tab bar so all of the files have become a page and we're ready to start with maybe a bit boring screen but still it's important to understand how you can make an interesting settings screen the settings page of WhatsApp is a great example of how you can make a rather boring Page look actually good so this is from the other application that I have we got this cool settings page and there are a few things going on especially this header stuff uh which Scrolls down the title into the top which is a native iOS setting and also reveals this search bar and then we got these different blocks with colors and nicely aligned and separated items so this is what we want to do apparently our application right now looks like this uh no do I have to reload again I should have a session no why am I signed out all right I'm signed in no problem that actually gave me the chance to check check my flow here and I noticed that I had a typo here uh where we had our OTP logic so this form identifier exist and I had like identifier or something anyway uh let's get back to the settings screen which is rather empty I will begin with some basic stuff because we're going to need some data for that page uh let's bring in our colors so you can find this as always on GitHub have these lists defined so devices items with colors and their icons and we can now use them on our page additionally I want to include the sign out so we can get sign out from the clerk package use uh o from clerk Expo um any problem no shouldn't problem okay uh let's give this one first of all uh styling of Flex one and for the background color I want to use my colors. background and we will soon discover that we are not able to replicate this Behavior with the current page as it is but that's bit foreshadowing I just want to let you know up front that we're going to have to wrap up our layout again anyway for now let's start uh let's probably put everything into a scroll view so we just need like a react native scroll view uh and then we're going to do the first block which is a view and for The Styling we can now actually use our default styles that we defined in the beginning and use the block styling I could have probably used a bit more from that as well uh if we hit save we don't see anything yet because there's no content inside so in that block I want to use a flat list to Define these items why I don't know why the flat is usually pretty performant uh we don't need to go any further uh but flat lift is usually good and it's also a good idea to see how the flat list works so let's get started by adding the data for the flat list will be our devices and then I can render the item um I want to Define my own function here uh so I will most likely render a view uh which has style default Styles item I don't know what all of this is I think I don't want all of this uh for now I really want to just have uh the item name in here without any big styling okay so broadcast list start messages Good Start Good Start Right problem is that we need to also uh Define what is wrong virtualized list should never be nested yes exactly so because we have a scroll view around the flat list this error comes up and to prevent this is I will add enabled uh or scroll enabled faults in here we don't really need to scroll in this block here as we can scroll the whole page right so therefore we can safely uh disable this I also want to have an item separator component which we can easily add here um uh do we have this yeah default style separate actually we got this nice uh that's pretty cool so now I just need to style my box a bit more um I think in the past I used a new component for that uh like an icon do we want to use a custom component yeah let's do this that's actually a good time so let's create a new file under components components slash and I will call this boxed icon. TSX rator functional export boxed icon and this icon will have a little view um but most importantly it has a specific type let's call these um boxed icon props it has a name uh which is not a string actually we can do this for now uh but a background color background color that is a string um and then we can close this okay now how do we get access we can just use it in here we can extract name and background uh color and using the Box icon props this is actually background color okay so these are like the big icons I wanted to use let's include them in my settings page so going back to that page uh we can now use it in our view so let's add boxed icon here that expects the name of the icon and a background color so right now we see we only got box icon of course we need to resolve that to the actual icon uh maybe we wrap up here with the font size let's give this 18 um and this should also use flex one to spend most of the width here and then at the end I want to have another ionicon uh Chevron forward size probably like 20 okay so now we just need to create our boxed icons So within that boxed icon uh I want to use the actual icon of the ionicons so ionicons usually just like this name name size 22 and color yeah we could use white however if you assign the name dynamically like this as a string it's not working types script will complain type string is not assignable to the type uh of these we can now fix this by changing the type here of name to type of uh oh come on I was the right it had the right one type of ionicons default props okay and now voila everyone is happy we're just not using it correctly um we should give that view some styling as well so I will give this a background color some padding and also a border radius of six and as a result we have these icons with padding and white icons so this is how we do our own cust box icon um and how we pass in the name of ionicon with type of ionicon default props good that's a nice start right so now uh let's heat back over we have this we have that so that's all cool that means we can pretty much duplicate these things now so the second list is actually items and voila it will just work because we've done a pretty great job of extracting all the stuff away and we just need to plug in the right data here to get this beautiful little view you could of course have all the action handlers click and like uh pass a link probably also or make this whole item um yeah that will probably be a cool job so if you're interested you could make this like a a settings row or something uh as a custom component and then use that instead okay anyway um below this I would like to render a little touchable opacity so after the last view I will add a touchable opacity um some styling but most importantly on press I want to call sign out and within I will just have a little text element saying lock out I don't want to trigger this yet uh I will just place it here in case you want to to test your flow I actually tested this right up front um so this is how it worked now what we wanted to have is the iOS header effect and this is a bit more complicated the problem is that we need to Define some um specific settings for a large header title however we can't do this for a ts. screen we need to be in a stack layout so therefore settings needs to have its own layout as well as later calls and chats so what we're going to do is we create a new folder and call this one settings we move our settings file to it and call it instead index because it's now in that folder and we add a newcore layout. TSX in here uh in which we will Define Our Own St layout okay if we we now go back to settings it looks a bit strange um because we don't need the header anymore that we had defined on our uh T Bar layout so in the tabs layout we will now find the settings and say header shown is actually false so now we only have our own header of that settings page in here I just want to Define one page so I want to define the stack. screen name in index and I want to set some options okay we got two elements in here okay header title whatever and close it okay so we're back on the settings page now we will change this first of all to settings and now it begins we enable this by saying header large title true okay so this is the first step we actually see this here it's now above our page and it kind of moves already there so we got a bit of work to do to make this work correctly with our page but I think this is really interesting once I discovered this I was really like wow this is cool um I want to set the header Shadow uh header Shadow visible to false because that didn't really work well and I want to use the uh same background color that we used when we find this screen on the tab bar so now settings has the same background color like our page and will just give us a more natural look um additionally I actually also want to have a search bar here and we can get this so easily by saying header search bar options and I'll just add a placeholder of I don't know uh search okay and this is enough to give you this awesome search field like wow that's so cool uh again all of this is found in the react navigation documentation which is used under the hood of Expo router so you don't have to learn something new it is already there now the only thing is that this uh is actually covering our page and it's not working 100% correctly therefore go back to the settings page and at the top we have our scroll View and we need to add two properties to that scroll view to make it work correctly so content inser adjustment Behavior needs to be set to automatic once we do this this is what we want to do you see now we got a smooth transition here um let's see I want to do a little reload and check so if I go here we see settings if I scroll further it reveals the search bar if I go up it fades it out into the header and this is exactly the iOS way how iOS handles large titles and how they move into the header area uh this feels really good it feels really good um I thought I we had to do a second one with some uh pading for the bottom but we actually don't have to so what we've done is we've moved our settings page into its own folder with its own stack settings if you can't Define it in the TS layout for T screen because these are St screen specific settings uh especially the header large title then I think you could actually what can we do can we header large title um yeah you can get header large title Shadow visible header title style um let's do fault here and let's no then we have like a um initial no I don't I don't think that's it's a good way we're going to keep it like it is I think this is already perfect so uh of course when're not really using the search bar but you see you can easily hook into that and tap into that and filter your items and it already gives us this epic thing so we don't have to animate anything that is like so amazing oh I love it okay and this is why I wanted to implement this settings page it's not a super special page but you see it looks pretty cool and it has all these elements that you expect from a page like that I've seen so many boring settings pages and it's actually not too hard to make it look at least decent with different colors separating them into blocks adhering to the platforms and using these sort of uh animations or micro animations in your application okay I've spent enough time on the settings page and telling you how much I love it let's move on to another page uh I think next one we're going to tle is calls after finishing the great settings page we will now focus on the calls page on that page we have several things to do we're going to split these up as good as possible into different sections so basically what we want to do is achieving a page that looks like this so we have this same setup of uh the big header which then becomes small uh so we're going to talk about our own layout again we have two buttons up here and here they won't really have functionality but we want to include them nonetheless then we need this segmented control up here this this is not a standard control and it's going to be somewhat challenging to get this to work actually we're going to do this in the next part so we're going to begin by having this General UI in place and then building up this list of dummy data once we got all of that there will be things um that we're going to include as well so uh we can switch of course between all and Mist so that list will be filtered on on top of that that filtering should be animated so we're going to have a nice transition between these uh different settings then we also want to introduce swiping on different rows so I just want to give you like the outlook on what we want to achieve with this page and finally we want to add the uh edit flow so if you click on edit up here in the corner it will change to done and instead you're going to see this remove button for each of our elements so that means we have quite a lot of work here and I really wanted to dive deep into this page because it's an easy page if you use WhatsApp it feels natural but that is like the biggest challenge making your application feel natural feel like yeah this is exactly how the app should feel and I want to show you that yes this is possible with react native as well so here we go let's start by doing what we did for the settings page so called index. TSX uh this will now be the content here so we can remove the call Page and we can pretty much copy over the layout only that this will be called calls right now uh for the header uh search I think we can keep search uh so then I also want to change in my topmost layout file that we're automatically brought to chats so this will make sure we're always brought to the calls page um on top of that going back to the tabs layout we have to disable the header for the calls page now otherwise we have a duplicate header and then we have a pretty good start for the calls page I think um we have calls we have header large to um in fact there's something else I uh had before when scrolling stuff here uh so I will include this already here because I tend to forget things so there's another field called header blur effect uh I will set this to regular um can we already we can't really trigger this so let's let's try and come back to that in a second uh we got my placeholder and then I will also include for the header right field um attachable opacity actually we could have just made an icon um anyway I only use a touchable opacity we won't attach any functionality and we're going to use the ionicons uh let's use uh call outline colors will be colors primary and size maybe 30 and then close this so then we have the header first thing of the header um the header left field where we need this edit button I want to do this in the actual page here why you might ask well the reason is simple if I do it in here I can more easily catch the actual event so I can now just do it in here so I can say stack. screen um can we have this stack from Expo router okay great um then close it and I will set the options here and I will set the header left to pretty much what we had here uh I want to keep that page open I'm afraid I will lose track of it uh header left in this case case this is going to be a touchable opacity as well and I want to use the just a text in here so on press I want to toggle something so let's call this like uh onedit okay this will do something so on press I want to call on edit and then we're going to have a text element in here with a styling um yeah I could say edit of course that's wrong uh this should be dependent on a state we need some state is editing set is editing fults exactly so I'm really trying to also Embrace a bit of typescript um a bit of copilot and how I use it in my work uh colors. primary and then give it a font size of 18 okay looks quite good now you can make this also dependent so is editing then we're going to have a done text and otherwise we're going to have an edit text and once we click on on edit we will just flip the value here so is editing not is editing and setting it okay so we see pretty easy I feel like we could actually change like a bit of the font v h well let's keep it like it is um we know also from the other page that we had that we should surround our actual View uh now with a scroll View and within that scroll view use the uh content adjustment Behavior automatic so if we use that on our page we will be able to have this uh switch in the header I'll also make sure that we have a style here of Flex one and for the background color I want to use my colors. background okay can we already yeah we can already do this good that's good that's good good start um now we need some data so I added some data here uh I have some calls I have chats I have context messages we're going to use a few of these uh Json files later really just some completely random data that we can use but it will be helpful anyway um normally you would probably load this from a server um or from an API however we're using it like this so let's add the call from called Json and then use it as a state for our items here with that in place we can go into our scroll View and start creating uh the flat list so this is going to be a flat list once again um the flatlist oops data in this case is items uh we want to disable scroll like we did before otherwise we're going to get that duplicate or that scroll issue um we also want to use a specific key extractor because this is a bit more challenging uh these items have the key I think we need to call two string here okay uh and then we of course need the render item function which is probably the most important piece uh let's close this I just want to see where all the brackets go uh okay I think this is actually it I think we can directly close our flat list right um but to render the item we will put everything in a view for now and let's try this okay this gives us the name that's a good start that's really a good start we definitely also or might need some Styles down here I think I had just a little Avatar styling which will help us to style that little Avatar uh let's put in the style sheet up here and then let's see how we can style it um so we render an item for each of our call items and remember this is what we want so basically we want to use a roll layout okay so we have the Avatar then we have this section which probably takes up most of the space and then we have this entering section which has two items so probably once again uh a row layout here this view should actually have a column layout as we're stacking these items so this is the idea pretty easy right um let's begin the first item should be the image therefore uh image from react native uh source is the uh item I think dot oh nice yeah we got the styling Avatar okay here we go this is not too bad it's actually pretty good um then this view should have some styling as well um so what styling is required I think default styles do item should work wonders yeah it's pretty good but how do we get that list to have some some good styling um we probably um I probably should have a view around this could I give this to the scroll view no I don't feel I feel like we should have a view here uh where we use our default default styles. block and we're going to wrap this around the scroll view okay yeah I think we're getting closer uh we also need our item separator again so this is the separator between our items not too bad I think this is pretty good um and now it's just about aligning the stuff correctly so this is pretty boring and we bring in bit of code I will replace the next one so after the Avatar we have the section um for the information let's do a retry here no something went wrong I don't want this how can something that goes wrong in here completely block Visual Studio I wonder just like sometimes this is compl completely killing everything and I have no idea why I can't even like do my cool swipe from the bottom anymore uh let's see now I can probably do it again let's restart it um okay here we go is this the one ignore yeah this should be my list right so we have our view as I said this will take up most of the space with flex one so right now it will take up the rest of the row uh we have text styling either color red if the item is missed or black otherwise so there's a simple Boolean inside the data and then we have another uh Flex Direction Row for the video cam or call icon which is like this row and then the incoming or outgoing text okay nothing really fancy to be found in here at the end we will now simply put our uh information bracket uh which has uh something interesting yeah we have the format in here I forgot that we need another pack package so if we want to easily format our data I highly recommend the date FNS Library don't use momentjs anymore pretty much nobody wants that it's too heavy uh in most scenarios um and most people these days just use date FNS which gives uh great um great features and functionality and usually it's enough so we can simply import format from date FNS uh let's put this up here if my visual studio code is not breaking down uh and also if the installation works I don't know why every everything I install takes like ages and is unbelievable slow probably it's just Visual Studio code I just tried a different editor this morning I should probably have used that one I don't know uh but anyway let's see um yes thank you saving index okay we're we're back at this we're back at this so let's let's talk about this quickly this is the ending part here where we format our date we're now using a flex Direction row once again then we have the text with the format where we pass in the item date and then the format we want to have so really date FNS absolute great thing and then we have the ionicon which is just the icon at the end so this is a pretty nice start actually I would like to give my list some petting at the bottom because it's right now are completely locked at the bottom so let's just content container style padding bottom of 40 yeah that feel I don't know why but that feels better to me if we have a bit of space down there okay so far we can't uh filter this view yet um we also yeah we also don't have any way of swiping this but it was important to me to see or to show you how these views come together I could have gone for the whole animation and swipeable stuff immediately but that's not how I started and I really want to take you with these longer tutorial builds through the process of not just building this but also thinking about how to build this so I always try to build the basic version of that view I might keep the stuff in mind that I have to do later as I have shown you before uh that we have the segment and that we can change this eventually but let let's start easy let's get this on the screen in the most basic way and I think this is pretty much the most basic way uh of that calls page and now we can extend functionality and also at this point you could make a commit and you're safe whatever you add then if you break the project you can revert to this state and then start over again from here so make sure you have the calls page that you can scroll that you got this header stuff going on and then we can continue with a segmented control all right now let's work on filtering that list from all to missing which means we want to implement this little segmented control up there so I couldn't really find any good segmented control that works for us but what I found is a great video from Eno manano uh who was also guest on the rocket ship podcast about creating a custom segmented control in react native using reanimate and I thought well this is exactly what I want this feels great this looks great I want to do exactly this and this is part of this video the community is just great so here is the source code link to this let me show you how easily we can get OS code working in our application right here let's just dive into the components where we can find the segmented control now we'll take all of this code so again credits all go to Eno for this control uh and I'm going to do this here under components so I will will do a new uh segment uh not uppercase probably segmented control. TSX and put in the stuff so uh by default the pellet is missing uh no problem we can get that from the actual page so from constants so this is what the pallet looked like so I will just replace this here with this one and then there are no more problems because we install reanimated before for so hopefully this works in our pre-build now let's go back to our page here and I want to include this in the header so I want to have this right in the center so let's Implement a custom header uh title and actually this will now be a component so in the Herer title I will put in the segmented control um we need some options exactly the options will be all and missed uh the selected option should be a state so we need some uh some State up here let's do selected option uh all and we're going to put it in here selected option and I wonder if we can do uh on option pressed set selected option that could work if we then use a use effect hook uh let's see if this works uhhuh and then we're going to close this and let's see I'm excited okay so we see up here we have this huge things so that means we probably have some customization to do but I can click Miss and I click all and I get these values so that means in general it works and once you get to a state like this where uh in general something works looks quite good you know you're on the right track you just know that you have to do a bit more customization and you will get there so let's get into the segmented control and check out Eno's code and what it's actually doing uh first of all I would like to use my own colors dot can we import colors do uh light gray here okay so that works a bit better and for the background some white here okay so now this fits more into what I wanted to do um we have a type segmented control props with options selected option and onpress we already used that then um Ando is using the width of the device I actually don't want to use it like this uh so we can remove that and remove this and instead I will set my window wi simply to 180 okay that makes it already look like this so it kind of fits into our page um I will also change the internal pading to six so that makes it already a bit smaller and then we can continue and check out what's going on so we have an outer container which has styling uh the segmented control with a huge border radius I will change this to be a bit smaller uh okay yeah looks good and then we have an animated view which uses the width okay that's cool uh down here we also have some width and at the bottom okay we have more so the container currently has a heat of 50 5 I will change this to something like I don't know 34 it's quite small what about 44 yeah 44 feels feels quite okay then the active box has a border radius of 10 let's change this so This active box should now yeah yeah fit in a lot better uh we're using background color uh pallet background uh border radius here is nice so for the active actually I don't want to have a shadow let's use it like this absolute six no more Shadows we're going to do flat styling and then I will also change the font size to 14 okay and boom this took us about 5 minutes to go from finding Eno's grade tutorial here to checking out his code to customizing it to exactly our needs um this is just like showing that you don't have to reinvent the wheel all the time please there are so many great either packages or tutorials out there that can help you to build stuff like this and this is just the perfect control for our case I exactly wanted to have it like this maybe the speed could be a tiny bit better a tiny bit faster but I assume we could like uh even change it here if we divide it by two I don't I don't want to mess up with uh ano logic we're going to do our own little uh customization actually I want to change the font family here let's just do it like this um we're going do this on our own later uh as well so I'm fine with this uh we're able to get this option so that means we can now actually filter our data so if okay selected option is equal to all I want to use all data and otherwise I want to filter my items and only have item do Mist included that's pretty correct and with that boom we got it thank you once again Eno for this great component um if you want to learn more about what he's doing check out the rocket ship podcast where Eno was in pretty early episode uh and as far as I know you can also support him on patreon uh at reactive that is his handle uh 149 paying members that is amazing all right uh let's continue M so what we got is we can filter we have it in the top area um but that transition is kind of hard so we want to animate our items now to kind of smoothly transition between these two states and that is going to be somewhat challenging but we're going to get there no problem what we want to do is we now want to use reanimated and layout transition and in general uh enter and exit animations okay so let's begin with our uh animated View and I will um uh I feel like I want to put another view around this um I will put another view around this this shouldn't hurt uh and it will help us later does it hurt no it's not hurting okay so in this one one will be an animated. view so if you want to use any kind of animations you would do animated. view in my case this is coming from react native reanimated um then we're going to continue so we have an entering transition and we have an exiting transition that we can use for entering what I want to use is I want to predefine an imation called fade in up we can import that and I will actually um use it like this and then we're going to use Fade Out up here okay actually that's not too bad that's actually pretty good already uh I thought that would look worth but it's pretty good it's pretty good I didn't expect this so there are a few things now that we can do if we want to like fine tune this stuff so first of all you could say hey I want to fade this up with a little delay and for the delay we could access the index of an object so I can now use index uh times 20 which would like give this little staggering okay staggering list effect okay uh probably not super great yet but I think it's okay um on top of that what were the other animations I wanted to do this is really hard to uh remember um I think I wanted to have in general around this a layout transition um or was it just on the flat list um the flat list does not have oh yeah it's because it's not yet an animated flat list so let's make this an animated flat list because once we make it an animated flat list we actually have an item layout animation and we can now Define an animation let's do this probably before that page so I can say const transition equals um for example we can use the curved transition with a little delay of okay let's use for testing two seconds okay and then we can use this transition for my item layout transition here uh okay let's see I want to do a Reload and you see what's going on so this was not the video stopping this was really me stopping talking so if we put in an item layout transition we can Define how the layout changes I just added this two second delay so you see that we actually affected this our other views still do their transition but the general layout only shifts after 2 seconds of course that is way too long so I will change this to something like 100 milliseconds probably and with that in place uh I should probably reload if you do like uh reanimated stuff you usually want to do a Reload so now the size of the list is transitioning as well as the items so you can decide if you prefer this more to the uh UI we had before but I kind of think this is a bit better also there's one more thing if we check this out if we load that page it immediately uses that transition that is not always something you want so if you want to prevent this you can use skip entering exiting animation um and now if I do a Reload the list is immediately here we still got all the benefits of the layout transitions here uh but this initial change is gone there's also an entry uh you can read more about this on reanimate documentation you could rep uh specific Parts with layout animation config skip entering uh but that's basically the same as we did with our um skip entering exiting animation in my test I also have this on the Block here so I don't know if this is uh improving anything let's give this a final try and we're going to add the layout transition in here as well and do one more reload and let's see so now all the block size changes with that curve transition I think this is giving the most yeah I think this is good I think this gives a pretty natural feeling you could probably change this to I feel like 20 is maybe too long maybe it needs to be a bit faster uh maybe you don't want to stagger at all that's cool as well I just want to give you the chance to play around with these things uh as I think they're quite fun and you see it's not too hard to implement them also this brings me back to one thing I had before so up here I wanted to show you this header blur effect this header blur effect only works if you also specify header transparent true so if my header is transparent I also don't need the background style and see what happens now it's maybe hard to see on a real device but in this area we have now this kind of blur effect so if this red thing moves behind it I think it should be visible on the recording as well that there's like a blur there are different values you could also use something like light okay so now it looks like this or you could use dark okay that is probably and now it's more actually something you can see U but I want change this to regular because I think this is a pretty uh decent effect I don't know if we really need it I think we're going to use this on a different view uh but I've already shown you this in case I forget about it later uh you know that it's possible to have this up in the header component good so this is layout transitions uh in combination with Eno's great segmented control we can now filter the list we have animated items with reanimated and uh entering and exiting animations uh you can also again check out all of this here in the reanimated documentation about entering exiting animations there are uh tons of different things you could use we've us something basic and we've used the layout transitions as well to define a transition but now we want to take this one step further and also combine this with gestures to have some swipeable rows the next step is to make these rows swipeable first of all I'm want to swipe them from the right then we're going to have a delete button and I I can delete one of these entries the good news is that we don't have to start at Ground Zero because there's the react native gesture Handler which actually has has a specific component so we can scroll down to components and there is the swipeable and they have some great examples for this swipeable and how we can use it um I think we have installed the react native gesture Handler before let's check out our package Json uh react native gesture Handler yes the only thing I would probably add here is the heptic plugin so it's always nice once you remove something to give a little itic feedback which is like a little vibration so I will install this but I also don't want to uh do a new pre-build right now I will just include it I can't really show you the vibration anyway I will just include it and you're going to feel this in uh or on a real device so let's get back to the Swip if you scroll down that page there are examples there are actually two great examples there is an apple style swipeable row and the Gmail style swipeable row I will will once again take that code here for the apple style swipeable row which is actually not using reanimated but animated from react native as far as I know uh so that could probably be updated in the future I will place it in components let's do a new um swipeable row. TSX and paste in everything and I will also call this now not apple style swipeable row but just swipeable row okay um we can use this basically as is we can now go back to our view as we were before uh before and put it in our render item around everything so I can just use the swipeable row and put this completely around this animated View and as a result I get this so this is really really great um I think this is a great implementation from react native gesture handl it is so easy I just dropped this in and it just works mostly this archive thing doesn't work but again just like before once we had this in big we knew we just had to customize a bit about this and this exactly the same so let's get into this um what we want from this component is also uh to know if we click on a button here I don't want to alert I actually want to inform the parent that something happened that we need to remove this so I will change this here the props with children uh from type unknown H how do we do this um props with children can we just have like our own type uh type swipeable row props um and then have uh another function that we call UND delete and then we're going to use the swipeable row props instead okay that looks better nice yeah uh this is pretty much oh no no I broke this oh no no yeah yeah everything's good so now we just need to implement the on delete here as well let's have another on delete um and that one should know probably let's call this remove call and to remove call we're going to pass our item because it's actually a void so we're want to call remove call with the current item of the iteration that kind of makes sense okay and then I want to yeah prob I just want to um I will give this now any I don't have the type right now okay and on delete should be called on delete let's call it it somewhere here can I just say uh this. props do undelete okay let's see yeah nice okay so it's of course happening every time right now this is incorrect but we've now uh successfully extended this component with our own undelete function okay good additionally this is the time if I remove a call I will call my heptic plugin um oh come on heptic do impact async oh we don't have the heptic import yeah uh let's add this up here so from Expo htics uh impact feedback style light this should give us a nice little vibration once we remove something okay cool now onto that swipeable Row first of all I want to disable this left swipe archive I don't really have use for that right now so we don't need it that means we can check this out okay we got render right actions uh close here is the actual implementation at the bottom so we have some styling down here which I can definitely also change in a second uh we can remove left actions um I don't really do I need unswipe open I will leave it for now but I will remove everything regarding left actions okay so now we have no more left actions and that also means there's probably some code that could be removed yes right here this whole block can be removed so I only have render right actions left for the right actions I also kind of just want to have one action I don't really want three um so let's remove two of them call this one delete and I will give this like a width of 300 and also change it here okay as a result we have a big delete we maybe just going to do 200 maybe 300 was a bit yeah that's better that feels better okay um do we need anything else I think we can basically keep all the interpolation stuff as it is we have the handle RI action um press hand out will close this um and delete this I don't really want to alert a window anymore okay I think we're actually good here I'm I'm kind of surprised uh or maybe if we close that row this is the place where I will uh call my delete okay um then also if we completely open this um we could attach something to delete it now but I kind of feel like it's doesn't feel good no we're going to keep it exactly like this exactly like this and this feels great great um because then we have everything we need we can remove also these two events we don't really use them uh we got the friction we got the right threshold and I think this is a great swipe and delete so yes you could certainly catch the action if you scrip uh swipe it further and then um one of these events will be rendered on swipeable open so uh if I hit save and then go here you would see okay then would log again on Swipe open uh now it's closed but it has a little delay and I never felt good so I kind of feel good about just removing these um and having it like this okay this is the first um the first step so we have this successfully wrapped in a swipeable row now we want to toggle or use this edit button to uh display I've shown you this purly before a lot of these red boxes here in front front and this is somewhat challenging because this kind of completely breaks our layout and we have to be very very careful okay so let's begin uh we have unedit in which we change everything that is good um we now need to use reanimated ourselves because there's this time not really a packet that we can use for this so let's say we have a shared value use shared value from reanimated we going to set this to minus 30 okay so this is a value that will be tracked actually not in JavaScript but in the native land of our application and therefore it changes and can be used to animate our app once I press here on edit I will update that value so editing. value will check if my new editing state is done is like true or false and then set it either to zero or back to minus 30 so basically basically we're going to have the icon always here and then we move it to position zero once we start editing that also might means we have to shift the rest of this row and keep it in a view and move it to the right hand side so this part is hidden okay so this is really a little bit of a challenge right here with our shared value we can now create some shared styling so let's do this first const animated row Style equals use animated style from react native reanimated uh okay and then we have our function here in use animated style we will return um actually let's put another pair of brackets around this um I feel like we don't have enough brackets right now but maybe this is just me um we're going to return the transform parameter and change this to um translate X exactly what copilot already gave us translate X to uh editing. value okay that should be fine um I feel like cannot find can you just import it from reanimated thank you and then we have uh use animated style then we have too many or a missing pair of brackets it's either the one or the other uh then we have two okay where are we going wrong here um do I have to return something I don't feel like I'm doing anything wrong in here I mean this could like be whatever you shouldn't care about that um did we get the import right i' use animated style uh from react native reanimated this should be correct uh do we have to specify it up here no not really um come on where did I go wrong I will just bring in my exact line after this um is there any difference here where is the difference between these two like I just have with time in there uh but otherwise it's completely the same this is mindblowing I don't know so if we use with timing um for editing value it's not getting better like it is exactly the same con animated use animated style what is going on here this is driving me crazy the lines look exactly the same how can the one be wrong and the other one correct I figured it out I had transform in here not transform oh my so everything was fine okay okay what do we do well with the use animated style we're creating a styled object pretty much like if you would use the stylesheet API but this time it reacts automatically to changes of that shared value which is tracked in iOS or Android uh with a native code so that means it will automatically transform our uh values and we can now use this animated Rose styling um on our page additionally um actually I think we can use pretty much the same uh let's give it a try um so let's heat over to our items this is now going to be challenging um I want to put H let's be careful I need to have the icon in front of it here um and that icon needs to have the what is this no this is certainly not what I want um I want to have an touchable opacity and that touchable opacity needs to be animated if I want something like that which is not included automatically I can create my own cons animated touchable opacity by calling animated create animated component with that component from react native so this is pretty much the same like animated. view but now we have it for a touchable opacity so I will use the animated touchable opacity uh on press I will actually uh remove the call Item and for the Styles we're going to use the uh default Styles dot no not really the default all styled item I think I just want to use the animated row Styles now I will close it and just get started by putting in ionicons name I think I want to use remove outline okay so now the row becomes a bit bigger and something actually happens so see this red thing okay this is not too bad this is not too bad but we now have to make sure that every here in our animated view is aligned with flex rows so let's go ahead uh Flex row and align items Center okay okay yeah this is not too bad this is not too bad um besides the animated row styling here um let's see what else do we need why is that icon so small why can't I see my icon what if I put in some sort of like petting left of I don't know eight what happens then that actually looks pretty legit um but I think remove outline is wrong this should be remove Circle yes nice this is good this is not too bad the only thing that's bad is that these icons are kind of stuck uh too far at the right so the only thing that animates right now is that first part of the view but I actually also need to shift out the rest of that view so now I need to figure out this should be the container of the rest of the item it has this item styling so I will now also give it the animated Rose style okay let's see uh reading directly okay whenever you get this error you know you made a reanimated mistake and you usually forgot to add uh animated dot in front of something so let's hit retry no I don't want to go from there again I should have a session okay better better okay yes nice this is exactly what we wanted so by the way I can still use it as a swipeable row no problem but now I can also trigger it and I can delete the stuff because I hooked into our own functions that wasn't actually too hard um we just had to make sure that we have like two blocks and then we can move this one block to the side and meanwhile this other block comes in not too hard once you see it in action and once you understand what's going on but fin finding the right elements to animate if you try to like have this hidden and then show it in that row you're going to have a lot of problems initially um so yeah this is how it works the only thing I feel is we could have a bit more petting left here let's give this a try with some like 20 petting left what happens okay that looks okay yes I think this is better let's check it out m it's probably a bit too much maybe 10 yeah yeah but then it's close there we could probably animate that as well but I feel like uh we've done a great job here so yeah I like that view I really like that view I hope you like it too let me know in the comments if you haven't done so far uh is this your uh favorite view of this clone so far uh and also would you like to see more of these micro animations and how we can use reanimated and stuff let me know I know I haven't done most of this I've just pieced together the great uh segmented control here from Eno and now the swipeable rope from RE native gesture Handler only this first part here is my own Edition uh which is a very short Edition but I still feel happy about making uh all of that work together so with all of that in place I think we have done the Cs View um I think this is a great view it looks good uh it is interesting and has a lot of functionality and once you feel good about all of the stuff in here let's continue with the next view we have successfully finished the call screen and we are now moving to the next one which is the chat screen and here you can see a preview of what we want to do with that screen so the action plan is that this will actually be separated across a few sections in this video again first of all we're going to tackle just this screen so that means we're going to have this header bar set up again with a bigger title and this list of items but on top of that because that's quite quite static we will also already do the uh swipeable row stuff again with a tiny bit different setup um to achieve something that looks like this once we're done with all of that uh we're going to move into a little model so we're going to have a new chat model uh as we can see with the iOS stack card layout and we're going to also talk about this here which is like an alphabet scroll we're going to have a section list with sticky headers and data in that list so this is going to be interesting as well and once we're done with that we will of course continue with the actual chat view so this would be our chat view with input area okay that's the rough action plan for the rest of this video uh and by the way we will also do something special for that chat in the end so we will also try and do like a reply gesture so we will able to pull these chat messages here and then we're going to have this reply area at the bottom again with the support of the community who has already uh done a great job but for now let's get started with the first part which is this um again we will use some dummy data if you pulled in the assets you should already have access to that data and we and continue just like before on the calls page and on the settings page we will start by adding a new chats folder and I will just shamelessly copy over the layout from before and I will move the chats in here and call this now index TSX and for the layout file we're going to change this to chats um we're going to change also we have the header Lodge title we have the um I actually don't need that because this time I kind of want to use my blur that we uh already teased before so I will use header transparent true and then uh header blur effect I think on this page it comes through really really good so I will just use the regular we can play around with that later um we will also use again our search area um so can we uh yeah we should probably for debugging also change how we route forward in our top layout file so then we will always be brought here okay we see we have a duplicate header so let's go to the T Bar definition and for chats disable the header good that's a good start and as far as I know I think this should actually have a like a white background um let's see header style uh background color I will go with white here I think this page for some reason the chat's page on on WhatsApp is just like just white okay um we have a header right button or we actually need two header right buttons so let's replace this with a simple view okay from react native and we also need the link component from Expo router because the second button will actually link to our model can we just do a Reload and get to that page yes thank you you okay so there will be a second one probably I will just comment out the link for now because the link HEV won't work or I will just change the at to something like this so now we do have the two buttons and we also need the header left which is pretty much the same um so we can easily Define our header area and again we have the search bar just like before so all of that should be feel or should feel quite natural to you at this point at least I hope so so for for the chat page I was thinking that uh first of all we can use the same scroll View Behavior that we had on our calls page so let's get this scroll view here and put it in here okay scroll view from react native okay so now we can scroll and we have this header effect going on already that's good because of the content inser adjustment behavior and inside I want to Rend a flat list of items and for every item I want to put this in a component because I think um this is just a bit cleaner setup in our case so I will call these let's call these um chat row probably yeah chat row. TSX okay we got the chat row then we're going to place a flat list in here from react native um the data should come from our chck CH Json file so let's put in the chats data here and then use it as the data then we have our render item function which in this case has an item could we for debugging use this yeah let's just render it from okay yeah then we have our list then we need to disable scroll just like we did before because we're nesting our lists okay um then we have the item separator and we have the key extractor so oops key extractor in this case um could be item I think the ID it's actually already a string that's good and the item separator component um I think we had like um didn't we had like some default styling for that uh let's see if I use um an array of default styles do separator yeah we have these arrows and as far as I know we will later uh apply another one to have a bit more margin to the left so I will already do this uh this will overwrite it because we're going to have like an avatar here and therefore the line should just start here the separator and otherwise it would start here okay good um this is actually everything for that page um now I want to render of course not the text but my chat row instead and I want to pass through everything from the item so we'll just do dot dot dot item and pass it to the Chad row okay now we just have the Chad rows and we can go there and Define the interface so the interface now comes from the actual message so uh I'll bring this in this is the interface chat row props so all of this comes from the data we can check it out under under assets data this is the wrong page assets data chats so this is one of the chats and if we check it out I think I just used this actually so there's a little trick how we can do this you could just copy all the data go over here and then press uh command shift p uh in Json to TS convert from clipboard which would give us exactly this root object and I just changed that to an export interface Chad R props um so make sure you install that package I really use it all the time okay now we just need to tell that this chat row actually expects the stuff uh because right now we can see uh Ty has no properties in common with whatever so let's do this we could do it here and say uh FC chat row props functional component uh do we need a special yeah we probably need the import from react uh is this already enough I think it actually is this so I would destructure this now so we can easily access everything oh why is it not easy let's do it like this image message R unre count okay and now we should have access to everything so I could use uh from in here and then we would have our list again okay cool so we have now our own component separated and we can play around with that component um I also want to probably do we want to yeah let's probably make the general styling first and then apply the the swipeable row stuff so each of those should actually link to um a sub page okay we don't have that Details page yet so I will just link to SL for now and use as child as we're wrapping other components here and of course we will not just render the text but we're going to render um touchable I will use aou touchable highlight this time not a touchable opacity I noticed that clicking on these in the actual WhatsApp application looks different maybe we can take a look at the difference uh at a certain point so let's use a touchable highlight instead and then we're going to place a view in here or we have the flex Direction row uh I probably want to align items in the center and then we can start constructing our row if we want to so first of all I would place in the image uh can we just add the image up here thank you okay this gives us the nice little Avatar image next to that um we're going to have the text so I will do another view in here with a style yes Flex one uh I don't know what copilot is doing here I will check this out in a second um I don't really want to use margin in here I actually want to use more like a like a gap up here so let's use Gap 14 that separates the items um a bit of petting left probably yeah and let's probably also add to the bottom petting or in general petting vertical of something like 10 okay not too bad yo now we see if we press these uh oh no this is oh no no no oh no no no I shouldn't do it like this uh I should do it like uh I want want to stay on that page can we just go back there oh my um so if we click on these touchable highlight elements you see it's turning black we could change this to a touchable opacity here okay let's get the import correct and let's see the difference this would turn it like some sort of whitish overlay okay um but I want to continue with a touchable highlight and we can now set the active opacity so this is really um cool component okay we got this so now it's still black but we can now also tweak the underlay color I will use my own colors now so let's use the light gray color and now it turns like this like we have this little grayish overlay um and I think it just looks a lot better also I feel like this page should have a white background so something is off in here um I would probably attach it here in the content container style so let's use background uh background color of white that didn't work well um because we're in the wrong file of course so let's close this again and let's go to the uh index here this is the one for the chats page so in here background color white and now we have the effect great now it also worked good with the header component um some of these are blue why are they blue a co-pilot already figured out that there's a difference that is interesting so yeah it is interesting but not correct so I will replace this I want to have a bolt from up here and then we're going to have um a gray text style here and I will um use a substring of that message because otherwise the message might be too long and I just want to have like a shorter substring of that message and after the view we're going to place another text for for the date so in this case I want to use yes colors gray that's actually correct um and within we're going to use our format function from date FNS once again so let's put in the date and as the format I want to use uh month. day. Year all right um this is a bit tight let's get some petting ride petting ride of like 20 we could also give it to the whole row uh it looks good I think that looks good I think we're doing fine I also had some alignment issues before which I corrected with align self um Flex start so you see before it was like in the center and now we've easily moved it up so it's in the starting Flex of that box so we have like this is a box this here is a box box and this here is a box and now it's in the flex start before it was actually in the center and that's how it looks in whatever um and just like a little correction of this okay um I think this is done so far so now we want to add the swipeable capability to this row we have previously already used from the react native gesture Handler um a different kind of swipeable row now I actually want to use exactly the apple style swipeable row so let's add a new component here and I will call this apple style swipe apple style Swip r. TSX okay and paste in everything that we had okay this should work out of the box now I will wrap my component my chat row with this apple style swipeable row okay okay put it completely around the link component and voila we immediately get this once again we have this archive to the left so we really want to get rid of the uh render left actions again uh we could probably make this a dynamic component to Define like the right actions um that would kind of make sense I guess uh but we're also I think we should be fine just like it is uh um in our case we don't really need uh everything of these we just need more an archive so let's change this to more an archive and use our own colors and for the whz I think we can keep it just like it is should be fine now we can remove render left action we can also remove the locks here uh because we don't really uh attach the filtering function and we have more an archive I think in my example I also had icons so maybe let's put in some icons here um this is also left action okay we're not using the left action so that can be removed but that blue oh yeah that's actually the right color that's the the muted blue is correct okay not too bad um but within the actual rendering function of these right views uh I want to keep it like it is but I want to also add an ionicon in here and that's the cool thing it is our own code we can change it as we want uh we're taking this Grand or great example from uh from the rec native gesture Handler and just put in like our own addition to how we want to make this so uh size 24 white maybe some petting as well let's see petting top of like 10 yeah that looks pretty good so for more we're using the ellipses horizontal otherwise we're going to use let's say we're use archive do we use trash I don't know yeah archive I think this is this is good this is legit good um for our action we have a font size of 16 I think we can keep all the rest you just see that by using the stuff that's already out there once again we don't have to reinvent the wheel we got everything we need we could now attach our own actions to these buttons if we needed to we can filter or do whatever we want and we've pretty fast actually we're getting really fast like this was just 20 minutes to create a reusable chat list including swipeable row including this iOS custom header stuff uh within our tab bar so hope you're getting used to the stuff because now we're taking on something a bit new which is the model to add uh or create a new chat all right so let's talk about the model to create a new chat or in general the UI for that we're going to see or we are seeing this pattern uh in the iOS application for contacts and I think in other places as well which is sometimes called an alphabet Scrolls you can click on one of these letters and you would get to the according point in the list additionally uh it's a model and it has some sort of section list so I was initially thinking that we could go with a section list um so a section list looks like this essentially you can make these headers of the section sticky and there's like a native component um which uses I think a flat list under the hood but it is nonetheless called a section list in react native however I couldn't find anything that added this alphabet scroll on top so I ended up finding this component which is 2 years ago uh last changes I think that's okay it's acceptable it's not the perfect component but it came as close to the best solution as possible so let's add this package by installing it in our application uh no whenever I press that it's just going okay here we go and on top of that we will have to create a model so this is talking a bit about Expo routing um this model should be pretty much besides all the rest of our application so I going to put it up here and I will add a new group models and then I will call it uh something like new chat. TSX okay and we have reate functional export which is our page cool uh let's include this now in our routing uh first of all we need to include it in uh where where where can we like trigger this uh on the Tab screen on the chat screen at the top right uh then we commment this out somewhere yeah here so this is now under can we just get auto complete yeah nice models new chat okay cool if I press this button I would now get to the new page however this is of course not the right way to present our model so we will add another entry at our top stti layout so I will just shamelessly copy this one and use it for models SL new chat all right uh and now we can play around with this so first of all the most important part here is present presentation model if we just change this it automatically on iOS becomes this on Android I think it's just a full screen model now there are a few things uh we need this button to close it we want to have that search bar and we also want this header to tie in in terms of the color nicely with the background so let's get started by defining the usual stuff uh we're going to have the header transparent uh use the header blur effect of regular okay so we scroll something below and then we have our background color by the way did we apply this here and uh I feel like we don't see the benefit of that uh let's go back to the layout here is it because of the header styling here yeah uh okay okay now we would have it [Music] hu that's interesting can we change this for like header big title large title large title style huh good question good question can I say like the background color no I can't really it's more about the actual title so it's about a text element not a view that's a Pity so if we set a white background here for the header it looks like uh we can't have the blur effect okay so this kind of blur effect but I want to have that blur in this state and then leave it huh I assume it's not as easy as that so on the calls page this would actually work really nice if you don't give it a some sort of color uh on this page it's not exactly working I wonder how the uh Native WhatsApp application is doing this probably there's some sort of uh setting if you come to this point and you figure out the right settings please let us know in the chat uh in the comments of course uh what a solution solution might look like okay so now we got the model that's what we want to talk about uh and we also need a little header search area so let's add a header search bar options we get this nice little input and we finally have the header right button as well in which we can just put uh a new link component so once again from Expo router touchable in uh opacity and ionicons from Expo Vector icons so that should give us a little Buton up here and clicking it will bring us back to tabs SL chats this is currently the only page from where we can come we could also like call something like pop here or use the router but this should be fine in our case now let's head over to the new chat page um we're going to have some data so we're going to use my context Json data which looks like this we have a first name last name image and description however the data of the alphabet scroll uh expect something that looks like a value and a key okay and we can do this with by iterating the data a tiny bit and creating our own version of it so I will map through all the contexts this will be the value so this is like the name uh or the value is used more for the alphabet scroll then we have also the name uh an image a description and a so we can actually have more data than the alphabet scroll shows in here you can extend that um as you see fit then I will just take this and get started with it so in my view I will use it like this let's put in the alphabet scroll um do we need to implement these that's a good question I wonder uh let's see I kind of I would love to just give it a try cannot find name alphabet list um let's import it correctly from here okay there we go so we don't need to render a custom item or a custom section header uh we just want to get started and we see uh basically we have everything that we need but there are a few things of course so the section header is not sticky yet um this blue is not our blue uh additionally I want to have these rows changed so they have like an avatar text description uh and also we see at the top there's something if I scroll I can't even show you it's there's something hidden behind that bar why can't I show you I could it did work for a second H it's just like well there's something definitely hidden so I want to change my view styling here and I will add padding top because I feel like this uh alphabet list doesn't know about our actual thing so yeah because a the letter A was actually hidden oh no it's also sticky nice Ah that's good um on top of that I think I want to use my own background color so background color should be colors. background uh it should match nicely okay uh we can also say sticky section headers enabled but I think they're enabled by default now we can get into the fine tuning so the index letter styling of course we don't want blue we want colors. primary here okay this turns it into our and I think we can go with a bit smaller font size I think yeah 12 is actually fine now there are more settings there's also index container style so in the index container style we can Define styling for this little alphabet list at the side so I will give it a bit more with cuz I think it's too small so now it moved away from the side a tiny bit um and I will actually give it a background color I think uh let's give it a background color of colors. background so it looks like yeah we're going to correct this this will at some point look correct I think if we give our list some space to read so you know in reality it should all look like it's just one piece and not the different parts are like not connected we can do this just by saying stop here uh and give this margin uh left margin left of 24 as well yeah I just need to figure out rounding this I think this won't work very well but we're going to get to that point in a second um then we can define a custom section header custom section header uh so for every section we can render how this should look like I will go with the View and some styling here um then we can use section. title that's correct actually that's mostly uh good already but I would like to do some more styling so let's add a stylesheet okay and I want to add a section header container like this so we give it a big bit he use our background color and then justify the content and also attach some padding we just need to add stylesheet as always from react name and then use those Styles in here so styles. section header so now they look pretty much similar to our list but the list will actually get a white background color so that shouldn't be an issue um for that list item container we should now render this uh so this is pretty much the last setting we need here so let's render a custom item um this is already what uh I think this comes actually here do we get any styling I think there were examples so if you dive into this you would probably find some examples colors data sizes no that's not going to be helpful but here we should have the list item container okay so let's get the list item container going on uh hate and petting horizontal I will just set this to something like 14 because we use this all the time and I will remove the Border we don't really need a border anyway uh so that is is the list item container for the hate I don't exctly know what the hate is going to be uh do we need list item label I wonder not really let's remove that styling for now because we're going to actually render multiple things in here okay this is not looking too bad yet uh but we should certainly let's see we're going to place our other elements in here so first of all we have the image uh Source should be our uh item. image and I will just call this one any for now you can Define types if you're working with this feel free to do so uh the list item container I just noticed should have the flex Direction row as we can see we're not aligning these things in a row yet and I want to align my items in the center okay good uh we definitely need some gap between them and I will now give it a fixed heate of like 50 I think this yeah okay mhm mhhm uh align item Center I wonder I honestly wonder why we um why I look so bad we're going to figure that out um probably because we don't have another view yet that could make sense anyway let's see uh we're placing another view where we have a text element which has I think item. value item. value and another text element which is the description so these two should look somewhat like this uh I still wonder why it's not expanding correctly as it should like the stuff should actually be aligned do we have to give this one here Flex of one I don't think we need that although it can't hurt actually um but my render custom item view styles list item container uh row Center OH justify content is is still set yep that fixes the problem nice and of course we need the background color to be white and then we're pretty close to the desired effect I think uh the only thing is in reality there's a separator between them if we use the separator component of the alphabet list or the section list uh we get that in places where we probably don't want it or it's not looking correctly we get it at the top so I will just manually Place one in here uh I think it's probably not the best way but in our case it works pretty good so we're can have a view style we actually can use once again our default styles. separator um oops uh too many yeah default style separator and now we see that it's again too far to the left side so we're going to add some actually why we got margin left is already set to 50 I can't exactly see it can we make the color like primary uh okay that's yeah well it could be probably be more than 50 could be 60 I don't know it doesn't really matter like yeah we're breaking now other pages I I don't want to do that so let's just keep it like it is uh now we got a nice separator more importantly this also works nicely we haven't touched this yet so yeah this really works really really well um we I feel like we have too much margin on the left side yeah I wanted to have 14 not 24 and now that view feels pretty yeah that feels really good uh in reality I found that WhatsApp has actually rounded Corners here however for the sake of my life I couldn't figure this out because if we render a custom item uh and if we give every item rounded borders it's just not working so I would need not the render section header but like render like I need a render function for that block um I don't think there is one so we have render custom item render custom section header which is this and render custom list header which is something totally different we have the index letter styling and the letter list this is just to the right hand side uh and then we have yeah not really anything that would help us like the actual view of one section if we could style that we could give it round Borders or maybe there is some sort of hecky way I just can't like can't figure out one we could probably check if this item is actually the last in the section can we do this um I don't know if we can have like a check for the last item of a section that could probably help us to like attach only borders at the bottom but you know this is like really really Minor Detail stuff that we probably uh can't figure out in here as it would take us a long time I think we can be pretty confident and happy in about this screen as we have a section list and we can use the alphabet scroll to navigate you can now have click events and then go back then it would start a new chat and speaking of the chat that is now the focus for the rest of this video as we move into the details page we have finally arrived at the final screen of our WhatsApp clone which is the chat so the chat is interesting because while a lot of applications these days have a chat component I think you were most interested in this um there are a few things uh we have a bit of a custom header setup on that screen that we need to talk about then we of course have the whole chat area here and we also have somewhat of a custom uh setup down here how can we do all of that without Reinventing the wheel we are using the best chat package out there which is react Nat gifted chat this is really the most complete chat UI it has 30,000 stars on GitHub it is an amazing package and we will start by first of all installing it where's like the install command actually do I need to use my own well well we can do that no problem so let's npx Expo install react Nat gifted chat then we need a page we need a page for our chat um we could get like the ID it doesn't really matter but yeah let's do it in the way that you would normally do it which is like using an ID in the name r native functional export for our page uh and we could access that information in here now we need to change our our chat row to link to that so we want to link to SL tabs SL chats SL I don't know 42 or something um doesn't really matter too much U or we can actually do this dynamically as we do have the ID so I will pass through the ID although we're not really making use of it so let's pass the ID in here okay now clicking on this brings us to the page which actually gives us this nice little transition of chat now has a problem with this page I don't want to have the Tap bar on that page so um I could probably move it here so you see the Tap bar is still visible um Additionally the header area should look a bit different so where do we start uh we start by defining an entry in our chats layout file so let's move down here and let's add a new entry stack. screen name in this case exactly the name of the file so so I'm really using the brackets in here and then we can do the usual options so first of all I want to set the title to an empty string um and I want to close this so I'm not messing things up also I want to hide the header back title so we can do this quite easily header back title uh visible false okay that hides it then we want a custom view for our header title because that should actually render um this like user chat bubble uh and some some other value so let's place a view in here and within that view I will first of all place a simple image so let's add an image from react native so we got my image up here okay not too bad uh additionally I want to have a text next to that image oh I don't have the text yet come on like at these easy things automatically it's not that hard my oh my oh no no honestly this is like such a such a I don't know because now I have to really close this again it's like a major fail here of that app and I have no idea why it doesn't really make any sense I just forgot to import that one little thing and that's completely completely causing this to like blow up it's yeah it's it's not deserved I did better anyway um yeah I ignore that so here we go we got this um my title is below this so let's add some styling up here we're going to have to put this in a flex Direction row to make it work uh we definitely need some gap between the items okay I want to introduce some petting bottom of like four um then I want to also align the items in the center and I want to give this a specific width so I will give it a width of let's say 220 okay that moves it here um I feel like this should work this is not too bad is this what I wanted um the image could actually be a bit bigger uh we have the hero title we probably what happens if we add the header right because we definitely need header right buttons maybe this moves the things we have around already so let's place in the headrow right just a simple view with two touchable opacities yeah that moves it so you see if I comment this out we're definitely further in the middle if I add these it moves the things here if I now don't use the width uh I would still be in the center so I will add a fixed width to our component and then we have these buttons up here okay so that transition works H rather smooth I would say it's not perfect what is going on with that back arrow uh interesting uh but also I want to add my own header styling here so let's finally add header style and then background color not white but my own colors dot background I think we have colors on this page already all right good that should be fine for now U maybe do a Reload does it make any difference I don't know I have never seen this jumping back arrow uh had our back title visible honestly not sure but we do have a bigger problem we still have the problem of the bottom Tap bar so how do we get rid of this normally I would advise everyone who's asking oh still I I I do have a bottom bar on this or that screen usually the problem is a setup of your layouts with Expo router so um if you don't want a Tap bar don't put the page in the Tap bar layout which means I would have to move my chats page or this chats Details page a level up however then it's not in the TS folder anymore just like the models models could also be probably be here and it's kind of not authenticated so I will have to do a bit more checking of that on top of that I found more problem s if I move my Details page out of this stack configuration because then we're uh on this page this is like one stack and if I now go to The Details page this is actually a different stack as it's like the the top stack and I noticed that this nice transition with the bigger Hera title just looks awful if we move it to that place so I think there are some open issues on GitHub regarding that transition and how to make stuff like that b better in our case what we can do is uh and that is what we going to do uh we will go to our T by layout so we're going to go to the tal layout and we're going to use the segments so we will introduce con segments up here equals use segments again I'm not a big fan of this solution but this was kind of proposed on GitHub and it's I think what works best but I'm I'm not a big fan it's it's not perfect definitely not perfect yet um now on our chats page we can have header shown T Bar icon is cool and we can have a Tap bar styling so in the T Bar styling we can actually hide the T Bar I really dislike that but let's use background color first of all uh to make sure it works and then we can use the display property so if I set display to uh not false uh To None what happens is on this page we have no uh tab bar anymore but of course we only want to hide it on the actual um what it work if I go here on the actual details page so we can now check the segments and we're going to check the segment at the index 2 if that one is equal to ID so the name uh of our page we will hide it and otherwise we're going to use or I think we could also use block let's see so now we see on this page we still have it and if I go here it is gone the problem is you see when you go back it kind of comes in a bit too late I don't know how we could make that any better um as I said I don't think it's the best solution it is one solution probably you could also play around with having the ID page out of the layout at the top level however we're going to go with this solution for now um if we change this to block would that change anything no we can't actually have it to block it needs to be Fleck um I will go with this solution for now and leave it open to some smarter people than me to correctly figure that out with that being said we have arrived on our Details page so on this page what we need to do is render the gifted chat uh this is actually not the page this is the page okay so how does the gifted chat work first of all I will add my own uh values my own data from my Json so we got some message data then I will check the documentation of gifted chat so let's bring in gifted chat and also use their uh import here and then we have an array of messages or or state of messages actually I want to um I kind of want to use my own messages so they have this use effect block here we're going to copy that as well um within I will not set it to message like this but what I want to do is I will instead use all the data from my message data and I will map it to the correct format so you can just have a function object here um let's see if we can fix the brackets correctly okay I think this should be it and what we need is an object that looks like this um so we return the ID you let's see let's figure out the brackets um think we got like another pair here uh come on oo I love it set message data definitely just needs one closing where is this closing coming from oh my come on this is the user ID then we have the return then we close the function then we close that I don't have a comma here then we close what is wrong oh yeah we just need to change the type so type here should be IM message not iMessage um and iMessage array to be precise and we can get this from gifted chat as well it's just the internal format used uh so I message goes in here oh come on what is this this is like the worst Mis pronunciation ever good so this is my message array we can actually have like a a bot message included as well so that's quite funny I can add one like this which has system true uh and this would be be displayed like usually you see this in WhatsApp and it says this chat is protected by whatever uh your chat is encrypted or something like that then we have the unsend function which is already given to us by gifted chat which is pretty nice and then let's just bring this in gifted chat um comes in uh on send I want to what do we send on send messages uh I think I need to add just a type here can I just add iMessage or I don't want to fix this right now so let's add any and voila this is pretty cool I think this is probably one of the most impressive things about gifted ched it just looks really really good out of the box so let's see what we got here if I scroll to the top I actually see my system message of all your B belong to us um then we have messages from other people and from myself we can Define this by setting our user ID here um so it marks the different uh messages from the different participants we do have a text input at the bottom however um actually it works pretty nice it's just a bit hidden behind that safe area but what we want is something that looks like this so that means we need a background we need different colors um and we certainly need a completely different bottom area but the great thing about to chat is that it looks pretty good and works really really great out of the box but you can also um apply your own theming your own Styles your own logic your own views in pretty much all the places however let's begin by adding the background which we can do with an image background component um I will not bring in the image I will just use require this time because I'm uh getting a bit lazy so let's put this around the GI a chat so I shouldn't close it but instead close it here okay um now we also need some styling to actually make this cover the whole page and then we have our uh cool little pattern here in the background um do we need like a margin I feel like I could probably add some margin to the bottom uh but we're going to talk about that later or do we want to talk about this now we probably should talk so I think we used the safe area insets before we're going to do this again so I will just get the insets by using use safe area insets usually it's a better idea to handle the safe area uh directly with the insets instead of wrapping your whole view in the safe area view because that just like yeah does its thing it's like throwing everything at it um and with the use safe area inserts hook you just get a lot more um control over over what's going on so I want to add margin bottom of insets do bottom and I will already move the bar a bit up however I don't want to also use my own background color in here so let's probably add uh a background color background color of colors. background okay so this is my own background color now where do we begin with the styling there's a lot that we can do um first of all I want to add a state as well for the text input um so we can keep it like this now uh we need to define a bunch of things we need to Define how a chat message for us and for somebody else looks like um so where do we get started um we probably we yeah we we need to do a lot of of things it's the problem so I think um we just start by changing the render bubble function okay render bubble so render bubble Ren renders the bubble in the chat guess what uh we just need to make sure we're closing the right brackets and then we can return a new style for the bubble and the cool thing about gifted chat one once again is that um there are a lot of components you can for example check out the slack example here and you're going to see how they do it in different places like how they uh render different things how they overwrite parts of gifted chat um it's just a good way to check out what's possible um there are different oh example Expo nice I didn't know about that one custom actions custom view data that's interesting uh I didn't know about that one however I think there was something for the bubble that I found and the cool thing as I said is that we can actually have a bubble component from gifted ched so we can go up here and use bubble and by doing that we can still use everything that gift a chat is doing out of the box so I can say I could just now say um that bubble gets all the props on the spread operator and nothing would have changed okay and this is always a good point because that feels like okay I can touch something I can overwrite it but I also got the safety net of okay this is how how it looks like and how it works um same is true by the way if we now want to let's say change the render system message so this is the one we had from the bot at the top we can do the same pattern so we can have a system message uh it's pity that the import is not working correctly because the system message as well can be imported from gifted ched um I think I have one I need more of these don't I oh comma um render yeah there's definitely an issue here what is this um props this should be uh inside like this I could put this into regular brackets that should be better shouldn't it uh do we have the system message where am I going wrong here help me out do you see the issue you should be you're usually the ones to help me out so this should go right here what is your problem with the renderer system message my friend uh render system message we have the props we have the spread operator on system message what's WR wrong ah we don't need the comma I was wrong with that one so uh we could now change how the system message up here looks so for example I could change the text style and set this to uh let's say color colors. primary and then we render in blue up here of course I don't want that I will just change to gray but just giving you a feeling of how we can update these uh all these things with gifted chat also during input I want to change my text so this is just a little addition um I want to have some offset at the bottom so these are really sticky at the bottom so I want to render uh bottom offset using my insets um I don't want to render the Avatar anymore so I will say render Avatar equals null yep that get rid of it then we can move on to use the max composer he so the composer is what we will also have to uh override very very soon uh we can actually add some style object already re native stylesheet down here because we need some composer Styles later the composer uh will help us to basically create a custom Bottom bar there's a way to overwrite the input tool bar to overwrite the chat footer there really a lot of ways to overwrite this oh where did I sorry about that oh yeah while talking I completely messed up that we need stylesheet from here stylesheet um and so we will have to eventually work with a composer let's just wrap up the bubble for now so for the bubble we can now introduce use our own styling as I said we are currently just using this but we can now change it to look something like this that means we're still using everything from the bubble but for the right one we're using black text and for the repper style for the left one we use a white background color or a green background and therefore we have completely changed the UI while still maintaining all the goodness of uh gifted ched okay that's the first one but now more challenging is actually creating a T Bar a toolbar like this the challenge is that these are actually different elements in the gifted um ched so we do have this area which is like the input toolbar and then we have this end area which is usually a send button so we can check this out if we type a message we would see this send button and it would actually work because of the uh functions that we used with on send from gifted chat you could of course hook that into your own API so that means we have two areas that we need to tackle um probably we're going to start with the scent one so the scent one is an interesting one because by default in WhatsApp it would look like this but once you start typing it actually turns into this like thing to send like this paper airplane or whatever um so we're going to have to include a bit of logic to make it work therefore after the render bubble we will now render a special um view for send uh let's see I just want to get the brackets correct this time okay so let's start with a view and some styling that we probably need in the end and within that view we can now check is our text um yeah we can probably text length yeah if the text length is greater than zero uh we would render actually a send icon so this is once again pretty cool there is just like the bubble and the system message there is also a component for sent within react native gifted chat so I can now just use this as is with passing in the props and then closing it and this wouldn't change anything this would only change the scent is displayed um oh no why did it remove the brackets I had everything figured out so nicely and now it removes these brackets uh anyway okay so let's put them again in here so in the other case that uh text. length is equal to zero I want to render a few icons so in those case I will just wrap them in an empty fragment uh then use ionicons name camera outline colors uh colors. primary and size something like 28 uh 28 good and then we'll just take this one and duplicate it and here we're going to use the microphone outline okay so notice we do have these icons and once I start typing it turns into the sent button that means of course we need some more uh settings here so we're going to use a flex Direction row that should already figure out most of the stuff but I would also advise to set the hate correctly and then align the items in the center and also let's add justify content Center let's add a little gap of like 14 between them and then probably also petting horizontal of something like I don't know 14 as well okay so now it looks like this and once I start typing it goes into that send button however I kind of want to change that scent Button as well so it's not just going to be this boring scent button um let's close it first and then come on send and then within the scent button I'm going to place another ionicon uh name sent colors primary so now scent has turned into an icon okay nice uh the problem is I also want to justify this so if we need styling I think we can use uh container style okay so the container style in this case should be uh justify content Center okay so uh not too bad it turns into this so I think this is a pretty good optimization of our sent button however now the second one comes which is um the toolbar so the other one we can customize is render uh the input tool I actually don't know why it's called Uh input put toolbar it's really yeah I don't I don't really like the term okay so I will place it in here as well um and once again just like before this time we will use yeah it's just not working so we got to make the import manually from react native gifted chat there is the input toolbar component and again I could use it do dot props and close it and we will have the same input toolbar just like before and now we can attach our own styling or our own components so let's say I want to have this add button I can now put this in here um can I grab the ionic and stuff because I'm lazy okay so I want to use add uh as a color I will use primary size 28 and where is that add button well it's probably not here yet um so let's see for our our input toolbar we also need some custom container styling because we wanted to actually have this pill form so let's see how we can figure that out uh let's use first of all I usually like to use just a red background so see okay this is what we are styling uh input [Music] toolbar where did I go wrong oh yeah this doesn't belong in the tool bar this belongs inside a special property inside a property named render actions so in render actions we can actually uh if we do the right brackets render our custom View and now it turns actually up here nice uh so we probably going to do this like blue can we see you with blue we can of course see worry uh even worse so let's use the final color which is colors. background of course and then I want to huh I want to give the input field a white color where did I have to place that setting I think this is now the composer styling that we in general apply to our gifted ched so at some point I created this composer styling down here I will give this a background color of um I will now give this one a red background and then I try to include the composer as text input props so text input props styles. composer okay so now we are able to tackle exactly the Right View we see there are some issues stuff is not aligned correctly uh but we're going to figure that out in a second so let's start by giving that not the red but a white color instead okay then we can have a border radi Rus around it border radius of like 15 okay this gives it the pill form then I want to apply a border width of one and a border color uh border color of colors light gray okay see we got this now you just need a bit more of petting so let's use petting horizontal um 10 okay so the text has okay so the text has some petting now I want to also change the font size while we are here to 16 um and then I want to add margin vertical uh something like four not too much actually okay this looks mostly correct I kind of feel like we should include some petting top yep now it's getting now it's perfect okay yes this is the input great so this is the custom styling for the text input um and before we were inside the custom input toolbar so this toolbar um I kind of feel like the render actions does not have the right uh styling so I will give this the fixed he of 44 as well yep then we can uh place like the content in the right place so justify content Center and I will also at the same time use align items centers so we should have everything let's also include some left value so it moves the button yeahoo nice so you see it takes some time to customize gifted chat but it worked really really great uh we can now move it up I actually had some testings before um I included some offset here and there or save area for the keyboard but overall there is already everything applied within gifted chat so if you don't mess up the hate the margin and that stuff the text input should appear on top of your text input so uh that should definitely work out of the box otherwise you kind of broke something okay I think we got it so we can go to The Details page we've customized this to our own little WhatsApp style we have the custom header we're hiding the Tap bar and we are able to insert something including custom Logic for the buttons now the last part of this tutorial is about the reply which is a very special gesture we end this big clone tutorial just like we started it by using great stuff that the community has created so we don't have to reinvent the wheel but we can still put in our own touch we want to create a reply gesture which means you can swipe these messages to the side and as a result at the bottom we have a custom view on top of our uh text input field there's a button also to close this so there's a bit of logic involved luckily I found exactly this in a big tutorial by reveal Walker from the tutorial is from 2022 so it works really really great however there are many uh images here in this tutorial there are many different steps so basically he he's doing something like this it looks a bit different from what we want but we can customize this to our needs because there's also uh the repository of this uh application so what we want to do um where do we start good question actually uh we will probably start um by setting up our state here so let's go to my chat page and to the top and I will add two things I will add a reference to a swipeable row um or to a swipeable actually from Rec native gesture Handler and then I will use this with imessage which is the format here we had before or I can actually say iMessage array or null so there are always like a few changes here and there that we need to change let's probably change this to reply message and to set reply message okay good additionally there is a fun function here included which is called uh update row rep we're going to copy that as well because this will help us to update the currently open uh replay message I think my message has just an ID as far as I know uh replay no actually it does uh ref any ref and ref replay current message. ID equals to replay uh reply reply not replay uh reply message did I use the right type up here uh I used I message null we got IM message from R native gifted [Music] chat should just be an iMessage not an array as far as I know so then we can also introduce it with null good that should fix the problem and where is the function here is my update row so we're not really using this yet but it's like a like a first step so the main logic here is that we will at some point have like a footer toolbar which is actually a bit different from what's done here in the tutorial but we're going to have a custom chat message box this is just like the custom bubble like the custom uh what else did we use the custom send button or the custom input toolbar this is now a custom component so we're going to actually place this under comp components let's call this chat messagebox do TSX let's put in everything and then we're going to soon find out what's not working uh in the chat message box but we also going to take care of including this now in our view so in gifted chat there's of course also a way to update the render message so in here I want to place my chat message box I will pass along the props just like we did before so Props go in um and then we have two more things in here I think uh we do have update row ref which uh updates the row reference so we can like update which uh of the messages is currently swiped to the side and then we have set reply on Swipe open so if we completely swipe this would set the current reply message good going back back to our custom chat message box we see a problem uh because progress animated uh in the random action does not work um I think we have to add type any here okay Simon I see what you did there um and then we also can we reload this view there was a problem loading the project oh that is not good uh why is that a problem loading the project I don't like that um I think we have a yeah we are using an image here that we don't really have so now if I go into a chat yep nothing has changed which is good this is this is actually good news if nothing has changed um or should something have changed oh it has changed right I can swipe to the left side however because it wouldn't would be too easy if we just accept that it works like this I want to swipe from the other side which is also on the other hand a really good example of trying to understand what's actually going on in this code that we just copied into our application so um I first want to replace this image with a material Community icon I will name this uh reply Circle and I will use size of now let's just use 26 and my own of course my own colors do gray okay what is this changing it changes this so now instead of the image we have this little friend come up from the side not too bad right okay the problem is that as I said I want to have this from exactly the other side so I don't want to render uh like this I want to call it render left actions all right so now it's doing the same stuff from here but the animation feel somewhat incorrect at this point so we're going to have to get into the uh interpolation interpolation super interesting topic there's an episode on the rocket ship podcast uh with Cataline Miron about animations and how interpolations work basically we're mapping from an input range to an output range the values um so what we can see is that for example normally this trans object which translates the x coordinate uh maps to - 12 and Min - 20 which basically means we're moving that thing to the left so okay we're moving the x value to the left of course what we want to do here is exactly the opposite so I will make this plus as a result it comes up like this okay I can open it and can I close it as well I actually don't know uh on Swipe open Action if props current message said reply yeah I think I think we're going to handle the opening or somewhere else because yeah right now this is probably not exactly correct logic um I wonder why that's the case um if I made any changes but I don't think I made any changes here so let's check back here uh we have set reply reply message and we try to update my row ref uh using the current ref we we have our reply message and we are using the ID um I think oh yeah there was one more thing uh that we had to include so we had to include another use effect block I think this is also somewhere here in the app TSX or in the app chat TSX uh so render custom render accessory update row rev and here this is the one so this one uh is called or triggered whenever reply message changes and whenever the reply message changes which it actually does it will check and close the currently opened reply message so with that in place it will automatically close this after a little delay which is by the way what you also see in the WhatsApp application I don't think it stays open I think it closes as well I kind of don't like this delay this is again coming from the swipeable so we've seen this before in the tutorial um this comes from the on swipeable open which is call with a tiny little delay um I honestly don't know exactly where that delay is coming from but it's it's not super cool uh I hope there's some sort of setting that we could use uh to overcome that anyway what we want now is also to have a custom reply message bar now above our footer we could by the way already do this so we could go into our gifted chat and after render chat message we can render a chat footer uh okay in the chat footer I don't really need anything uh but I want to have a component let's let's just do a view in here I will just do like a little uh view yeah I will just use whatever co-pilot gives me just to show you okay we can have this little typing area or whatever so that means this is the place where we want to render our custom um our custom footer and in the tutorial it was called uh reply message bar so we're going to adapt that by creating a new component reply message bar. TSX I will bring in all the fun here and again props to the Creator I just want to name him again check it out it is uh not here not there where is it uh Rec native chat swipe from uh G up no it's here uh from reveal Walker please check that out all credits go to him um so let's see uh we have the reply message bar hate uh I don't really have that so instead of using that let's just use it as a value uh we have the Styles down here why are they actually Styles um I feel like we are going to change a lot about this let's first comment out the images used because I don't have the uh these then what I also want is can we just just leave it out for now okay so now we fixed it that means we should be able to use the reply message bar so let's change this in our footer I will use my custom reply message bar and with a custom message bar there is a function I think to clear the reply uh which should set my reply message to null and the currently selected message I will pass in the reply message however the type is wrong here uh so we have to fix that this is message which is of the type I message from gifted chat or null okay so we see something down here can we confirm uh message is probably null yeah I don't okay can we confirm that it works so if I do this yes the message down there definitely changes to whatever we just wanted to reply so this is again a case of we just need to make it work and I think we can do this I actually removed most of the styling here and most of the stuff and came up with my own solution uh so let's probably just code this as a last little exercise because it's like almost our time here together and this tutorial is almost over and I'm kind of sad about it so let's just have a little bit of writing code here at the end together so um if the message let's do this uh in a safe way if my message exists uh I want to render this view okay this view should have some styling let's just do it in line today uh I will give it a fixed hate of 50 I don't want this to like expand any bigger uh I want to use the flex Direction row and I also want to use a background color I picked a specific one so this was not included in my color seam okay so we have this little background area now within that I want to render first of all uh this little border to the left so now we have this green border here uh after that we have the actual information so we already know that in in that case uh we need flexbox layout as well but I don't think we need we probably don't need a specific style here so we have our text element which renders message. user.name oh no oh no message I mean message should be set H text oh yeah no I broke the up again whenever I do this I completely mess it up oh no okay what's the counter for me like uh how many times did I broke this by not including uh a text in this tutorial it's at least like five times or so at this point after that text yes yes everything's good thanks thanks for coming at me okay we have the user who sent that message now I also want to render the actual message and we going use my logic again uh to check if the message is longer than 40 characters then I will use a substring with dot dot dot at the end and otherwise I will use the full text of that message so there's some styling missing I see uh so let's include that styling for the first text element so we can style this to have the same green a bit of petting here and there and some font weight I feel like this is already pretty close to what we want to see right so now I also want to have a button at the end to clear that reply message uh that goes somewhere uh that goes beyond this one so we'll add another view here uh with a some kind of styling I'm actually not sure what the styling will look like uh and I will include a touchable opacity uh touchable opacity on press I want to hit clear reply that is correct and I will just add from ionicons something like close Circle outline um a bigger size 28 or so and for the colors we can use colors primary and then we need to close the touchable and then we got it here okay um this element should probably align itself to the end so I think we can use align items Flex end um and I want to also justify the content in the center uh justify content I think the alignment in the end did not really change any but if I give it like Flex one yeah then it aligns itself to the end so that could work and then we add some petting to the right hand side so let's add petting right 10 yeah perfectly placed okay we have pretty much done a good job with this we can reply because we have a custom chat message which is using the react native gesture Handler and animat which is actually not using reanimated as far as I know so if you want to you could change it to reanimated instead and we do have this custom uh footer component which renders the reply message that is currently active and as far as I know yep also shows above this now there's only one last thing one more thing that I want to do and that is adding a little animation because currently you see it just plops up and it disappears and we after I don't know 2 3 hours off this clone tutorial can definitely do better so let's change this to be an animated view uh from react native reanimated and this animated view should have an entering animation which is fade in down and it should have an exiting animation Fade Out down and with that in place let's see it in action one more time and it fades up it fades up so smooth and it fades down so smooth um I mean there still there is this layout animation of gifted ched uh which happens instantly poo can we change that one uh um that is a very good question I honestly I I don't think so um these this is not really about because especially these are from react native animated these views we would have to like have the whole gifted chat uh use reanimated and then the layout function I don't think this is going to happen I mean yeah you can always create your own version of something like we could let's just for fun do it uh we could have like an anim animated gifted chat using animated do create animated compon yeah this is just um this is just not going to happen I don't think so uh you can't just put the the gied chat in here and hope for the best um gifted chat do something we use gifted chat do no no no no this is not going to happen so um this layouting animation from gifted ched in terms of the footer not rendering probably there should be something better maybe we could surround this with a view with an animated view that has uh the layouting function so we could use a transition amp here con transition uh we're going to use a curved transition like we used before uh with a delay of something big so we notice that something's going on and then we apply that transition here but I don't think so uh the space is yeah no this is not really working out apparently this is not working out um but I still think we did a pretty pretty decent job with everything else uh I just don't want to break this so let's remove the last pieces and then we have it I think we finished pretty cool Pages pretty impressive Pages communities is not really that interesting I would rather have like a camera but that's not in the current application and updates is probably a story for another day including like the stories view that would be something we could take a look at in the future but for now I think we have finished our react native WhatsApp clone with a bunch of great packages and of course as well clerk authentication all right and that's it for this tutorial I hope you enjoyed this I hope you stick with me for I think it's about 4 hours at this point with the WhatsApp clone and you've hopefully learned a bunch about react native so these clones are not just about uh implementing a certain functionality I have other tutorials on Galaxy c.f we have courses about this but these clones are how can we make certain things work together with all the rest of the application included and built out different screens without breaking all the rest of the application so I really hope you can take away a lot from this application if you want to uh hit the Subscribe button because I release weekly videos tutorials and everything to keep you updated around react native and of course check out galaxies. deev which is my course platform in case you want a more structured approach with Pro courses and guidance from our community so to close it up I just want to say one more time thanks again to clerk for sponsoring this and also the previous Airbnb clone and there are more clones coming with clerk later this year so stay subscribed check out cl.com support them and I will catch you in the next one so until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 35,450

Keywords: javascript, mobile app development, reactjs, html, react js, app development, ionic framework tutorial, learn react, react course, app developer, react native, ios development, ionic app review, react, reactjs projects, react tutorial, react native tutorial, react native app, full course react native, clerk, reanimated, expo router, whatsapp clone

Id: VUhaDTKYBJU

Length: 246min 8sec (14768 seconds)

Published: Tue Feb 20 2024