Building a Threads Clone with React Native, TypeScript & Expo 49!

hello everyone welcome back to Kobe Beto super excited to be here back again with you guys with another video and in today's video we are going to learn how to create a threads clone and as you can see here we have this demo and the cool thing about this is that we also have support for dark mode and we are going to be using Expo 49 if you didn't know Expo just released the SDK 49 that comes with a lot of features like type routes uh the XP router by default and we're going to be using typescript as well so this is what we're going to be doing guys we're gonna be focusing just on the UI we are gonna just generate this dummy data and also use it to provide this really nice UI I really I'm really am a fan of the UI that threads has implemented and this is how it looks on Android and the cool thing about this is that if I reload you're going to see that we have this really nice animation that we also have on the real application and if I reload here on the right side you're going to see this animation as well now this animation I'm using a library we're going to see how to integrate this Library so we can use this animation and the cool thing about this is that you can edit this animation maybe change the color and just customize it okay so this is what we're going to be doing guys if you are interested make sure that you like this video and still to stick till the end and let's get started and now that you are here guys in coded Beto I invite you to check out the react native course I'm very proud to announce that 61 lessons out of 679 are now available in English and I'm currently working on translating them myself so by the time maybe by the time that you are watching this video the course is completely available in English so if you want to support the channel if if you want to support my work or if you if you just want to Simply com become a master in react native I invite you to check out the react native course okay now that that's been said let's actually start creating this amazing application now like I mentioned before guys we're going to be focusing on the UI we are going to be using export 49 and also typescript now okay guys so let's actually start to build this project and the first thing that I want to do is actually start a new Expo project so in order to do that we can we need to navigate to a folder in which we want to create this project and in my case it's going to be in my desktop Now to create a new Expo application I'm going to run the command create Expo app and because I want to use a template I'm going to pass the flag template like this now if I hit enter I'm going to be asked which template I want to use in this case we want to have the the export router that comes with Expo 49 SDK and also we want to have typescript so I'm going to choose typescript and as you can see here it says Firebase routing with typescript enabled so this is this is really nice and it's going to allow us to move faster in this development okay so the name for this application is going to be tutorial threads and hit enter now let's wait a little bit until this is done okay guys so the project is ready as you can see now I'm going to access this folder tutorial threats and going to run this code dot um command so it gets open on Visual Studio code okay guys so here we have the project already opened on Visual Studio code and the first thing that I like to do it's actually change my package manager instead of using npm I like to use yarn so the way you can do that is just deleting the package.json and also deleting these not modules and simply run jar again so now this is going to be using yarn to manage the packages and yeah so the while this is installed I actually want to walk you through this new app routing that comes with this template so if you are not familiar with X4 routing no don't worry the idea is that the navigation of the application is going to be managed by the file system so for example in this app folder we are going to put all the screens or all the navigation that we need for our application and if I select this app folder as you can see here you're going to find this tabs folder and if I open these steps folder we have this index and the file number 2.tsx now let's actually run this using Expo so I'm going to run npx Expo start on my terminal this is going to start my server and if I press I this is going to open my Expo app on my simulator okay so it's asking me if I want to update because my X4 version is outdated I wonder why so let's go to the package Json and just double check that we have Xbox 49 and we don't have Xbox 49 and actually before we run this on the simulator oops I want to let me charge more of this out of the way let me clear the terminal I want to install Xbox 49 okay how can we do that I guess we can just simply run yarn um at Expo and let's wait a little bit this should install the latest version of Expo which is 49 as you can see here now we are good to go but maybe we need to upgrade all the all the extra dependencies to be compatible with the new version of the Expo that we just installed so maybe if I just run mpxx or start they are going to start yelling at me telling me that I need to um run this command look at this guys so this is this is wrong we need to fix these versions by running MPX Expo install picks so let's copy this command stop the server again and run this command this is going to fix the dependencies that we have here so they are compatible with the new SDK okay so 49 in this case cool guys now everything is looking fine everything is working great and the other cool thing that we're going to be trying out today is going to be the export router version 2 as you can see here we have the version two and this comes with the type route that is my most uh my favorite feature I would say but yeah so let's actually start the server again MPX Expo start because I want to show you uh how this looks um when I say yes here and then open this on the iOS device okay so there we have it we're using Expo and the application is loading so this is already upgraded to the version that we wanted so I'm going to close the package.json and let's wait a little bit until this is done now let's go back here okay so here we have this splash screen warning the reason for that is because they are telling us that this has been deprecated so let's actually go to this layout which is going to be the entry point of our application now this is going to work with layouts and indexes okay if you pay attention guys the layout is going to be the entry point of the application as you can see here let me just minimize these steps in this layout.tsx we are going to define the main entry point of the application and if I do scroll a little bit here you're going to see that we are um just having this Expo boundary that comes already set up for us using Expo router and the cool thing about this is that if I try to navigate to a screen that does not exist we are not going to break the application but we are going to get a really nice error that is telling us that is going to tell us that this route or this screen is not working so that's why we're using this Expo ever boundary then we're also defining the initial route name this is going to ensure that reloading on the model gives um a back bottom percent okay okay because it's all good stuff now the root layout this is a place in where we want to make the loading of everything in this case we are loading some fonts that comes with this template and if I do scroll down you're going to find this use effect that just is checking if we have some errors we're going to throw an error which is going to show the error boundary I would say now here a simple validation if we are still loading we're we're going to show this splash screen otherwise we're going to show their root layout navigation which contains the entry point of the application in this case it's going to be a stack as you can see here so if you are familiar with react navigation you are familiar with stacks and how we can Define Stacks in react native but if you are not familiar I also have a YouTube video uh in this channel that you can check it out it's called react navigation crash course I believe and you you can check it out and master your skills and react navigation before you jumped into export router at the end of the day they solve the same thing and also explore router it's built on top of react navigation cool so we have a stack at the end of the day and here we are just rendering these tabs and this is a good it is a maybe something that you have you haven't seen never before but basically we are saying that the first stack is going to be these steps that we have in this folder and then we want to access or we want to be able to navigate to this model from anywhere in the application and this model is going to be presented as model as you can see here and this model is going to so and we are navigating to this model from this icon here so this is the model now what I want to show you guys now is that we can use this this type of stacks to Define stacks and to Define tabs if I go to this layout of the tabs notice that we are following the same pattern pattern inside each folder we have a layout file and also we have an index and in this case except for this main layout because that's the entry point of the application now in this layout of the tabs if I scroll down a little bit you're going to see that we have these tabs in this case in the other case was stack in this case is tabs now notice that this is being imported from Expo router and also we are importing a link link is my second my second favorite part about Expo router because we can have autocomplete and we can navigate easily in this case we are using this link here to show the model so we are passing now in this case this href and then we we specify the the route right but what happens if I change this model to be error so we don't have nothing we don't have a you know a screen that it's called error or a file that is called error so this should break the application right so let's try to navigate to this screen and now the cool thing about this guys is that instead of breaking the application as you can see here we are just navigating to one screen that says this screen does not exist and then they give us the option to go back okay this is a really nice cool thing that we can have now also why I like to use this template is because we we have already support for dark moth so this is going to uh just work right out of the box so we don't have to install anything just maybe keep modifying a little bit the components that they gave us by default okay so the Expo team set up this really amazing template and yeah it's really nice to just be able to start a project with this template and start integrating the features that you want great so the configuration is going to be very similar to react navigation and I don't want to waste a lot of time explaining this that maybe everyone knows at this point and if you don't know react navigation go check out my other video but yeah let's put this back into model right but one thing that is happening here now um they promised us that we will have that we would have uh type routes right because now here if I want to navigate to the model I need to say model okay but if I want to have let's say that we have a hundred screens and we need autocomplete depending on the route that we have here now um and we are using typescript right we are using Expo 49 we're using X4 router 2.0 uh so we also need to enable some configurations because uh the type routes are in experiments in experimental release I think but you can go to the app.json and scroll all the way down and after plugins we can add these experiments type routes equal to true and if I reload my server quickly let's say yes here reload the application go back to the layout now in this link if I do autocomplete you're going to see that just like that because I just added this line of code here two lines of code now we are able to see which screens we can navigate to this is amazing this is really powerful this is going to increase your um your productivity this is going to enable you to to ship apps faster without having to deal with typing the routes without having to deal with you know just searching for the for the screen that you are trying to navigate to so in this case I'm going to navigate to the model as simple as that hit save and if I go back to my header here we are navigating navigating indeed to the model so this is amazing guys this is perfect and now that we have an idea of how this works we updated the the application and everything is looking fine let's actually start thinking how we are going to be implementing this application that I have here okay so the first thing that I I want to notice I I want you guys to notice is that we have this really cool animation and I would like to start by tackling this animation now what I did to have this animation it's actually using a library from Lori Lori from from for react native sorry and just search for Threads and I found this animation by vargav I don't know if I pronouncing his name right but this is the guide that created the animation so I took the animation and I borrowed this animation to create this video but yeah you can go to Lorry files and just search for an animation that you liked of course check out the copyrights so you don't get you know so you don't get it there so by someone and yeah so once that you have the the animation that you need what you can do is just simply select this animation and in here um let me see I believe that we can just simply get the Json file um let me double check this okay if I press on download we have this option loading Json and we can download this file okay so once you have this file you can simply go to your project and inside the assets or anywhere where you want to save these files you can simply save them so what I'm going to do guys is just simply drag and drop the animation that I choose so I'm going to say copy folder and here we have these loading animations so when you download this file you're going to have this Json basically so this is a really large file that I don't really understand but basically it's the animation that we're going to be displaying so go ahead guys and select one animation that you want to use and copy the copy copy it to your to your code okay now we are going to need to install a dependency the reason for that it's because we need to play this animation right so the dependency is going to be loading for react native now remember that we are using yarn at this point so I'm going to run the command yarn at loading reacting now another thing to notice here guys is that we are using xpogo at this precise moment but since I'm going to be using this library that uses native code to make the animations export doesn't support this Library Expo go so that's why we need to create the build using X as well so how can we create a build by running the command MPX Expo per build and we can also specify which platform we want to pre-build or with which platform we are going to be working on now this is going to work on Android and iOS as we saw on the beginning at the beginning of this video but for now I just want to be working on the iOS application so I don't need to build for Android as well we can specify the platform by passing the B or saying just platform I believe platform and then iOS okay so let's hit enter and I believe that I can just replace AP by saying export per build platform iOS we are going to build this application just for iOS now I'm going to select the identifier that they are giving me fee they are giving me here um it's just an example I don't really need to care about that and uh yeah so let's wait a little bit until this is done now as you can see on the left side the iOS folder was just created which means that we have now access to the native code for um for the iOS project okay now we are installing cocoapods as you can see here now I'm going to minimize this um we have already loaded installed so what I want to do now it's actually start modifying a little bit my screen and the screen that we are going to be working on is going to be okay this is ready now I can run this project on iOS by saying yarn iOS and I'm using another Port so I'm going to select yes here okay now what I can do here it's um I believe I can just go okay so let's wait a little bit until the build is done now let's actually start modifying a little bit the UI so if we go back to the tabs here and select the layout this is going to stay the same but in this case we're not going to be using this tab bar icon and also we are not going to be using oops we are going to be using the Tap bar icon but we're gonna we are not going to be using the header right button so I'm going to delete it and yeah perfect now um let me just double check here something so for the icon that I want to use here uh instead of having this code I'm going to have the home and we also have autocomplete here which which is really nice and for the second tab icon I'm just going to have this search okay this is going to change the icons and notice guys that we are using uh font awesome for the icons and you can check out this this uh website icons.export.fyi so you can see the actual icons before you use them so yeah now that we have this maybe we can change as well the name um but I don't think that's necessary for now if you want to change it of course you need to change the name of these files as well but let's go to the index so the index is going to be like the home screen for our application and in here we have this tab 1 and just this data so I'm going to start by just deleting everything and let's actually start from scratch so we don't get confused and now the build it's done as you can see here and I get this alert that says that if I want to open this tutorial threads I'm going to say open this is going to load this application okay and we are working on this step number one so I'm going to delete these styles for now delete this um well I think I'm going to be using this import but for now I'm going to be just putting a safe area View from react native and inside this save area View I want to have a scroll View we're going to be using a scrolled view because we're going to have a lot of data okay so I'm going to have a scroll view here from react native as well and inside this scroll view I'm going to have my Lorry animation so I'm going to say Lori and this is going to be a component that I need to import up here so this Lorry is going to be imported by the library that we just installed I'm just going to copy this import okay so this is the library that we installed as you can see here and now we're using this component just like that and the way we can use this component it's by simply passing the reference or the source which is going to be a require and we can simply pass the path that is going to be inside assets and um sorry it's going to be site lordy animations and then trades Json okay now we can also specify some things like for example look if we want to Loop the the animation so we can say through for now also um this should be enough to show this on screen now as you can see here we don't have anything let's see what happens if we add a style to this loading loading component and I'm going to say that I want to have a width of 90 and a height of 90. say okay and I'm not seeing anything let me reload the application okay so we are not seeing anything I don't really I'm not really sure why let me just copy this stack here hit save okay now I'm going to try to rebuild MPX okay guys so if we hit save here as you can see here uh we are not seeing this animation the reason for that it's because this animation is not playing at the moment so if I say this property autoplay to be equal true just like that we have our animation and this animation is going to have this properties okay now I'm going to delete this text text and um yeah so we are ready to go now the first thing that I want to do here then that I'm noticing is that we have this step one header and I don't want to show that so this is uh this header is with Within These tabs so let's go to the layout and what this is the place where we can change this navigation configuration and we can set the header shown property equal to false here also I can write okay okay and there we have it guys so that's our animation now this animation is going to be looping forever but if I change these to be false I believe that this should stop at some point there we have it so that's so it's stopped but let's just leave it like that for now what I want to worry what I want to do now it's going to be actually starting to generate some data and also maybe try to play this animation when the user is reloading the application now this is scroll view guys it has a property called content container Style and this is going to be the style that we want to apply to the content that is inside this scroll view so for example if I say background color equal to let's say gray you're going to see that this scroll view is not taking the whole screen but that is not an issue at the moment because we're going to have a lot of data anyways but if you want to take the whole screen you can say Flex one I believe no you need to say Flex 1 to the container so if I say it's the style to the container and then say click sub 1 um yeah I believe that this is not going to work because we're using this safe review like someone okay now we can take okay so this is not going to work let's just go back to what we had already yeah so we have this uh background color gray and this is the perfect place to add some padding to the content so I'm gonna say padding horizontal of 10. and also I want to have some padding top um and the reason for that is because I have tested this on Android and on Android this animation goes off the screen so what you can do here is say platform from react native dot select and then select Android and for Android we can have a value of 30. so if I could say this is not going to have any change on iOS but on Android is going to fix the height I mean it's going to fix that this animation it's off the script so you can do whatever you want so for example if you want to apply a completely different style just for Android devices you can do so as well and another cool property that comes with scroll view guys that maybe you don't know is going to be this fresh refresh control and this refresh control it's going to take a component that as you may guess by now it's going to be a refresh control now this refresh control it's that little activity indicator that we see that we when we are reloading the um I mean when we are scrolling uh dragging down and reloading everything so this is going to take this property refreshing I'm going to set this equal to false but it could be maybe equal to true just for testing and if I set it to true you're going to see that we have this icon here now the reason why I'm using this refresh control it's because this is going to help us trigger the animation okay that we have here now I'm going to set this equal to false because we don't want to show this refresh control and also and now check this out if I drag and drop you're going to see it and I don't want to show these these to the user so what I can do here is set the thin color in color to be transparent and if I hit save and try to do the same again we are not seeing this um this default color that we had before now I want to access this event called on refresh which is going to be the event when the user drags down and what we want to actually do when the user drags down it's going to play this animation so maybe for now let's just have an empty function in now we get to this point in which we need to access this loading animation and play it okay now I'm going to remove this background Gray and now it's looking it's looking good and what I want to do now guys is going to be create a reference that is going to let us manipulate the animation from anywhere in this component so let's create this animation ref using ref from react now I'm going to import up here into the ladies that we are not using for now I like to import all as react from react this way so that we can simply say react.use ref in this case now the the ref is going to be initialized to be no and we can also specify the type of this reference in this case it's going to be Lori which is the element that we're going to be manipulating and let me just add in a space here and now we need to add this animation ref to this loading component so by adding this we are basically connecting this variable and these component and now we have this imperative API that allows us to manipulate this component through the reference so if I just come to this function and now say animation ref dot current and play which is one of the methods that we can use and we also have for example let me delete this so for example we have play pause render reset resume and post the one that we're going to be using is going to replay in this case now uh let's try to refresh okay let's try to do it again perfect now this is working fine of course um we are losing this um now that we are scrolling because we don't have any data but we are going to add data in a moment now it's worth noting guys that if you want to access some or perform an operation when this animation has finished you can do so here for example on animation finish you can maybe set an alert alert um finished okay and once it's finished we should get an alert there we go now we are now we are not going to be using this for now but it's worth noting that you can do so okay now guys the most important thing to generate this beautiful UI application is going to be actually the mid which is the data so sorry in order to create data or fake data we're going to use these really nice library that I just discovered the other day and I fell in love with and the name is Faker maybe you have usage before but Faker it's a library or it's a dependency that allows us to generate big data that seems real and also it's really nice you're gonna see you're gonna see that in a moment so I'm going to say yarn at and this dependency is going to be faker but now I want to add this just for development so I'm going to pass this flag d which means development and install this dependency okay great now we're gonna need to generate some some some data right so let me clear this I'm going to just close the terminal for now close these files because we are not going to be working on those for now and actually create a new folder within my project and this is going to contain some functions that are going to be called utils and inside this folder I want to create a folder that is going to be called uh generate dummy data dot yes remember that we are using typescript and now here we're going to be using Faker so let's go ahead and import it so we can say from Baker I want to import and we can import many things but for now let's just import faker now also before I actually start creating this data I want you guys to to just check out the application that we're gonna be doing so this is the one that we're going to be creating right and I was looking at the real application when I was creating this this UI and the reason for that is because by looking at the at what we're being what we are doing or what we are trying to do we can actually um have a really nice idea of how we can model the data that we're going to be using so um I'm going to generate so now that we have this UI I'm going to generate another folder and this folder is going to contain the types that we are going to be using in this application now I'm going to call these types threads.js sorry.js now inside these threads I'm going to Define the interfaces that are going to define the data now just by looking at this um this post that we have here they look really complicated and we have a lot of information I mean they could look just like one paragraph of text but in the in the background if you really think about what data we have here we have pictures we have users username we have the time in which this post or this thread was posted we we also have replies we also have likes we also have the the images of these persons that have replied and then we also have the possibility that one post or one thread doesn't have an image in this case we also have users that are verified as you can see here this user is verified because it has a blue mark also we also have this really cool line on the left side but that doesn't that doesn't have to do with the information that we are dealing with but I would like to start I would like you guys to really see the the interface and the data that we're using so that we can actually start defining some interfaces so I'm going to declare this interface and Export this interface called thread so as we are seeing here we have a lot of threads and each thread I'm really sure that each thread has an ID okay so let's define that in our data I'm going to say that each thread has an author as we can see here and this author is going to be of type user of course we don't have this type yet so I'm just going to type user also each each thread has a Content which which is type string we also have an image and now this is a perfect place to say that this image it could be no so I'm going to put this question mark here now we are trying to reference this the string of the image that's why I'm saying string and also we have replies this is optional and each reply is going to be a bit complicated so I'm going to say that we have that these replies are going to be of type reply but this reply is going to be an array okay and we are going to generate this interface in a moment but I'm just trying to very superficially type this thread now we're also going to have replace count this is going to be a number that is going to keep track of how many replies we have right so replies count we also have likes count pieces of type number as well mention now this is a cool thing that we could add to this um to this data I don't have any examples here but in the real application you can mention someone on a thread by saying at and then the username so if we had a mention this will be of type Boolean and the reason why I'm saying that this is Boolean because it's because if I know that this thread has a mention and I'm going to know because this variable then I can validate that if I had a a part of the of the you know a part of the content that starts with with ads I want to render the information of the user that we are mentioning so we are going to need the mention Dimension user and this is going to be a type user so so that if I know that this is true I also know that I can graph this mentioned user analysis this can be optional as well so I'm going to put it as optional and then created they created ads as you're my guess right now it's this little number that says the time that this was created so here we have this one hour ago 21 hours ago 10 hours ago and yeah so this is going to be this created at now let's go deeper each um each one of these threads is going to have a reply so let's export interface um reply I'm going to generate this reply now what items is going to have a reply a string as you may guess by now author author who did it who created this reply also a content of type string she is just a text and also number of likes because people can like this reply and also created it this is very helpful because maybe by the number of Lights you want to sort this uh reply to be on top and having this likes number is going to help us to do that okay now let's go deeper we're going to need as well to export interface user which is the main the main reason why we are we have this threads because we have users and they are creating all this content so each user is going to have an ID of type stream it's going to have a name of type string as well then a username what else we also have a Boolean that let us that is going to let us know if the user is verified or not uh we also have a photo of type stream we also have a bio of type string which is basically your status stream okay and also have a link now this link is for the profile of this of the user this is optional of course and also we have followers so these followers are going to be of type user and a cool thing about typescript is that you can Define this same interface that we are defining here as an array of followers okay of type user great so this seems a little bit complicated because you know we suddenly are working like with recursion because we have users within users and then those users may have as another users as followers but it's uh it's not going to be that complicated we are going to validate that we don't generate a lot of you know data now let's hit save now that we have an idea of what we want into orb data let's jump into the faker file here now inside this Faker we are going to just generate dummy data so I'm going to start by importing my types let me just start my by importing my thread and user I don't really I really need my reply because it's inside each thread okay great now the first function that we can do maybe it's going to be create a random user okay so to create a random user we can define a function this is going to be helper functions and create random user now because we are using typescript we can Define what type of data this function is going to return so this function is going to return a user of course typescript is going to start yelling at me because I haven't returned the user yet but let's start defining this data so we're going to have a first name the reason for for why I'm putting this in two variables it's because Faker if I say Faker dot a person we can get or generate a fake data of a person and we have this first name field but I can also do for example we could do the same here with the second name and then change this to be second name or last name but maybe if you want to do this in one line of code we can say cons name equal to and then we pass this and we copy this here so we're going to say plus and I want to have any space between these two names so if I hit save now we have these two variables that are being generated and we are going to store this in the field name of the user okay now let's actually return this is going to be very easy we want to return an ID so let's actually use Faker dot string dot u u ID and this is a function we can also have a photo so if we Call Faker image Avatar we are going to have a photo name this is going to be the name that we have up here and I can actually just copy this here and paste it here of course delete this colon delete this as well and also delete this here what else verified this is going to be a Boolean so we don't need to use Faker to do this we can simply say math dot random and this is going to generate a random between 0 and 1. so we can validate if this is greater than 0.5 then it's going to be true otherwise it's going to be false and every time that we run this line of code it's going to be true or false either okay now bio Baker is going to help us with this person.bio also followers now this is going to be a little bit trickier so I'm going to give it leave it until the end and then username Baker oops bigger dot internets and username now guys if you want to learn more about Baker you can go to their official documentation I'm going to try to leave a link into the project on Coldplay better.dev so if you want to check it out it's going to be available on the platform and finally link so let's say Faker dot internet dot URL so we can have as well a URL this is really nice because I'm hoping that these URLs work so yeah having this URL it's it's cool okay now um we are going to need to generate followers [Music] and why type is yelling at me let's say property followers it's missing okay so followers needs to be an array of users and we don't have an array of users yet so sorry it's going to be an array of followers so the way we can fix this it's actually creating another function so let's say expert function create random in this case it's going to be all aware because the followers guys are going to be users as well we are going to return a user each time we call this function okay now this function is going to be very similar to what we've been doing here so I'm just going to copy this function here okay so we are returning this um this this data and now I'm getting this error because followers it's uh I believe require D where is it so we have these user followers let's set followers required I mean optional so we don't get that error of course we're going to be adding some followers but it really cool it could also happen that some person doesn't have any followers so what I'm doing here guys it's just um you know filling this data that is going to contain the information of this fake user it's really similar to what we are doing on this create random user but the only difference is that these followers are not going to have followers imagine if we create if we call this function recursively inside the create random user this is going to break your computer or this is going to give you a call stack error because we're gonna be creating users uh followers for each follower and then followers for that follower and that is going to break your code uh if we abstract these create random follower that doesn't have followers we can safely come here to this uh create random user object or function and create a new array so I'm going to create a new array and I want to have um maybe I want to have between 0 and 10 followers for each user so what I can do here it's a method floor and then set math dot random so this is going to generate a number between 0 and 1 and I can multiply this by 10 so if I say 10 this is going to generate a number between 0 and 10. why because I'm saying math floor and then generating a random that is multiplied by 10 so at this point let's say that the the random number it's 10. so I'm going to fill this array with no but now I have 10 nulls I want to change those nodes to be users so I can iterate and I'm going to put this in another line so you can see I'm going to say now map I'm going to iterate over each element and change each element to be a user so for each element and I'm not going to really use this so I can just put an underscore here because I'm not going to be accessing that I'm going to just simply call my function create random follower and that's it that is going to generate an array of followers okay and why am I getting this error okay I'm missing a comma here okay yeah so each user is going to have at least 10 followers and yeah that is really nice now what else we are also going to need a create create thread this is going to start to get a little bit complicated so we have create user create random user and now let's add a function that is going to create a random thread so a random thread is going to look something like this I'm going to call this function create random thread this is going to return a thread and first of all we need an author and we also need a mentioned user sometimes it could be that we want a user or no but this author is going to call this function create random user and we are assigning this author here okay now another cool thing that we are doing here guys it's that we are generating an image and we want some threads to have images but we want some trends that don't contain any images just to test the UI right so that's why I'm creating this image randomly so this is going to be random true or false if it's true we are going to generate an image using Faker otherwise we're going to set it to be undefined replace replace are going to contain a random number between 0 and 10. this is going to contain the object that has a reply and if you don't remember each reply is going to look something like this so we are filling this data using Faker also the number of likes that has each reply is going to be a method random between zero and a thousand okay so this is these are just number so it this it doesn't really uh hurt the performance by generating a thousand of likes it's just a number um and also we have replies count we have uh likes count these are just random numbers mentioned it's just a random Boolean mentioned user is going to be a fake user that we are creating here and also created at is going to be just a time that it's recent uh to ISO string so Faker also provide us with this date which is really amazing really blowed my mind now guys pay attention here because this these functions are only creating one item so these three functions really complicated functions are just creating one thread so we have one thread here and what I want to do here is I don't want to give my application super complicated uh running this code in a large amount of fake data it's going to perform poorly so it's going to take time so I want to generate 50 uh 50 threads every time I reload my application so we can actually create another function and this function is going to be called generate uh threats I assuming you guys right now this is going to return an array of threads so we can set an array of threads like that and return new array Visa rate so it's going to be of 50 items we need to fill this with no and then we can iterate over each item and actually um return or create a random great so this is going to return an array of 50 threads and that's it guys we can now simply graph this and call this function in our application and this is going to generate big data now I wanted I want to show you guys how this is going to look so what I can do is simply uh maybe for as an example I can say console.log and let's just generate a random follower just so we know that this is working so this is going to appear on the console so I'm going to save this and I want to run this by running node generates actually this is going to be inside utils generate dummy data okay and now I'm going to get an error because I believe that I'm using typescript Okay so cannot import outside of a module yeah so it's not going to work I thought it was going to work but I guess we're gonna we're gonna need to see it when we run this project so I'm going to say during iOS um and let's wait a little bit now I'm actually going to delete this because we are not sure how this is going to work inside this utility function but what I can do here it's actually once this is running I can go to my app s index.tsx and here I can simply say cones user equal to create fake user or what's the name I forgot the name create random user create random user is going to be out imported and then we can put on the console and the app is ready so console.log user okay and let's see if this works I'm going to bring my terminal save okay this is taking time did I do something wrong okay no okay everything works fine now look at this guys so this is a huge um data structure that is being generated every time that we load this screen now I'm going to just put this like Json Dot streamify as this user so we have a better way of looking this data and if I scroll down you're going to see that this user contains these followers that are at the end of the day users and this is information almost real that is being generated by Faker these links are going to work are going to show you an image and yeah so in this case we have I believe like 10 10 followers so yeah now that we know that these functions are working guys I'm actually going to delete this the reason for that is because I don't want to be loading these heavy functions that are going to take time every time that I'm saving and doing a change inside this screen so what we can do here is actually create a context that is going to contain or that is going to hold this this state of these threads and then consume this provider or this context so we can use this data inside this tab 1 screen for example and every time that I change something on this step one screen it's not going to page data anymore okay so let's actually do that to that to do that I'm going to create a new folder inside my my my project and this is going to be all context inside this context I'm going to create a threat context dot TSX file now if you are not familiar with context guys react comes with this hook called create context and basically the idea is that you can have state in a parent component and then share this state with all the children components that are or all the items components that are inside these or wrapped with this um this context okay and we're going to see how to use it in a moment let's start by importing all as react from react and this is from okay now I'm going to need to import as well my type thread because this this context is going to be providing an array of threads so it's a good idea to import This Thread and also here is the place in which we want to generate the threads so I'm going to import that from our utilities and let's define the context by saying const um threads context equal to react oops I can say just simply create context and then this is going to take the default value so the default value is going to be an empty array and because we are using typescript we can say that this context is going to be of type array of threads the way we do that it's like this so this is safely typed great now let's export cons thread provider This Thread provider I'm using at the thread provider it's going to be like a component that it's going to provide the state to the children now what I wanted to show you now is if I write threads context dot you're going to see that we have this consumer provider and display name now the provider is the one that we are interested in this case because this provider like the name suggests provides the data that we're going to put inside this context it's going to provide this data to every single children it doesn't matter the depth of the of the children so for example if you have a list of items on the screen on the home screen and then inside this list of items you have other items these items are going to still have access to this context that is being provided at the root level of the application okay so this provider is going to be used that's why I'm creating This Thread provider component that is going to be um an arrow function like this it's an component at the end of the day but this is going to return a jsx element so I'm going to say jsx j6 dot element like this and now type curve is yelling at me so I'm going to return a jsx element if I return a jsx element it's going to look like this now we need to grab the provider so if I set draft threads context dot provider I have successfully export this provider or contain this provider inside this component now I also need to specify that this component is going to have elements inside and the way we do that is using these children so if I specify that this is going to take a children as property and then also add the type of this and this is going to be props with children from reacts okay and if I hit save and also make this uh I mean hide my Explorer you're going to see that this is going to be these children is going to be just a react element so if we say props with children from react uh Skype trip is going to be happy also this is going to return a jsx element which is this this return at the end of the day also this provider is yelling at me because it needs a value and the value that it needs it's going to be um let's say it's going to be of type thread okay so if I pass an empty string maybe it stops yelling at me but what we want to pass in here is going to be the dummy data right so inside this return before this return sorry I'm going to just have a function called threads this threads is going to be I'm going to use used to state so set threads equal to react dot user state this is going to be of type threads and it's this is going to be an array of threads actually and I'm going to initialize this to be an empty array and finally pass these threads here of course we need to set these threads to do that I'm going to use a use effect so that when the component mounts I'm going to Auto generate this data so these effect is going to run when the component mounts and what I want to do here is just set the threads to be equal to generate threads so let's try to explain this this might be a little bit complicated for some beginners um but we are just creating a variable that is going to hold the dummy data that we are generating we are going to generate this Domi data as soon as the component mounts so when we load the application we generate this data we set this data inside these threads variable and then we pass this data to every single component that is inside this provider so let's hit save and now let's actually use this provider the way we can do that is by going to through the domain or the higher order component in this case because we are using the app directory it's going to be the layout like I mentioned before this is going to be the entry point of the application so this is the perfect place to add this provider so I'm going to say um what's the name threads provider so I can import this threads provider and just wrap my entire application so now my tabs my model my model and my every single screen that I add inside this component is going to have access to this um to this um fake data okay now uh notice guys that every time that we are creating this data my application is like freezing because if this is a heavy operation this is a it is an operation that you shouldn't do on production just on development and for testing but yeah once that once this is done we should be good to go now that we have added this theme provider I can actually close this and also I'm going to stop my other application okay guys so um it has finished loading and what I want to do now it's going to be actually use the data that we just created so in order to access that data we need to say const threads and we're going to just simply graph this data from the context so by saying use context and passing the context that I want to use which in this case it's going to be that red context and I'm importing this context from the from the context that we just created now we have this data inside these threads just like that we can simply come down here and say threads dot map for each thread and for each thread for now I just I'm just going to generate a text that says Red Dot I don't know author Dot and because we're using typescript notice that we have these really nice Auto completion dot name for example and hit save and just like that I have this warning because I didn't provide this game so the key is going to be the thread or ID okay and then we have it guys 50 threads that are fake but they they seem real now we can actually start working on the on the UI now if I scroll down and reload you're going to see that we have this animation triggering and looks amazing and if I change this device to be dark mode this is going to still look a little bit nice okay and the text it's working the reason for that is because this text it's been imported by the component's theme that came with this template so if I go to my components theme down here they are exporting this text component that is compatible with Dartmouth and they are grabbing they are an applied they're they are applying these colors from these um these colors that they defined here in the constants folder so if you are checking these codes just make sure that you are familiar where these colors are coming from let's say that in dark mode we want the text to be red you can simply come here and change this to be dark mode and it's going to be red so by abstracting the color this is actually a really nice pattern that you can do uh you can abstract these two objects one light and one dark and even you could you could add another another one if you if you want to but yeah having the colors here is going to scale it's going to allow you to scale the application really easily and make modifications super easy okay now that we know where this data is coming from let's actually start by creating a component here inside this components folder um let's name it threads item so I'm going to create a new file trans item.tsx okay now this threads item is going to be actually a really complicated component because if we go back to the other application the demo each one of these elements it's um you know it's you know has the name the picture the time the other picture if it has one the has these icons as these replies the slides and these pictures of these persons and actually what I want to show you guys is that if you press command 3 if you are on a Mac you are going to have this super huge zoom on your computer so you can actually really see the details of this screen so in this case we have this really these three really small images that are real that are real and that are coming from the replace of this post so yeah we have these images and we need to render now the way I like to do this guys it's actually it could be tempted tempting to just create one component that is going to render all this logic but it would be a good idea to divide this component and even smaller components so for example I want to divide this first row to be one component and then I also want to generate maybe another component that is going to hold this this text the body or maybe we can add this in the same component but then I want to add another component that is going to contain these icons then I want to create another component that is going to contain this then I want to create another component that is going to contain all these components and finally I want to create another component that is going to contain the profile picture and the pictures down here okay and finally the final component that we are going to return is going to be this whole bunch of components okay well that is going to be our approach in this case so let's actually put this back where it was and let's go back to the application that we are working on and this threads component is going to be using OS react from react oops and I'm going to export the full function these threads item okay now this is going to return a j6 element don't forget it okay um yep and return for now you know just an empty tag so we don't get yell at now another cool thing about this is that we're going to get a thread as a property so I'm going to say that I'm going to get a thread like this okay now we have the strength as property it's going to be required so otherwise we're going to get an error and what I can do now it's maybe just delete this and have a view from react native and inside this view I can actually have a text and the text is going to be changing between dark and light mode so let's import it from the theme and inside this oh yes I'm going to say thread Dot author Dot in this case we can say username okay now if I hit save and actually go back to the index screen and instead of rendering this text let's actually render a threads item and this is going to be a self-closing deck so it's going to look something like this um and I need to delete this as well now remember that this is going to take um this is going to take the thread so I can say right like this what I'm saying is just spreading all the properties that we have inside these threads so that we have access to them inside this components and we could also as well destructure this component but I think this is going to be easier um let's actually save this okay now uh we are seeing the usernames here and what I want to do now because we're going to be using images I want to install this dependency the following and and the dependency is going to be export image so I'm going to say npx export install Expo image this is a really nice library that allows us to render uh images in a better manner okay so now I'm going to run this by running darn iOS again close my terminal for now we are not going to be using it I'm going to close as well this index and basically all these screens and I'm just going to stay working on this threads item now it would be a good idea guys if you want to abstract the components in another component in another files or maybe in the same folder of this threads item but I'm just going to add these components inside this one so it's going to be easier for for you to understand now um I'm going to start by creating the right side of the post so I'm going to say I'm going to create a view and this view is going to contain a post heading right so we want to create another component for that I'm going to say post heading down here and this post heading is going to have the first row so this post heading is going to need access to the name they created at and also they verified so the verified is going to allow us to know if the user is verified or not so we need to specify the type of this item so I'm just going to type this quickly by saying name created at of live stream and then verified of type boolia okay and now it's not yelling at us we can return a view that is going to have um another view now I'm going to need an icon imagine it an icon so I'm going to add an import or this up here I'm going to be using material icons for the icon of these of these posts heading and I want to render this inside a view down here so I'm going to paste this code guys and I'm going to explain it to you it's just a view that is containing the name of the user and also it's containing this icon verified and I'm giving it a blue color now if I hit save nothing is going to happen the reason for that is because I'm not using this post heading component so inside this view I'm going to have this post here now this is going to give me some errors because we are not passing the property so I'm going to access to the author.name in this case and the created ads is going to be the red Dot created at and finally we have the verified which is Red Dot user each user sorry author dot verify they have this property now if I hit save um this is not running I'm going to run this on the port 8082 now um this should be rendering this post heading okay guys the application is running um and as soon as we load the data as you can see here we have the users that are verified okay now this uh this header it's actually going to this post getting it's actually it is actually going to show as well this um the feather icon that is the three dots and also they created at now I'm using this function that says time ago but if I delete this you are going to see that we have this time now this time it needs to be formatted how can we do that well by creating this time ago function this is going to be one of the helper functions you may be tempted to install a library to do this kind of operation but it's not that hard if you go to the utilities and just create one file that says time ago for example dot TSX sorry dot TS this is just a helper function and for this function we are going to export it so I'm going to say export function time ago this is going to be lowercase like this and it's going to take a date of type string as parameter and it's going to return a string actually so I can say string here now we need to graph the time between now and the time that the post was created so we can say cons now equal to new date from JavaScript and then cons diff in milliseconds now dot get time this is going to return the milliseconds of this date and we can subtract um the milliseconds that we have in the date that we are passing so I'm going to say get time as well okay now we also need to validate that we don't want to you know if it has passed a lot of time we don't want to render a lot of hours we want to render the base for example but in this case I'm just going to validate that we have seconds minutes hours and maybe days so by checking the difference in seconds minutes hours and days we can actually have this validation here and if the seconds are less than 60 we can return the seconds uh otherwise we return the minutes otherwise we return the hours otherwise yesterday otherwise days okay now if I hit save and actually import this function here hit save you are going to see that this was generated 17 hours ago 10 minutes ago and 21 hours ago so this is working fine we don't have days we just have this recent um recent date but this is working as intended now let's keep working on the component this is going to need some styling here in the container so I'm going to add this in line with the series Flex Direction row hit save and also align item Center okay and justify content space between okay and also okay yeah this is working fine now um of course we don't have an issue at this point because we don't have anything to the left of this item but it could it will happen that this um this is not taking this is it could happen that this goes over the screen this goes off the screen and the way we do that is just the way we can fix this is just by saying Flex Pro of one so this is going to guarantee that the width of this container is going to grow until it it hits um the space available and it's going to stay there great so this is going to be the heading now that we have the heading we can actually create maybe a post ER and to create a post footer this is going to be just a very straightforward component that is going to take the replies the likes and I'm typing this as well like we did before and just returning the replies and the likes and I'm putting this little dot here and this is going to be the footer so let's add the footer here I'm going to say footer as the properties that it needs replies each thread is going to have replies so we pass them and also we need to pass actually this is marking me an error I remember why uh-huh yeah so these replies are threads but we need the replies counts sorry about that we also need the likes this is going to be come from the thread uh dot likes count hit save and there we have it great so this is looking fine now we need the bottom icons as well for the bottom icons guys I'm going to create as well another component down here and these bottom icons are going to be prompt awesome these icons I just took the time to look for them and add them here but I'm sharing the this size and theme on all of these icons as you can see here and just Flex row align item Center gap of 10 and I'm just validating that if we are on dark or light mode we're going to change the color between dark and white and I need to import these from react native so the bottom icons are going to be on top of the post footer so I can say here bottom icons hit save and there we have them so this is looking great this is looking cool what else we need we are going to need some Styles here I'm going to create some Styles down here one for the container one for the image of the user and I'm going to need to import as well stat shift from react native great now we also need the post left side I want to left I want to relieve this left side until the end what I want to do now it's actually render the image and the content of this Con of these posts so this is going to be inside this View after the post heading actually I'm going to have a text and this text is going to have the thread dot content and if I hit save we have the content so this is working fine also I want the image but I only I only want this if the thread comes with an image so we can simply validate this like this and you have the image now this image is going to be from Expo image so be sure that you are importing this from Expo image now the way Expo image works is going to be by taking a source and this source is going to be a link or a string right away so we can simply say dot um image now at this point we are sure that we have an image that's why we are passing this like that and also we need to provide a style now for the style I want to take a hundred percent of width and the minimum height that I'm going to set is going to be 300 I also need a border radius of thing then we also can specify this placeholder now for the placeholder I'm just going to pass this image that the Expo documentation has it's going to be this blur hash and I'm going to pass it here as placeholder you can go to the code and check this out or you can go to the documentation of exponent actually copy copy this example by yourself after that this image is going to have as well a Content fit in this case I want to say cover because I don't want to have spaces that are not filled and also we can have a transition this is a really nice cool this is a really nice feature that comes with this image so when we are loading the image we are going to be showing this placeholder and when we load the image we are going to have a transition so I'm going to say 200 milliseconds and if I hit save we can see the as you can saw there we saw the the blur hash the cover and then when it loaded everything works fine so we have these weird images and these cats great so this is working fine now what I want to do it's going to be um actually generating the left side of this post let's go back to the style here this left side is going to be all the magic the only thing that we came forward to this video and just to make sure that this is working on on dark mode here we have it now we need some spacing but we are going to worry about this spacing in a moment um and well actually what we can do here is just add a style and say gap of six that is going to add some spacing between the post heading the text and the image now we need to generate guys I'm going to delete this text now we need to generate the left side and that is going to be another component so for the left side I'm going to copy another component and I'm going to explain it to you so let's go down here okay so um we have this post left side and just to see how this is going to work um here I have this error that says replies is possibly undefined so maybe I can add this here um well I'm just going to ignore this error for now by saying TS ignore hit save and I'm going to use this post left side up here post left side this is going to take um a thread so I'm passing the thread here okay and if I hit save um you are going to see that this is breaking now the reason for that is because this um left side needs to be from left to right so these two items I'm going to add a style here from the Styles dot container actually and hit save okay and this container down here it's just a flex row with gap of six and margin bottom of 30. now let's actually analyze this um post left side component we are grabbing the current theme using the use color scheme hook the Border collar is going to be changing that's why we are grabbing this color theme between these two values now this border color it's this little line that you are seeing between the user and the persons that are that have reply to this post so this little line is going to be a border now the first thing that we are rendering it's um the image of the user using Expo image we are applying a transition I'm going to change that to be 200 also we are having this view so the line that you are seeing there is just this View and I can change the color to be red so we know what we're talking about this line is just a view that is growing accordingly to the height so by align align aligning this to this to the center is going to be between these images right in the middle okay so this is just this View then we have another view that contains the images of the persons that are that have replied or users that have replied to this person now the way that I implemented this was just generating an array that contains one two three numbers and then defined uh well iterate over these three items because I want to show three images and for each image I'm grabbing uh the replies that I have on on this thread so I'm accessing the actual replies and grabbing the current index in this case we're going to start at the index 0 that's why I'm saying -1 and I'm grabbing the photo of the author then I'm applying a style now this is really important guys because the width of this image is going to be it's going to change depending on the index that we are iterating on so it's going to start with one which makes the first image to be 7x7 the next one is going to be 14 by 14 and the next one is going to be 21 by 21. if I change this to be 10 for example and also 10 by height and hit save you're going to see that the images get bigger and I think that looks better actually maybe I'm going to use A9 hit save and yeah so this is how I achieve this functionality this UI and now the only thing that is bothering me at this point well yeah and that's it that's it for this component and minimize this minimize the Styles let's go back here now guys notice that by abstracting these little components we can actually see how this threads item is looking we have this postlet side post heading post bottom bottom icons uh post footer the image the content is just a text and um because we are applying these um some width of a hundred percent of these items here we are going over the screen and the way we can fix that is by applying a flex shrink here so Flex shrink is going to prevent the content from going off the screen and if I hit save now and you're going to see that this is looking fine now if I reload we have the really nice animation every time that I'm reloading it's looking really nice and if I change to dark mode and reload this again we have this animation as well now you could change the image sorry you could change the animation or dark mode if you want to look for for an animation or if you want to create a one animation by yourself you can do so um I'm using the same the same animation but I think it looks good as well and if you scroll down you're going to see that everything is working great now if we want to Generate random data we can reload the application let's see if this works and we are going to have new data notice that we have the transition when the images are loaded and we are rendering something while we are loading these images so this is really nice guys and this is all I wanted to show you guys actually this UI it's beautiful I really loved it that's why I created I had a lot of fun creating this this UI and I believe that's it for this lesson guys I hope you you like this video I hope you learned something new don't forget that if you want to download the code for this for this go to code we bet.dev and slash projects and you're going to find all the resources that you need also don't forget to check out my react native course don't forget to give it a like leave me a comment and otherwise I'll see you in the next video thanks for watching bye

Channel: Code with Beto

Views: 32,414

Keywords: React Native, TypeScript, Expo 49, Mobile Development, Threads App, App Clone, Coding Tutorial, Software Development, JavaScript, Mobile App Development, Learn Coding, Programming Tutorial, React Native Tutorial, TypeScript Tutorial, Expo 49 Tutorial, Threads Clone, Building Apps, Cross-Platform Development, App Development Tutorial, Learn React Native, Expo Router, Router 2.0, Expo

Id: VK-XkNcvLjM

Length: 94min 51sec (5691 seconds)

Published: Thu Jul 20 2023