Let's build a DISCORD clone with React Native 🔴

what's up no jazz developers welcome back to a new live stream and today we're gonna build a full-fledged discord clone application with react native and stream chat sdk this is going to be a tutorial for beginners so if you're just getting started with rock native you're gonna manage to build it by van because i show you step by step everything what we have to do and by the end of this video you're gonna have your first project built with rack native which is gonna be a huge project you're gonna see so first of all what exactly we're gonna build today uh we're gonna start by implementing the uh login screen to let people login in our application then we're gonna implement the site menu that will display a list of channels where you can chat with your friends then we're gonna build the screen where you will actually chat with your friends you'll see the list of messages and the cool part about this is that it will support a lot of features that you would expect from a top and high level chatting application such as reactions replies threads copying sending images files uh sending urls and having them as a preview in your chat and a lot more features that we're gonna get from stream chat sdk so um this video is sponsored by stream uh stream is providing chatting and feed solutions that we can use to easily build uh these systems like chatting and activity feeds in our applications without having to invest like half a year or even more into building your own infrastructure i have worked with cha with stream in the past and it's really really easy to implement chatting uh i had a great experience with them like the documentation is very well written and very understandable and uh in general like using stream uh is quite simple and it gives us a lot of possibilities uh you can get a free account on stream um for 30 days and also you can apply for the maker account which will give you free a free account if you um meet the requirements so basically if your make if your company or startup is making less than ten thousand a month if i'm not mistaken then stream is completely free for you so follow the link in the description below join stream create an account and soon we're gonna get started implementing our discord clone with stream thanks again stream for sponsoring this video and then we can get started if you want to follow along this tutorial which i always highly encourage to actually start building alongside with me in order to better learn and uh these concepts then you will need a couple of things uh as a prerequisites so first of all the asset bundle that i have prepared for you uh it includes a a couple of screens and a couple of components that we will need for this video so you can get them at assets.notjust.dev it's actually not chat why did i um it's not chat it's discord so slash discord and download your asset bundle you'll also need the expo environment setup because we we're gonna use expo uh in order to easier get started and have some things pre-installed and also to be able to test it with everyone at the end of this stream we have a video about setting up your expo environment so if you don't have that already check out this url um and yeah you'll need a stream account which is 30 days has a 30 days free trial and you can sign up following this url or the url in the description so without further ado let's jump into it and let's start coding where is my intro here [Applause] [Music] all right hello everyone i missed you so much i haven't done a live stream previous week so yeah it's very exciting hello hello paul hello everyone can all right mohammed i really like your builds and it really helped me build my ops in and still learn but i get some offers because i follow your builds so thank you that's awesome thank you very much for appreciating my work uh so guys let's get started because we have uh quite a lot of things to do today and our first thing is to start by initializing our expo project and we're gonna do that by running expo init messing up with my mouse but yeah we need to run expo you need the name of our project and we're going to choose that tabs template for that so let's do just that i'm going to open a terminal and from here we can do expo you need discord dash t tabs let's open until it downloads the template and it initializes our project cyber code waiting uh i really like your videos but it's hard for us uh with typescript can you make it with javascript um this is exactly um template that we are gonna use the the one with the tabs is coming with typescript uh but we are not going to use we're not going to focus a lot on the typescript in this video so if you don't know typescript just write the javascript that you know except like defining the types and that's the same thing as doing it with typescript make a video on how to upload these apps on server to you uh we have two videos of on of uh of this regarding deploying your application to play market and one for app store so check out on the channel uh for these videos uh that you are requesting all right so after the project is initialized let's do cd inside it see the discord and then let's open it in visual studio code i'm gonna do that by running code and dot to open this directory in visual studio code or alternatively you can just simply open visual studio code or your editor of choice and open the folder that export generated for us so let me make it a bit bigger i'm gonna need it like this so first things first let's run our project and see what we have to to work with to to run it let's run npm start this will start our development server and our development server will be opened in a windows browser with development tools from where we can from where we can run our application on our simulators device emulators we can also see the logs here it's a very useful tool so from here i'm gonna run it on ios simulator in your case if you're working on windows you can run it on android device or emulator or alternatively you can also run it directly on your phone on your physical phone if your system uh is does not support emulators you will download the expo go application for market both on apple and on android and then you'll scan this qr code with your mobile phone and it will automatically open the project there with the same method at the end of the video i'm going to switch to a tunnel connection so that everyone that is watching right now can join the application and can start chatting right away without having to download anything so prepare your expo go application on web mobile and once we are done we i'm gonna give you access to our application that we are building today why expo are not rack native mostly because of this specific reason to to be able to easily share replication with you and to interact everyone in the same application at the same time and also yeah because it's much easier to to get started and to install uh dependencies so here we have our application uh let me make it probably a bit bigger uh i will need to do it like this okay here we go i think that's good so what do we have here we have simple two tabs uh in our application tab one and we can switch to the top two here awesome very simple very basic but uh it gives us this template gives us a lot of pre-installed uh libraries that we don't need to waste time installing such as navigation um it reanimated and other libraries that we will need uh in this tutorial okay so um we initialize the project we open it in visual studio code we started the development server and we run it on our device or emulator so yep that's it let's have a quick look at the things the project structure that we have i hope you can you can see it uh the entry point of our application is the file up.tsx this is an important file because we know that everything starts from here uh it's a simple uh racked component that renders our navigation our navigation component is in the navigation folder and here we can we will also work in this folder to set up some of our navigation for the application the screens that we render here all live in the screens directory here we have a model screen that we can access by pressing on this one and other screens the thing is that i don't need the model screen so we can start cleaning a bit our application so let's start by model screen uh tab one and tab two uh probably i'm gonna delete them a bit later from navigation index i don't have this model screen so i'll remove the import and where we have here the model screen i'm gonna remove a whole stack.group okay another thing that i like to do when starting a project is creating the src directory that will keep all of our source code so let me just do it right away here asar sim because it's going to be much easier to navigate through your code because you know that everything that you write is here in this folder and everything that is related to configuration or stuff like that they are in the root directory or our directory here so in our src i'm going to move screens move update imports for screens yes this is important then also navigation i'm going to move to src yes update what else hooks we have yes constance yep components this is a folder that will keep all the reusable components of our application uh yes and probably that's it yes now in src is all our source code and we will work with them later what's happening here with my application uh probably i'm gonna have to restart the development server so let's open the terminal and from here let's do command c or control c to stop the server and do npm start again now let's run it again on our device uh cannot results modules assets uh i think it's because we moved a couple of things but where is it coming from it's coming from hooks use cached resources so hooks used cache resources here we import now actually this this import was messed up and we need to add slash and double dots again to move one directory up save yes everything is working perfectly all right so let's go to the next step and our next step where is it come on here it is is to install a stream chat sdk but before that let me first let's first create our stream chat account and create our application so to create an account let's go to get stream dot io get stream dota yo and here we can i already have an account and i already registered but you can create an account for free by signing up with github you can continue with github or you can sign sign up with your email nothing complicated there and after that if but actually let me also do that so that we all follow the same steps let me log out from this account my account logout and let's go here okay here very weird like that don't have an account sign up was missing for me so i'm gonna do it with my no just.dev my gym and the password yeah a user with that username already exist so not just vody get started and right away we are redirected to our dashboard and uh stream automatically created for us a project with a name with the same name as our account name so this project we can go here and what we'll have to do is to edit this project because i want to move it to development product environment not the production so let's select development save application and now i see it as the development application all right perfect so the next steps as i said is to get started and install all the dependencies all the libraries that we will need you can follow the documentation here on their website so let me open it up stream chat sdk provides um provides library for both react native like bayer rack native cli and also for expo so we can scroll down a bit until we see expo installation and for expo what we have to do is just these two lines and for rack native as you can see there are a little bit more steps that's why i chose to uh to work with expo for this project so let's first of all install the stream chat dash expo uh okay i'm gonna open a new terminal by pressing on this plus sign and let's run expo install stream chat expo after that is done uh we need to install other peer dependencies of stream chat sdk that the library depends on and here are the list of them like the recognitive community blur the camera roll for example document picker in order to give you possibility to pick a document and send it to in the chat the image crop picker the image resizer animated and so on these are all dependencies that improve the user experience of our application so to do that again scroll back let's copy expo install install and here are all the libraries that we need and let's paste them in our application in our terminal enter and after that is done uh we are mostly done um the thing is that we need to take a couple more additional steps uh under expo documentation they are not listed but if you scroll a bit up here are the additional steps that we need to take for the dependencies that we installed so for example if i go to where react native reanimated if i press on this one uh let's see installation and i'm gonna look at them where yeah like from from this uh documentation what i need is to set the react native animated plugin in our babel.config.js because without these we're going to have troubles and we're going to receive some errors so let's open uh babel.config and here under presets let's add them uh plugins and here the plugin for react native animated plugin uh that's it we've reanimated uh everything else is actually for uh rec native cli but we are using expo so we need only this small step and another thing that we need to take an extra step is for example react native gesture handler uh for this the step is just to import with gesture handler in our application uh like this just simply importing it and we're gonna we have to do that in app.tsx this is important and is important because in a lot of scenarios by not importing this everything is gonna work fine and you will think that everything is perfect but in some scenario in especially in production and on some sorry on some devices uh by not importing this in your app.esx it will crash replication so make sure to follow this step um for everything anything uh for other things i'm not sure if we need to take any our stats because i didn't receive any uh issues with them so i would assume that we don't but like before publishing your application to production double check if you need to to take any extra steps for for these libraries um yeah actually for we need to check that for example export document picker if we want to to look at the installation guide and if there is any other installation only this one yeah that's it for this one let's double check this one installation yep all right so let's move uh to the next step where is my presentation here we go so after installing everything our next step will be to create our client and the client is um is a way to initialize your stream chat sdk and by providing your api key this way stream chat sdk knows with which project it should communicate and get data from we're going to initialize the client in our app.esx and actually in the beginning we're gonna work here in up.tsx and in the second part uh of a video we are gonna uh move everything to the separate screens uh after we understood everything how stream is actually working so before defining our component here let's initialize our client uh for that we will need to import stream chat from stream chat not from stream chat dot expo but from stream chat because uh and yeah so the api key uh i'm gonna define also here api key equal to a string where do we get our api key from we get it from that dashboard uh on our expo so open up your expo project i'm gonna go to the dashboard and right away here we see key if you open the project the key will be uh let's see here up access key so i copied it and let me simply paste it here save let's double check our logs to make sure that we don't have any errors so far and to check the logs for this specific device we need to press to select it from the left side menu here so i'm gonna clear everything and i'm gonna reload i don't see any errors which means that we initialized the client uh successfully a couple of things about this stream chat dot get instance is that um the first time you call this function get instance it will create the client and the connection with the server however the second time in your application where you call this stream chat get instance it's not gonna recreate the client it's just gonna return you the existing client and by doing that this is completely safe and you are not creating uh more connections where you don't have any memory leaks so it is safe to do stream chat get instance multiple times in your application because yeah behind the scenes it uses a singleton pattern but that's like extra detail that you don't need to know okay so once we have our client we can move to the next step and to uh the next step will require some configuration because our next step is to connect a user to with stream chat sdk because we are developing this application for development and we are not going to connect it with uh our own backend uh we are gonna generate our tokens for the users on the front end as developer tokens so this is only for testing purposes and yeah to learn how it works but in order to use these developer talk tokens we need to disable the token validation on our uh project so let's go to our dashboard on stream let's select our application uh from that chat drop down here on top let's go to the overview right not overview let's go to the usage uh why my chat is no longer active my plan i think i logged in in my existing account do you think that's the case let me quickly try to login in the same account and i'm gonna have to simply create a new application and the application name will be discord discord feeds server location for the location of the server here like i'm going to choose us data storage location us clone existing application no for environment development and let's create the application up with this name already exist did i make it probably discord clone ok and for the chats overview all right uh the only thing that i will have to do is to get the new api key for this application you don't have to do that of course so dashboard discord clone let me copy it i'm gonna paste it by new api key and now the step that i was talking about uh to disable the off checks let's select our project and from the chat go to overview now let's scroll down until we see the authentication in the authentication let's disable authentication checks and let's press save this will give us the possibility to work with development tokens that we will generate on the front end more on that like in a moment once we have disabled the authentication checks our next step is to connect a user with stream sdk a simplest way to connect a user uh actually it's the only way to connect a user but it's actually simple that's why uh yeah we we do client dot connect user we provide an object that defines the user having like an id name and an image and after that we provide here the token that at the moment we are generating um on the front end so let's get this code to connect our user uh and where are we going to create the user well we need to create the user to connect the user uh when the application loads right so to do that to do an action when the component in this case our application component loads or is mounted we are using a use effect hook use effect and use effect and very important the use effect should have an empty dependency list this empty array advanced in order to make sure that this function inside the use effect is being called only once when the component mounts without the empty dependency array the use effect will be called every time the component renders and that's not very good for our use case because in comparison or i'm going to explain that later let me not confuse you from the mo for the moment let's define a function here const connect user by the way use effect was imported automatically from react now our connect user is going to be on a sync function and here we are going to do the actual connection with stream chat now this connect user we simply call it inside our use effect and it's going to be called when the component mounts now in this connect user we are going to take the client and we are going to say connect user connect now as i said the first parameter is the data about the user for example id for video let's say by dim for the name or full name let me double check it's just name um but him and for the image um i don't know i'm gonna grab some i'm gonna take it this one from the documentation now actually let me be perfectionist and get my picture all right and uh everything is red because we are still missing the second parameter and the second parameter here is the token um so what is this talking about well imagine in a real world scenario your user will most probably have to login in your application and you do this login with either your custom backend we work with some other backends like amplify or firebase or any other solution when you login that user you get back a token that is unique to that user a token that links to the user now uh in a real-world scenario you're going to do here sign in with your backend and get the user token then this token you would send here as a second parameter this way you know that you have linked your database user with a stream chat sdk user so it's going to be much easier to query or to search for users or to in general manipulate users when you have to combine what stream chat is providing with what your application is doing unrelated to the chatting functionalities so uh because we do not have a back end to to sign in with uh we are going to generate a development token with dev token and here we are going to provide a user id so the user id is ready like this what else do we have to do we will have to await this function call because connect user is asynchronous it has to do some requests to the servers that's why we have to await it yeah and other than that that's that's it so now if i refresh the page nothing is happening um in expo i don't see any errors these are all the errors if i'm gonna refresh however if i go to our stream chat dashboard and if i go to the chat not overview but explorer here i see my users and we see two users one of them not just dev is the admin user that i'm using on the dashboard as you can see here role admin but the second one is the user that i just connected with and what stream chat is doing is first of all checking if this user exists then it connects with an existing user if it doesn't exist it will create a new one so it's if i refresh the application stream chat will not generate a new user and if i change the id here to i don't know test test test save and refresh my application then in our dashboard we're gonna see our newly created user test perfect that's how easy and simple it is to create and connect um a user to stream chat sdk how how is it going so far guys is everything clear do you have any questions related to the project where is lucas uh lucas is actually uh going through kovid so he's already better but he doesn't have a voice so he's going to be back soon and um yeah we all wish lucas to recover faster we we will miss him other wait yes thank you very much i saw that what features will this have well it will have almost all the features that you would expect in a chatting message messaging application um like message replies messaging privately messaging in a group reaction to messages gifs and everything is going to happen in this video in today's video so stay tuned by the end of this video to to see everything in action the good thing is that at the end of this video we are all here with our life are going to test this application uh and chat with each other there to to see if it's working so all right so we connected the user now the next step the next step um is creating a channel a channel in for stream chat is um the middle like the middle piece that connects everything else together because the channel is this chat room that users are joining in their messaging in so um let's start by simply creating a channel yeah like simply creating a channel using client.channel here we need to provide the type of a channel there are multiple times of types of channels uh i can talk about that in a moment uh then we give a idea of a channel here as the second parameter and the third third parameter is the options of a channel where we can specify for example the name after that we can simply call channel.create to create this channel so let me quickly grab it here and where i'm gonna do it i'm going to do it after connecting the user create a channel okay i'm gonna have to replace a couple of things here and if i refresh nothing happens but if i go to our dashboard and if i check channels right now i see the general channel with the type team uh if i go to the get stream documentation and i search channel types one second to find it channel oh here here it is so there are four types of uh channel types or five yeah five commerce gaming live stream messaging and team and what this channel type means is a set of configuration that stream chat provides you by default you can however create any other channel type that you need specifically for your use case with your custom settings if none of these are working for you but they these are providing good enough functionality i mean settings because functionality is the same across uh any any channel type but uh in terms of settings they are different so if you are building uh e-commerce application and you want to provide a way that your customer reach out to you and message you when you choose the commerce channel type because it is optimized specifically for that the gaming channel type uh is good for uh in-game uh chat where you can chat globally or privately the live stream uh is a very good channel type if you're building a live streaming solution for example i don't know let's say this um chat that you are communicating right now live on youtube uh this type of chatting are perfect for live stream because it gives you possibility to join and to see messages without being logged in messaging is very well for 101 messaging and also for group messaging like think about what's up messenger telegram or any other messaging application and team is the the chat that is designed for well think about slack or discord where you group everything into smaller channels you want people there and you can also message privately i think that the best way to showca to see these differences is to check out their demos so let me go on their website and here if i do where is demo chat demos so here you see a social media application where you can talk with people team collaboration very similar to slack type you have like channels where you can write you can see replies and so on you have a live stream gaming this is well like for for this scenario all of these are power by stream by the way and um yeah virtual eventing and other types of um of use cases that's why in our case i chose team uh if you look at the channel general here you see that by providing this type a lot of things here are configured so like i don't know typing events if you want your channels to have typing events for example for a 101 messaging application that's uh that's a good setting but for a live stream that's not good because if thousands of people are typing at the same time you don't want to see like typing event like for all of them and so on like there are as you can see millions of of um options that all uh adjust some functionalities of our application uh we're gonna see that a bit later but now we are done with configuring everything and it is time to implement the ui components and this is what i really love about stream like they provide ready ready to be used and components that are ready for a lot of frameworks but i'm happy that they are providing it for react native and with these components it's super simple to implement everything but let me uh instead of talking about that let me show you so uh in terms of ui components we start with the overlay provider this component is if you want to know more about why we need it it is used for things that overlay on top of uh of your application like reactions overlays similar to what we saw in some of these slides like this reactions overlay they are managed by this overlay provider or full screen image viewer or attachment picker and any other features that stream depends on to display something on top so to to use the overlay provider we will wrap our whole application or most of our application for example our navigation inside our overlay provider to get it we're gonna import it not from stream chat now we're gonna import it from um stream chat expo because this is a ui component it's not part of a core library so overlay provider from stream chat expo hey faysal thank you very much for the donation that's very generous of you how are you doing uh is it possible to combine both typescript and javascript as one project yes it's possible because typescript is nothing else than javascript with types so if you write javascript that's basically a valid typescript without types not sure if that makes sense uh but yeah like you can properly write you you can write for example const a and that's it this is javascript or you can say const a is a string and is equal to this or b here so this is javascript this is typescript because you specified the type but both of them will work um in in in the context of typescript the only thing is that typescript will complain that you didn't specify the type but you can kind of safely ignore that those errors if you're still learning and getting there all right so uh as i was saying overlay provided we import from stream chat expo and we wrap our navigation container in this overlay provider come on overlay provider we do it like this and so now everything in our navigation which contains our screens will be a child or a grandchild a descendant of the overlay provider perfect let's move to the next component the next component is that chat component and this uh component uh provides uh the context for the chat so the thing is that stream chat works a lot with and depends a lot of on context it leverages context in order to have less uh prop drilling problem of sending like messages or clients um all the way down to where you actually need it and for that reason they are design it to rely a lot of on context so these components that we are doing are simply behind the scenes context filled with data that stream chat depends on for example this chat will contain uh specifically the connection with a client um the thing is that yeah like you can either uh wrap your whole application with that chat component uh this is yeah like if your application is mainly the chat or as an alternative you can wrap only the chat screen with this chat component for example if your application is not mainly about chatting for example you have a commerce application you don't need to wrap your whole application with a chat because from 100 users maybe only five will use the chat to content to contact you and by uh wrapping the whole application with a chat will mean that all 100 users will get a connection with a server even though they don't need that so um yeah for our application because it's mainly everything in our application is about chatting i'm gonna simply wrap my whole application with that chat component so let's import it from the same stream chat expo let's import chat and under the overlay provider i'm going to wrap my navigation with a chat the chat component has a required property i'm going to do it like this because it bothers me it has a required property for our client so for the client we're going to take this client that we created on top and i'm going to send it to our chat stream chat expo index which through are requiring monet modules animated to fail to create worklet yes this is the error that i was talking about i'm very happy that it uh we got this error and usually that means that we didn't set up correctly reanimated too uh and usually that means that we forgot to add the babel plugin the thing is that we added the babel plugin but we still get the error uh how to solve that is to restart and clear the cache of our server so let's go back to our where our server is opened let's close it and let's do npm start dash dash dash clear this will open the development server but will clear all the cache will rebuild the application once again and we will get rid of that a renomated issue hello patrick hello universe code how are you doing guys why is it not opening come on come on uh please suggest react native basics websites for beginner i have created a lot of content around react native and i always try to make it as easy as possible to get started with my project build tutorials so i highly encourage you to start from here start by actually building project alongside with me and to improve your skills just implement some extra features in the project that you're building with me a good big starting point would be the tesla clone that we have on up on our channel it's super beginner friendly i kept it very very simple but in that video like in i think one hour you are building uh that tesla the tesla website in an application basically so check it out okay back to our application uh our application is running and i don't see any errors perfect okay so that's it about the chat component let's move on uh the next component is that chat list component and we use this component in order to display a list of channels okay how do we do that let's import from stream chat expo the component channel list now instead of rendering the navigation here i'm going to comment it out uh because i want to work here in abdo.esx so that you can see everything how it puts together after that we're going to complicate ourselves with navigation now here i just simply do channel list save and that's it we have it we have here i see there like the general on top um don't worry about the channel being displayed underneath the notch because it's going to be fixed when we implement the actual navigation the good thing is that yeah like we see the channel created and if i go to where we have it here in the channels i can easily create our channels i don't know memes channel type team create then i can create another one i don't know help team create now if i'm gonna refresh the page waiting it to refresh but i'm gonna try to restart it very nice loading animations right out of the box oh right we are getting into this this error so what is happening here we get into this loop of endless loading but it's not always happening like sometimes where we can be lucky to see it uh the thing is that why is it happening it's happening because we render the channel list before uh connecting the user and this way stream chat sdk doesn't know which user is connected and tries to to load the channel list and goes into an error to solve that i'm gonna have a simple state variable i'm gonna define it using the use state hook from react a simple flag that will indicate if loading finished or if a user is connected or not so let's have it like is ready set is ready use state and initially it's not going to be ready after we connect the user we can set is ready to true now let's prevent um reaching here let's prevent displaying the channel list if the is ready is false basically if a user is not yet connected how to do that we will add the condition here so if is loading completed or if is not ready yet is ready then return nothing only get here when is loading is complete and is ready is true save what's happening set is ready doesn't like it yeah i have here double dots reload blah blah blah blah blah car clone that's interesting error loading channel list error loading channel list um well let's uh let's comment out creating the channel because we needed that only once to to see how to create a channel but now we don't need to create it every time we open the application let's see what's happening here oh okay again i want to see exactly where the problem is true is set is ready okay query channels fail with error to channel match your query but cannot be returned because you don't have access to them did you forget to include uh members in okay that's interesting so uh the thing is that i have created this uh help channel and memes channel but my user is not part of the members of this channel so i can simply uh at the moment i probably will simply add them here add new channel member i need the user id so my user id is vadim and the same thing with this one add channel member and we can talk about that issue later how to properly filter and see only the channels that you are part of okay so members okay we we are here we are here but this one we don't need to to yeah so if i refresh now i am part of all of the channels and i see them and i don't have that issue that we had awesome so we can clear the errors if i refresh everything is working fine so as you can see the channel list the chat list component displays a list of channels that you are part of that's good what are our next steps the next steps is to use the channel component and why do we need it so basically whenever i press on this channel i want to open the channel in a new page and be able to chat with everyone that is part of this channel for that we need to add a couple of components the first one is the channel and for the channel we need to provide a property channel that we want to to render why my keyboard disconnected but before working with a channel let's see how we can get the channel on which we are clicking so if i click on the general i want to go to the general channel well the channel list has a property called on select on channel channel select let's implement this function and see what do we have here on channel select uh this function uh this callback function on select will give us the channel that was selected and you can uh easily console log and see all the details that vera about the channel itself so if i go here and if i press on the general why didn't refresh general i see here all the information about channel but uh just what we are interested in is probably the name uh but i also cannot find name help is it this one name well it's a lot of data i will get lost into it but the thing is that we do not need to work a lot with this data the only thing that we need to keep track is to keep track of what is best selected channel that we clicked on to do that i'm gonna need another state variable selected channel and set selected channel use state initially is going to be null now uh in the on channel select i can simply call set selected channel set selected channel with the channel that we have selected now we set it in state but we need to do something with this what we are going to do well we will conditionally render either the channel list if we don't have a selected channel to be able to choose one but after choosing one and if we have this selected channel defined then we want to display the channel itself that is selected so to do that let's add this conditional here so if a selected channel is null i have a negation here question mark then i want to render the channel list otherwise double dots i want to render the channel component that was automatically were not imported from stream chat expo channel this channel component needs um a property called channel and we are gonna send here selected channel to know what actual channel to display here all right now if i press on one i see an empty screen because we this channel only provides context it does not provide any ui for the ui we have our uh stuff but before getting into that i want to add a way for us to go back and to the channel list how do we go back to the channel list basically we have to make this selected channel null again so that it will render the channel list i'm gonna simply do add text go go back uh it's going to have on on press i need to import it from react native do we have react native here i don't know import import come on import text from react native now on press what are what do what did we say that we want to do when we press on this go back oh i'm getting lost here i don't need this one when we press on go back we want to simply set selected channel are using expo or bare react native we're using expo for this project but stream chat sdk supports both expo and rack native cli so as i was saying when we go back i just simply want to reset selected channel to null now i see some red warnings because we need to wrap these two components into a single component and a single parent component in order for this to work so i'm going to use an empty component which is called a fragment to put them together here text what just examine class does not support attribute because uh have props value what onpress did they mess something up save text cannot be used as it's an instance of text oh here i imported it from somewhere else right text no okay now now it's working so i'm gonna go back to this one and here not text based but just simply text uh and if i press on the general i am redirected but i don't see this go back uh because i need to add some style here so for the style i don't know let's add some margin this is purely just to to see how it works but i don't see it at all so background color red where are you font font size 50. vadim in the search of the button oh i think it should be inside the channel because the channel probably expands the whole yes it should have been inside channel because channel takes the space for the whole um [Music] yeah for the whole page i don't need the background color i don't need this font size i will just simply keep this margin even 50 just to be able to click on it so if i press on the go back i am back if i go to memes i am here i go back i am back awesome we're going to improve everything all of this with proper navigation but now just for us to understand how to put all the puzzles together all of these probably five to seven components that we have like overlay chat channel list channel yeah we're going to do it here in this file so we have our channel component that provides the context for our channel now we need to provide some ui for the users well vara our component called message list and this message list will display a list of messages for that specific channel how to imp how to use it can you guess message list we simply render this component inside a channel component so message list and that's it so if i press i don't see anything because there are no messages i see that my go back was pushed down which is good i can probably add it on top yeah in order to see our message list in uh in action i'm gonna go right away to the next component which is message input component this component gives us this input box that allows us to write a new message same way we import message input and we simply render it below our message list message list save now let's try again general um not message list but message input why did they now at the bottom of the screen we have here our send message box and here i can say hello send all right everything is working i see the hello message i can go back and right away here in the general i see hello why is it in the general did they press on the general let me write here help because this is the help channel let me go back yes oh yeah yeah it was weird because i remember pressing on the last item but the thing is that um this message list will automatically sort displaying the channels with the most recent messages on top so now my help my help channel is on top if i write something in general now i am the first and if i send go back now my general is on the top uh so as simple as that we have implemented our chat we are not done yet but so far we with a couple of lines of code that fit all on one screen we have implemented this application where i can write messages i can react to messages i can give a like i can reply to messages like this i can send a photo done send come on this one send i can attach a message let's wait until the photo is uploaded send i can find a gif uh i don't know what do we like cats i don't like cats why do they write cat no i don't like cats dogs let's uh do that press on the find and here we can choose any that's not a okay this is a cute dog and we can do a lot of other things that most probably i didn't even find out for example we can tag people right away because we have only one person in this chat room i can tag only myself but yeah that's how how easy and how full of feature is this stream chat is the key which is coming by default and with minimal input from us with minimal development time or adjustments the good thing is that all of these components like everything that you see here this is like the default style and the default components but if you need to adjust them you can easily do that and everything is customizable like i looked into the documentation up to this double ticks were like smallest icon you can customize completely the component and render something that you need there so flexibility and extensibility to extend this application to meet your needs is is provided by by steam stream and yeah we can do that we are not done yet guys we are just getting started this is still the first part of the video where i'm trying to teach you um how to work with stream but then we're going to get into implementing uh actual discord and managing putting everything together into the separate screens and so on james thank you very much for your messages did you add a profile photo yes i added and you can see it here when i reply um other way to see it other way to see it is to log in with a different user so if i go here with with your name yusuf if you don't mind and i'm going to give you a different avatar do you want to be elon musk you're going to be elon musk today so if i do that and i refresh uh but uh probably most probably i will have to add you to that chatrooms because you're not gonna have access but i can easily i do here from the dashboard so just for us to see how it looks when there are more people in the same group like this perfect memes perfect come on all right here we have it i already saw them and here we you you see the avatar of the person that last uh sent a message and you can say hello don't we have any messages here most probably no but if i go back and i go to the general here i can see all my messages and i can go ahead and reply to for example let's see other one hello reply boom right away we replied and if i will log in back with my account uh we're gonna see like your profile picture in my profile picture wait your profile picture i think you got you got what i mean meant and here is the last one i don't know why it didn't set up your avatar you don't have an avatar that's weird but yeah as you can see i can like it what are the prerequisites of this course uh for the prerequisites i have listed them uh in the documentation of at the beginning of a project you would need a couple of things to to download and you would need expo environment setup but other than that like we start from uh from zero from ground zero and we work our way up until we build everything together so some javascript knowledge is very important uh react native knowledge like family familiar reality at least you don't have to be a master to follow this because it's quite easy to implement everything it's so far only these components all right so um so in summary what we have done so far so basically uh how stream chat is the case work in a couple of words is that first of all you need a client that is an instance of stream chat in order to provide to the ui components v function correctly okay now i got it now yeah so you need that client to make a connection with stream chat sdk to your specific project using your api key using this client you can uh connect the user and you need to connect the user to make the connection with one specific user in your application it's also possible to link stream chat sdk users with your database users by using tokens and you can check this documentation for more details after that you will need to use a couple of important components and you will first the first one is the overlay provider this component is helping stream chat sdk render things that are overlaid on top of your application such as message reactions and so on or file attachments or image pickers here to end and also you need to wrap your whole application or only the part that contains the chatting functionalities with that chat component this chat component is what will provide data to the ui components through contexts then uh there are a couple of uh ui components first one is the channel list and we saw here the channel list is helping us render the list of channels and the channel list like we now simply use it as it is but you can uh send a couple of uh parameters in order to customize what channels are displayed or how are they displayed you can send filters sort methods and a lot of our customization function to to display exactly what you need in your application uh and then in order to render the channel we need to wrap our channel page with a channel component that has information about the specific channel that you want to to work in uh then there are two input components not input two ui components the first one is the message list that renders a list of messages as you can see here like all of this is message list what is good about this is that everything that we are doing is almost production ready like i can say is production ready from the stream stream side part now it depends on your site to to adjust a couple of things but what i mean here is that for example this message list is actually paginated and if you have here a channel with 1 million messages i would probably try to generate a lot of messages and show you how it is paginated but what it actually does is it will not load all the messages at first will it work to showcase this let me try i went crazy a bit it will not load all the messages it will load only the latest messages and then as you scroll you see that this scroll bar increases like when i reach the top it increases because it queries the next set of data this is a very important feature uh in application in order to make it uh production ready to say because there are situations when you have a lot of data there and just to query all of it and to render all of it will take a lot of time whatever thing yeah like this message list as we saw like provides a lot of features uh also if a message was seen sent or read message statuses and uh the last component that we saw is the message input component and this message input helps us send and compose messages there is also the thread component we might talk about that later in the video so you can start a thread reply here but for that yeah i see here a thread reply but when i press we need to redirect to the thread messages this is a way to keep messages like compartmentized oh my god such a hard word that's it that's everything that we needed to know about uh stream chat for now do you have any questions so far because in the next part we are going to start by implementing the a basic authentication to implement both indication screens so that anyone can write their login name uh and the name to sign up and start chatting and then we will uh start by displaying the list of channels in the side menu and doing a lot of things to be as close as possible to the discord application let's see if we have any questions now as we have finished the first part of the stream uh google sign-in was not covered in the authentication series yes i know we might do that later i think yeah like the social sign-ins i have done a very in-depth tutorial about them for the course the full stack mobile developer course that i'm working on and um yeah i'm not sure if and when i'm gonna do the google sign-in on youtube okay you can use a flat list you can use a flat list for what everything is handled by us behind the scenes by these very simple components that we saw for example the channel list behind the scenes of course is using a flat list or the message list as well is using a flat list but we don't need to take care of that like stream uh these components are taking are self-managed we need just to import where we need to display them okay oh here is an interesting question now i'm creating an app with a list and a map my map and the list are two different components i want the list to scroll when i press on a marker i have done this feature on in our airbnb clone so you can check on our channel the airbnb clone where i i've done these functionalities where we have a list of data and a map and they are synchronized when you scroll through the list the map adjusts adjusts and focuses on the marker and when you press on the market the list automatically scrolls there you can check it out on the channel how long does it take to prepare courses like this it takes a lot of time it takes a lot of time to to prepare to prepare very well okay is it a good practice to use a lot of npm dependencies in the project um well i don't have like a yes or no answer to these questions it really depends on the situation um if you have a very small functionality that you want to implement and there is a choice to import a package that has these functionalities but has other 1000 functionalities besides this i would think if i need that package where i would easier implement that functionality myself but in in situations where you actually need like a lot of functionalities from that package then definitely use it and don't try to uh complicate yourself and don't try to reinvent the wheel because building application is not about writing code it's about solving problems and delivering on them like delivering applications and if you can do that faster and more efficient than other developers you're gonna win uh the another thing is that when it comes to mobile applications adding more depend like in web development adding a dependency is a is a hard topic because by adding a dependency you increase the bundle size of your application and every time the user will go to www.nodejust.dev they will download the whole bundle and if you have a lot of dependencies they'll have to download more files this will lead to more load time and users usually leave a website if it doesn't load like in one second or so however with mobile applications the way user interact with application is they first download the application so just by adding a couple of kilobytes from an npm package will have zero impact on your application because it's gonna be downloaded it from time and when you open it at that point in time it doesn't matter if you have one dependencies or a lot of them so that's the simplified answer did you ever use amazon personalized yes i used that in my startup and also for my graduation project my gradation project was around amazon personalized a pretty pretty dope technology in the first page why don't you add padding i don't want to mess up with with this at the moment because we are gonna in the next step we're gonna implement navigation and at that point like we will everything is gonna be it's gonna be look fine that's why i'm just ignoring this issue uh vincent i'm using a flat list but my list and map are in two different files well in that case like you either have to drill the props i don't know keep the data in your application and send it through props to your components or a better scenario would be to use a context and today actually in the next in the next step we're going to use a context so you can stay tuned and see how how to actually use context to share data between components all right guys so um hey david thank you very much so let's get back to our application because we still have a lot of things to do next step that i want to do is to uh implement a basic authentication uh because at the moment the way we authenticate user is hard-coded and all of them have the same id and the same name we need a way that the user will provide their id and name and then we can connect the stream chat as decay with those data in order not to have to uh code this login screen i have prepared it for you and you can download them uh from the asset bundle after you download the s and bundle let me quickly find where do i have them it's a small component that contains the authentication screen momento here so in the discord asset that you downloaded go to the code and here we have a sign up screen so let's drag this sign up screen in our source screens here okay here is our sign up screen you can go through the code and analyze it's not complicated it's simply a couple of text inputs bind to the estate variable and then a button that will call this sign up function that's it below i have all the styles that we need nothing more than that but now let's open our navigation index and we will have to add this login screen in our navigation so let's scroll down where we get to the root navigator i'm going to copy this stack screen and i'm going to duplicate it here in place i will rename this to sign up screen and for the component i'm going to use sign up screen it was automatically imported from a screen's sign up screen the red arrow here is coming from the typescript you can safely ignore it it's not going to break anything but if you want to get rid of it you can simply open the types dot esx file find root stack param list and provide here provide here the signup screen and undefined okay now we need to reload the application and we don't see the signup screen oh yes we will not see it because in our update tsx we have commented our commented out our navigation well i'm gonna do our way i'm gonna comment out everything else and i'm gonna enable navigation because now we're gonna move all of these features like channel list and channel and message list all of these we're gonna move to their uh place to their screen basically so here we have our login screen which is very similar to discord in terms of design um and we're gonna roll with that dark theme throughout this tutorial that's why for the status bar in order to see it better here we can provide a style light and it will turn to yellow style for the status bar now having this uh sign up screen what do we have to do when we press on this login button well it at the moment it simply to logs the username that is what why i just pressed a couple of buttons so on my keyboard please don't cancel me okay um well the thing that should happen there is the connection of a user so for that reason i'm gonna copy this connect user function from our up.tsx i'm not going to copy i'm going to cut it from here because we don't need it here we need it in sign up screen so let's add it here here we need the client the thing is that from in-app.jsx we had the client uh between um initialize here we could do the same in our sign up screen but we would need to import the api key so it's nothing wrong with that by i prefer getting the client using a hook so most of the things most of the data that stream has they expose it to you and you can access it from the hooks basically the client is data that the chat contains the chat provider so let's using the hook get the data from the chat context provider and i'm gonna do it like this import i use something from from stream chat expo and i need use chat provider use chat context use chat context this is the hook that i need now using this hook i can easily get the client equal use chat context save all right now our client is defined here do we need set is ready no we don't need set is ready and we don't need this creating of a channel we will need something else basically somehow navigate to the home page let's go back to optsex and clean up some some of the things for example now we don't need this set is ready it's going to be handled automatically by the authentication flow okay and from here from this if statement as well remove it is ready and this use effect as well because we do not want to connect the user now we want to connect it only after he signs up well here okay yeah i already discussed about that because in this connect user well in b sign up you first would sign up with your back end after you receive that you would connect the user to the stream chat sdk uh the thing is that we're not calling it yet so let's take it from here and call it in the sign up and actually this navigation to the home page will be in the sign up not in the connect user okay uh let's test if it works so i'm gonna open this one uh test test and for a password i can do anything here login calls to con next user is detected a dealer should only call this function once okay because i pressed two times two consecutive times on the button by accident and we cannot call connect user more than once it should be happen only once in the channel because this connect user method will open um a socket with the server and it will keep it open in order to receive real time messages so by opening multiple connections we we can have memory leaks another thing about connecting a user is that yeah like once we connect as i said it opens a socket now when we leave application or when we leave a screen that connection is still there because it was not cleared up there is a method to disconnect the user and to clear up all the connections in order to not have memory leaks and i'm gonna do that in the app.esx when this event should happen this event should happen when our application is closing when our application is unmounting well remember when we did the function of connecting the user here when the application mounted we use the use effect for the unmounting event guess what we are going to use the same use effect use effect with a function and we're gonna have here empty dependency array to be called only when the component mounts um everything here that we define this is done when component mounts but everything uh that is inside the function that will return is executed when the component unmounts so this is done when component unmounts and here we can uh call the client.disconnect user boom and now when the application disconnects we will disconnect the client as well to make sure everything is perfect okay so we added the authentication screen we connected the user with chat sdk now the next step is to navigate home only if a user is logged in how can we do that well if you know some things about the navigation you would say let's simply do navigation navigation dot navigate for example home navigate home this case this way it might work i mean it works but it's not the best way to do it the best way to conditionally redirect the flow of your application based on some important events for example authentication uh there is a flag like if the user is authenticated or not and we need to to redirect the user to that specific part of application for that scenarios it is better uh in our navigation here to actually conditionally render the stack screens based on some can based on the condition that we need so we need to render this signup screen only if a user is signed up and we need to render these other screens basically in our case when the user is already signed up how that will happen like in a simple words like let me show you instead of talking for example i'm going to have a very variable i don't know user id that will specify my id so initially it's going to be null right well now let's put all these text screens in a conditional rendering so if user id is not defined question mark then render a sign up screen otherwise we need the fragment don't forget about that render this over to uh stack screens now i see the sign up screen but if this value will have an id for example vadim i will right away be redirected to our bottom tab navigator and we will be able to work with this this approach of conditional rendering different stack screens different screens in your navigation uh is much better because you are sure that if the user is not authenticated there is no way he will be able to go there period like there is no way you are just completely like you're not rendering this part of your application at all and yeah you restrict access from there now the question is how do we set this user id when the component when the user signs up well we can save it here as a state and through some properties send it to the sign up screen to update it and so on but in this situation we would go into a problem called probe drilling where we would have to send the property down to a lot of components until we reach the component that actually depends on the data a way to solve probe drilling problem in react and react native is to use context context is a shared data that you can easily access from anywhere in your component when anywhere in your application or actually let's say in any descendant in any child of your context provider we saw for example that i talked about context that this chart is a context and it holds data about the client this where this channel is a context that holds data about the channel but let's see how to develop such a context provider like this to be able to share data about the authenticated users to do that i'm going to create a new folder context and i'm going to create a new file of context dot tsx here um we will need to import create context from react and let's right away create our context so const of context equal to create context and here we need to provide the value for our context sorry here we need to provide the default value of our context basically we will include the structure of the data that we need so what do we need in our of context we need a user id to know which is the authenticated user initially it will be null and we need a function set user id to be able to update this value from everywhere in our application you're going to see where we will need it and the set user is going to be a function that will simply return void and actually it should receive a parameter new id of type string if that is important uh actually here not void because it's not a type it's an empty function okay now this of context that we get by creating a context contains two properties inside it contains a provider and a consumer for when we need the values we would use the consumer to consume the context but the component that consumes the um the the context should be a descendant of the context provider so for that reason we can either import this off context in our app.tsx in the same way as we wrapped our whole application with a chat we could do uh we could wrap it in them of context.provider that's also uh possible but i'm gonna show you how to do it in a better way similar to how stream is doing by simply exposing one component we're gonna expose as well one component so let's do of context component equal a component that will return what will it return as i said everything in order to access the context we need to wrap everything else in the of context dot provider now everything that will be inside here will have access to the provider but what will be inside here who is going to be here well i don't know it's going to be anything that um that we receive that we receive as children so let's receive these children and simply render them inside the provider uh in a moment it's going to make more sense i want to export default uh context component and it uh complains that the provider should have a required property value basically the value of this user the actual value of this user id and the actual setter for this function what would be the actual values of this user id and set user id well it's going to be a state variable that this component will keep so the user id and set user id is our use state variable that we initialize with null now let's send here the value as um as an object similar to here and let's send their user id and that set user id okay these are default values that are initialized with null and empty function but here we provide the actual values these ones you can ignore this red warning uh it's simply because of type so if you just copy this type and provide it well no i'm not going to go into that road so let's do it now what do we do with this health context component and where will we get these children from well let's open our up dot x tsx and import of context component i'm gonna import it with the name of context simply you can rename it of course [Music] yes like this and we're gonna wrap everything that we need to have access to the authentication well it's anywhere here on the top so of context i will wrap my overlay provider right save now this out of context expects the children property where does it get from well everything inside the of context is considered its children and will be sent to the off context component through props as children that's why we get them from here basically we behind the scenes it copy paste them here we don't need to do that because we dynamically render the children and now uh everything here including the navigation and all the screens that are inside the navigation will have access to the of context okay how do we get this data we get this data using a hook called use context this use context hook expects uh the actual context that we are that we want to access and i'm gonna simplify our work by creating a very simple function that we will export from this file called use of context this is going to be similar to the use context but it will not expect any parameters because it will automatically return our of context so it's going to be an empty function that will simply do use context of of context export const yes it's as little as this but now instead of importing both use context and the of context we simply import this function that will give us everything so the first step in our screens sign up screen we need here to set the logged in user well let's do it like this we will structure something from what from the use of context from user of context we are going to structure the setter because here we want to set the user let's call it after we connect the user set user and the username of the id is going to be this one well but you know what i forgot to update the hard-coded and dummy data because what we want for the id is going to be the username that we are typing on the keyboard in that input field the name is going to be this one name the password we don't need for stream chat is the key the images everyone is going to be elon and but uh wait a second i think that's why it didn't work because you know what because elon musk is not is that png whoo so uh the last app is here for the dev talk and we need to give the same id so i'm going to give username and for reset user and id is as well username now everything is with dynamic data uh navigator can only contain screen group react fragment as a found screen for the screen root to render this component navigator pass it to [Music] wait a second what where and how what do you want from me well let's go to the navigation and here uh we already implemented the logic of conditionally rendering our authentication screen the only step is to properly get the user id not from here but from our of context so user id is equal use of context like this okay let's see if it works now if i log in i should be redirected to the main page so username here let's do a dim or let's try something else test test test login i'm here automatically redirected and if i will look in the dashboard users i see this test user awesome yeah that's it with our login screen for my convenience uh i'm going to sign up screen i'm going to initialize my username with team in the name with a dim because we are all when refreshing the application we will always be redirected to this screen uh because this is a very basic authentication like we just simulate the authentication with a back end and we use it to connect with stream chat sdk but in a normal in a normal authentication form you will definitely persist the data that the user is authenticated and after the first login if a user will refresh he will not be redirected there but this is not the point of today's tutorial if you want to actually learn more about authentication and if you want to build a fully featured authentication flow with all the screens that the authentication needs like sign in sign up for good password reset password confirm account with email confirmations with connection with amplify then check out on the channel i will try to leave a link somewhere here to the playlist that contains all those videos where we build the authentication flow from scratch oh i'm already tired but super excited for what's coming next uh why not use redux why complicate why should i complicate this application with redux if i just simply need to save one variable about the user that's the question that you should probably also ask whenever you start a project link do i want does this library help me or does it complicate stuff and because redux is probably fine in a lot of big size projects but for a lot of other projects like you don't need to complicate it with with redux you can go and implement the same features with use with a context war with simply passing around props if you don't want to to use the context or better you can try recoil recoil is very easy to use and very performant global state management is it possible to use redux with amplify can you make a tutorial on that i haven't tried but most probably yes because they they're two different things but again like i am not the biggest fan of redux there are better tools that in different scenarios work much better than redux and you know most situations where i've been very rarely where redux was the logical option in a lot of situations we end up using something else that offers better functionalities or the same functionality as redux but yeah like in a different context or something like that uh for example like in the context of amplify you could use datastore or in the course i am teaching how to integrate apollo client to query them to query the amplified database and the thing is that amplify not amplify apollo apollo client besides being a graphql querying client it is also it has a caching mechanism and this caching mechanism will serve you as a global state management because if when querying the data they cache it and you they don't duplicate it so it's it's like a global state management um in other situations like i prefer using recoil or in easy solutions like this one i prefer using the context so as you can see there are different ways around redux and i try to avoid redux as much as possible okay okay oh so um can someone just buy part of a course i have run a pre-sale campaign uh previous year and uh a lot of people like more than i expected joined the presale campaign and now they receive new modules as i finish them and as as i release them and they give me feedback and then i can improve on this so at the moment there is no way to get into the course because i'm trying to focus all my energy on building it and not like marketing and onboarding clients uh so expect in the couple of months to to have an announcement uh because um it's close to the finish there is still a lot of things and verse i want to teach you everything there so i'm trying my best to to focus and to scope it in order to deliver faster so believe me it is in my best interest as well to to finish it faster and release it but i don't want to trade the quality of a course uh for faster deploying it and for faster bringing it to market just for the sake of i don't know making some money i don't want that i really want to build a great course that people love and people get actual value out of it and at the end we are comfortable in building any react native application from scratch both on front end on backhand testing deploying oh my god that's a lot so that's my goal okay that's a nice chatting um what what do we need to do next so as i said i did that uh let me quickly commit everything i forgot to to commit more often by the way the source code of visa application is going to be available after the live stream i need what happened here huh okay never mind i'm gonna figure it out afterwards which platform you prefer as beckon if you're making an application for production uh definitely amplify amplify amplify and amplify it's so good when it comes to creating production-ready applications because there is a big team at aws that is working to make amplify uh secure uh scalable reliable and the only thing that we have to do is integrate with it and if your project allows it i recommend it otherwise if it doesn't allow to use tools like amplify then i would think um on either going serverless in that situation you need a bit more knowledge about serverless and how to properly design microservices or you can build an old-school node.js server with either like a rest api with express or i prefer a graphql api and you can do that as well with node.js okay guys so let's move to the next step we finished with a basic authentication the next step is to display the list of channels in the side menu of our application this is how actually discord is doing in the side menu they are displaying the list of all the channels where you can join and and start chatting so for that uh the first time in history we are working with drawer navigator let's have a look at the documentation for the drawer navigator because this is gonna help us add this side menu or hamburger manual as others are calling it and we're gonna do that simply by installing this drawer navigator by doing npm install drawer let's open the terminal and install it right away here oh cold coffee so good after that after we installed it oh in expo doesn't matter it will work with npm as well but you could try to run this one the gesture handler we actually already have installed uh okay and now let's get this simple drawer component but actually i'm gonna create it uh from scratch because it's not too complicated and i'm gonna show you step by step how to do it so uh having it installed let's go in our navigation uh folder and for our drawer i i like to keep all the navigators in their own files because it's much easier to work with for example right now in the index we have like both the bottom tab navigator and the home stack navigator and the icons and so on like it's it's kind of a mess and it it's getting very confusing very fast but if we create a file uh called drawer navigator navigator dot esx and here we will first import create drawer drawer navi gator from react navigation drawer now we're gonna create our drawer equal create drawer navigator perfect now let's define our component uh drawer vacator a simple component that will return what it will return navigate it will return drawer dot navigator and inside drawer dot navigator we need to have drawer dot screen very similar i mean almost the same as any other navigators for example in case of stack navigator where stack navigator we simply create native stack navigator we use stack.navigator and stack the screen inside same things here for the name let's call it i don't know test and component i will do tab tab one or how is it called screen tab one screen save now let's do export default drawer navigator export default drawer navigator and what should we do with this exported drawer navigator we need to import it in the index so let's import drawer navigator from this directory and we're gonna render it instead of our root so basically we will not need this bottom tab navigator our root will be that drawer navigator so after the user signs up the drawer navigator will be the main component save i don't think we need these bottom tabs bottom tab navigator no we don't so i'm gonna actually remove it too to keep it simple save and from here a lot of things can be cleaned up like this probably now it's clean okay so here we see our our test our tab one but we see also the hamburger menu and if we press on this we see our component here our page basically what drawer navigator is doing is rendering the list of screens here in the side menu and if you have more of them test2 then you can um simply go from one to another and also you can easily swipe left and it will open nice what is your streaming schedule every friday at the same time it's 3 pm gmt or 2 hours before current time in your local area so make sure add it to your calendar and join us every week we are learning new stuff every week and we all evolve all right so uh having this drawer here uh what are the things that we want to do so basically let's have a look at one of the screenshots um actually i'm gonna add the screenshots in the assets as well and you're gonna be able to download them to easily see here what do we have to do so as you can see this drawer navigator is displaying first of all the title of the channel and then the title of the server and then a list of channels here okay okay okay so that means that we need a custom drawer navigator because with this approach that it automatically renders our screens here it's not working for us so how do we do a custom drawer navigator well we define a custom component const drawer content and this will return well let me let me actually get it from the documentation from them on momento custom drawer content this one right yes because it has a couple of features that it we don't need at the moment but they are quite important from these two things we we need to import from that drawer drawer item so now let's refresh oh but we didn't send it to anything i will switch to a arrow function because i like it better and this custom drawer content we can send to the drawer navigator as a drawer content here and now the drawer navigator will use this component to render its content now if i go here i see the same list and one optional help button uh where are we coming from well this custom drawer content receives some props that will contain all the screens there is this drawer item list that we can import from the drawer and this will basically render that basic thing that you that you know but you can also use a drawer item to add more options if they're not here if there for example in another part of your application or if you need to add a contact us button and so on you can adjust with this a lot of things but what i want to do is completely everything from scratch so i'm going to start with a text and this text will render the name of a server so knowledge development for example we need to import text and style from react native let's define the style sheet like this and we will have what title and for the style for the text i'm going to give styles dot title well i think this is the time when we switch to uh to work in dark mode because i really like dark mode that's all i can say so uh to where we have it here we have navigation where we send the color scheme instead of having a dynamic color scheme based on the application which is which is fine to have in your application a dynamic color scheme i would rather not spend time into implementing the both color scheme because it's out of a scope for this video and i'm gonna rather override the color scheme here to [Music] dark now as we can see our navigation is using the dark color scheme awesome back to our drawer navigator here we have a title uh the title what it should be first of all color white then uh font weight bold to make it bold and also align self center to center the text in the middle okay and let's increase the beat the font size to at least 16. okay and i'm gonna add some margin vertical or just simply margin ten i'm not sure if that's a lot or not but we're gonna see later when we import some other things okay besides the title what else do we need here well as i said in the here we need to render all the channels that we can join how to do that i think we did that already well let's go back and here is how we can do it displaying the channel list in our drawer below the text so let's import channel list from channel list from rec stream chat expo and also let's bring them on channel selected actually i'm gonna bring it but we will not i'm gonna bring it here but i'm not gonna use a state variable to decide what [Music] what channel to display i would rather navigate to a screen for this channel so from web.tsx i can remove this on channel select and i can remove the state for the selected channel okay so uh what what what else let's have a look if we see anything all right so here we see our channel list and we can press but nothing happens regarding the color scheme and colors for a stream we're gonna talk about that in a moment but now let's implement yeah let's let's first implement navigating to the channel channel page and after that talk about the colors and customizing the components from stream chat sdk so guys what do we need well we need a separate screen that will uh have a responsibility to render one channel well we don't have that yet so for that reason invest screens i'm going to create a new file channel screen because this is a screen that is displaying a channel tsx here let's do react native functional export to automatically generate this one i have a snippet so if it's not working for you don't worry you can either copy the boilerplate from here or you can check out the video where uh i show you the best my uh vs code extensions and where i talk about these snippets okay channel screen let's keep it like this for now let's work a bit with the navigation so where will we include this channel screen well this is going to be part of the drawer navigator because here in the drawer navigator every channel here will redirect to that screen to that channel screen so that's why we need a channel screen and the component as well is going to be channel screen that is imported from screens i don't need top one anymore and i don't need these two things okay now uh we need here to navigate to the channel screen well how do we do that this custom drawer content will receive improps the navigation object and having the navigation object we can call on it navigate and where do we want to navigate to that channel screen save if i press this one i think i have to reload login uh virtualize list should never be okay one second if i press on this one i go to the channel screen and i can also do options type title channel i don't know if i press on the other one again i'm going here to the channel uh but how do we know to which channel are we going well for that we have navigation pro uh properties so i'm gonna send the channel through the properties as the second ob as the second parameter and inside the object here okay that's good we re we have a channel here let's go to the channel screen and see how we can receive it here well to receive it uh we need to get the parameters which can be uh accessed through the route the route we will get using the use route hook from rec navigation native we first get the route inside our component on the top use route and the channel will be around dot params these are the objects with all the parameters and then we need to access it by the name as we are sending it so if we're sending with as channel that's the name of a parameter channel okay but this channel might in some cases be undefined so let's do it like this if channel is undefined uh show i don't know view and the text select a channel from the at least select the channel from the list let's do it like this uh i'm gonna also have to start working with some styles so recognitive style i need to import the style sheet styles dot error container and here error text error text so for the error container i want them just flex one two barrel container to be on the whole page and i want to align with text in the middle so i'm going to give flex direction no flex direction justify content center and align item center to center them both horizontally and vertically center okay and now arrow container flex 1 error text this is important because without overriding the color we're not going to see it so i can simply do white and font size 10 for the container we can add some padding not to touch the margins now if i log in uh connect user and find is not an object draw params channel yes because we are accessing the channel but whenever we first open the application there is no not a single channel selected so the params is empty that's why we need to access it safely by adding the question mark here because trying to access the channel property on a null object will throw that issue but now it's working but i don't see my error container do you know why background color red that will tell us i don't see it either oh because we are not returning of course save okay here we have it i don't need the background color red anymore and font size 10 wide font size 10 why did i want you to do font size 10 16 select a channel from the list from the list on the left or something like that now if i select the channel i don't see that error anymore and if i move to another channel again i don't see that error all right now now what now we need to render the actual channel with the messages well that's not too hard because we have done that already so what we have to copy is the channel component here we're going to copy it let's go to the channel screen and render it here instead of a view i'm going to have to import import channel message list and message input that's instead of selected channel we're gonna send here the actual channel that we receive from the routes and we don't need the go back text because go back now is handled by navigation or moving to another thing now memes let's go here we have it it's changing to power one hello general come on general is it moving to our part or not i'm just trying to figure it out no i think it doesn't move mi in all the channels that we have here as vadim channels help members i'm here am i here i'm here let me just add me in the general as well okay let's see well we have a first error virtualized list should never be nested inside plain scroll view with the same orientation why is this happening well this issue is happening when you nest two scroll views with the same direction for example vertical one into another this is bad because um at the end of the day react native will not know to which scroll view it should handle your scroll event because it should be only one and it's happening because our drawer content scroll view and the channel is a scroll view and the channel list is as well a scroll view so for that reason we need to get rid of one we cannot get get rid of a channel list so for that reason i'm gonna replace this with with either a view but better a safe area view just to make sure that our contents does not go underneath the notch save a review now login i don't see that error and now i don't see anything else as well because i need to adjust the style and say that vsa variable should take the whole space of our side menu save login let's go and here we have it general and if i move to the other one it doesn't move it doesn't move uh it doesn't move because it doesn't update but why it doesn't update um in the channel screen let's console.log channel i have an idea why is this happening i just want to be sure so if i go to help oh channel url what oh i d general and if i go to memes is as well general is as well general [Music] channel in the drawer so here what we are doing is navigating instead of navigating let's try to do push and if it works i'm going to explain you why it works so uh okay let's go to the general json street if i can also realize cyclic structures okay this is related to our push right on select channel let me try to get one thing for example id is it part of no this is active channels channel i just need one idea of this channel messages object okay does it have any channel screen console.log channel to string hello xdreamland how are you doing okay show me something give me something in general it's an object come on uh channel the structure of a channel dot let's do it like this channel of type channel i'm just trying to find out how to get an idea of this channel to be able to console.log to see if it changes or not now channel dot [Music] name channeled name undefined it's undefined it's really undefined okay it's not name it's should be a function something like get get what okay we're gonna need to look through the documentation so where we have channel but this is a component i need channel context okay creating channels channel id creating list channel data when creating no we need to [Music] come on yep logging non-server client logger channel extra data channel it may also contain some extra data some examples have been mentioned here okay we're gonna figure something out we're gonna do it let me reload clean everything hello puri thank you very much okay initially it's undefined when i press on the general again i'm lost in this uh you know what with chrome debug tools is gonna be easier uh how can i do that yeah like this and i'm gonna open the debug tools because i can yes i think so console let go why you closed expo goal all right login come on come on why so slow doesn't want to work really like be like some small problems like always messes up everything probably doesn't work with chrome debug tools [Music] so i'm gonna have to stop that or let me try again no i'm gonna probably have to stop stop remote debugging and login simply what do they have here and drawer drawer let's see option header events examples checking nesting inside our snow uh react navigation [Music] navigate with new params it doesn't really render or it might actually re-render oh it's working why now it's working really i just had to play around a couple of times until it finally worked okay i don't mind but maybe i didn't pay attention to something but yeah like i can go to over general all right i can go to the memes it's again general help memes general general general just trying to see if it works memes no it's the same i know i know why it might happened might happen it might happen because yeah i remember actually the channel is updating but this component inside does not update when we re-render so we will have to uh just a moment just to to see if that's actually true i need to get the name uh of a server uh to explain docs where is it docs channel name channel the data dot name is it channel dot data dot name and if yes i will do something with this undefined is not an object channel data oh yes because i need to put it in like this because channel might be undefined so now let's see [Music] login undefined but if i select one general if i go to memes it's memes fine if i go to help it's help perfect what we can do with this name before we fix the next issue is to set the title of a page we can set the title of the page using use navigation um const navigation equal use navigation and then we can do navigation dot set options title can be this one or if it is null then default to channel now help we see at the at the top general help memes yes it's working i mean it's working this one but the actual message lists are not updated uh when we update the channel so i remember i fixed this issue what we have to do is we have to uh trigger the recreation of this channel and not the prop update because right now we get a new channel and we simply update the property here but we still keep the same channel uh it would be possible to to implement that i'm not sure why it's not done to listen to these updates with a user effect but in our case we need to we need to trigger um we need to trigger a recreation of this um component so i'm thinking i am thinking to recreate it whenever we receive a new channel that's tricky um i would like to see how i did that previous time so in the chat probably we have here screens uh channel screen we have a channel aha we are working here with the channel itself okay okay uh so let's think how to better do it so we receive a channel update we have to completely recreate this component [Music] does um [Music] there are a lot of ways like hacky ways to approach that i'm just trying to figure out which is gonna be um the easiest to explain when you're trying to do something fast the system is built is like really yeah definitely um so we need a way like a switch to turn off and turn on whenever we receive a new channel and that's switch will be having caused assign different key to uh channel key do you think that would work channel dot data dot name system be like [Music] memes wait if that worked oh my god that actually worked i would have done it so hacky probably i'm tired but i was thinking oh my god of including like already 10 state variables thank you very much young jojo no the other one it's going to be very hard for me to pronounce but your last name is fu so thank you thank you very much for helping me actually that saved me oh my god yes and now we can move from one channel to another easily and everything is automatically updated we can send messages as we were used to and that's awesome okay okay um now what else what are the next steps do we adjust the styles let's do that because it's quite easy so um well a lot of times when there are pre-made solutions the problem with the pre-made solutions that we just use as they are is the lack of flexibility and in a lot of cases in your application you need flexibility what is what i like about stream is their flexibility i already talked about the ways you can use custom components for almost anything there is a guide for example customizing the message input you can change a layout you can change a lot of things disable the send button you can do it yourself with an image upload preview by creating them by putting the pieces together changing actual the things how they work based on the data but in a lot of cases you don't want to change everything you just want to change the style to match your design well for that stream is providing the theming let me find it filming filming so with filming you can easily adjust the theme of what the stream chat is using and here i'm talking about colors about anything that is related to react native styles i don't know the roundness of the buttons the colors the sizes of a text the font that everything can be easily adjusted through the theme so how we are going to do that okay all right so here we have the dark mode feature so they for the dark mode what they are doing while they have a get theme and which returns and object colors okay okay i get it so let's go in upds i'm gonna first of all clean everything because we already implemented as we want uh i'm gonna clean some of these things as well so uh in the application let's define the theme [Music] the theme is going to be an object and if you want to get intellisense suggestions then we can tu tu tu where is it we can type this object as deep partial uh theme it should be just simply film that will be imported from the here and this one as well now with this everything that you write here will be automatically typed and you know if you are doing it correctly or not because if i do abc something like this typescript will say that theme does not have this abc but if i do colors i already got an intellisense and here i can do black for example and i will change the black to be white so that's how we switch to from from the light mode to dark mode we change the colors so black will be ff f save now if i log in if i check this one uh it's not working because there are a lot of colors there oh because we didn't send the theme anywhere now with this theme we will send it to the overlay provider is it the overlay provider yes is to the overlay provider so let's do here style equal no value value equal style theme save okay i already see that my names of attacks disappeared because we set the blacks to be whites if i set them to be red you're gonna see that the names become red and this way we can override all the colors that we need to override for our theme well you don't have to spend the time to do that because i have prepared that for you and you can find it in the discord asset bundle uh in the code there is this colors file open and let's simply copy them and we can either add them here in the up.tsx where we can go to the source there is a thing like constants and here are colors let's do it like this export const stream colors so here i provide i i switch basically the black to white and all the others to to be opposite now in our app.tsx let's do it like this stream colors from source constants colors and here we have it everything now is you cannot use a channel after client disconnect why client disconnect here we have it all the channels have um dark mode that's awesome and as you saw is just by simply overriding the styles here but customizing does not stop here i saw another warning what for from where okay this one not realizable okay yeah yeah that's because we are navigating by passing the whole channel it's it's okay uh so so as i was saying that's not the only thing that we can customize with themes because if we go to this filming documentation there is you can find the default film theme object in the film.tsx and here you can see what what are all the values that are used by default so i don't know i could try there are a lot of styles but yeah like you can adjust all of them so theme let's say let's say i want what something like message message message greed message input now i'm gonna do the actual message message list message simple well uh let's simply do i saw their message input it's going to be easier for me to show you on that where is message input message message input and container for example so if i do here message input uh i first need to keep everything else because i don't want to override everything so i'm gonna have two two two two theme is with a type or a value how do i import the theme i want to just override it oh but it will i think no message input container uh background color red will it work you cannot use a channel okay i need to refresh okay now the background of our container is red amazing in this way like if you dig deep into this style the theme you can adjust everything and make this application look exactly the way you want in case you need to do some changes on the layout or some bigger changes in that situation check out the custom components documentation and here you will see how we can adjust the components there is an interesting property for force aligned messages on the channel component and i know that discord is aligning all the messages to the left let me see if it works force align messages equal left okay now all the messages are on the left and even my messages are on the left and another person that will start talking he will appear his message is there they're a bit different in style as you can see when they are on the left as you can see yeah they do not have a background like the bubbles and i don't need that red background because it kills me yeah in this case they have a bubbles so it depends on you like on your preference the way you want to to make them look but everything is possible here so that's it with our displaying the list of channel in the side menu with drawer uh then what else create a chat room with a user navigation navigate to a chat room navigation we have implemented that actually we implemented most of the things that i have planned for for today the only uh thing that i would like to to fix is the issue of new users and um like what channels to query for new users so if i do video one medium one log in and if i check the side menu i should receive an error saying query channels with error free channels match your query but cannot be returned because you don't have access to them did you forget to include members in vadim yes this is for okay so for the channel list let's do it like this where is the channel list we need to filter channel list channel list here so yes members in that's the filter that i should give to the to that channel list so let's open navigation drawer navigation and here where we have channel list we will need to give some filters we need to query only the channel list that we are part of so how do we do that well using these members in and here i need to provide my id how to get my id simply by doing const user id equal use of context user id save let's start chatting how about sending your first message to a friend now it works it doesn't give us an error because we here we will not user id vadim uh user id save if i log in with simply vadim uh i should see the list of my channels yes but if i log in with uh them my dm one one login then i will not see any uh chatting and um yeah because we are not part of of any channels at this moment uh what's next uh when we register the user i think i will have him join a channel [Music] so [Music] somehow to join a common channel let's read a second okay context providers no channel channel vera yeah so oh my god how many things you can override here invite ma component to render system message system okay there are message system updating channel members adding remover and removing channel members using the admin add members method adds the given user as members while remove members removes them uh await channel odd members this is how you can add users remember join a channel you can specify if they have access to the history or not the history will be shown by default set to true okay that's interesting leaving the channel adding removing moderators to the channel that's a lot of things that you can do here invites streamshop provides the ability to invite users to a channel via update channel via the update channel method [Music] reading english is very good so i do not need like to translate anything uh i i've studied like in english i've lived abroad for for a long time so i studied actually before going abroad like for almost 10 years very seriously in order to accept anybody you must use the accept invite method to accept invite method accepts an object with an optional must-search property policy well the message can be used for system message for to display the channel channel channel how do you invite yourself wait a second accept invite oh querying for pending invites um i'm thinking to actually do another uh stream next week where we actually implement all of these things like inviting users managing users managing moderators but for today i just want a simple way to let people join a couple of servers channels that we have created let me try to simply do it like this whenever we um i'm not sure if we will have access to it so let's just give it a try in the screens signup screen after connecting the user and before setting it here i want to do const channel client dot cr client dot channel uh but i the type is team uh van is general and here what else did we have there i can have a look in that in that documentation here channel okay name okay only the name and here name general and i can try to do a weight channel dot watch now let's have a look let's have a look and i hope it will give us access but i'm not sure it might not so my dm new user new login uh get our create channel failed with our user everybody new with role user is not allowed to access resources read read read channel but it's written wrong on channel type team maybe maybe there are public channels you know and it's going to be easier for me to implement it right now uh public oh a live stream type supports public access both channel create and channel watch methods ensure that the channel exists and create one otherwise if all you need is to ensure that the channel exists create however is more commonly used server side client-side integration favor channel watch as it both creates and watches the channel in one call creating a channel using a channel id creating a channel for a list of members the channel data can contain as many custom fields as you'd like name image members uh and that's it nothing about the uh about the being public or not channel muting or hiding disabling deleting truncating throttling disabling channels no muting environs channel i'm going to try to click create a channel with a type live stream because this is a might be a way to create actually public channels without having to deal with with a lot so here is hello all the name oh this is my d right public public let's keep it simple live stream so now if i do video new one new one log in again possible and handled exception poor cam use client disconnect before i had to refresh oh come on come on come on let's go seven seven login now in the drawer i still don't have it let's see if it was created at least channels public type live stream yes because based on okay look look what we're gonna do we're gonna be very smart in the drawer navigator i'm gonna have two channel lists one that you are part of and one public channels that everyone can join so to do that look what i'm gonna do that smart i'm gonna add a new channel list here with public filters public filters cost filters equal i think it's type live stream but let me double check that so in the documentation uh where are we basically here filter filter filter id now i need to check something else channel list here client query channel function type yes type messaging in my case was type live stream so these are the public filters and i can login as my team okay i have my channels on top and here on the bottom i have the the public channels to be interesting to to see how to properly to to to style them in a way that they do not they can stack on top of each other uh because right now they are two separate views here so i will add a simple text we are almost we are almost there and in a moment i'm going to share with you the application so we can all join and chat together that's actually what i'm trying to do right now styles dot group title and the first one is public channels and the other one here is power group title um gender text text color white margin 10. uh margin 10 and what else probably it's good public hi everyone yes and now if i'm gonna log in with another user um one two three one two three log in here uh i don't have any channels but i have this public channel where i can join and talk with everyone all right uh what else uh i'm thinking before giving you access to this to make it more fun to uh to see if it's possible to somehow add images uh i remember probably doing that in a sign up screen [Music] no i was not doing that with images [Music] yeah yeah never mind um yeah that is it that is everything that i wanted to show you now what you can do is open up expo on your phone i'm gonna move here to tunnel and i'm gonna paste this code or you can scan this your this qr code with your phone uh while i'm trying to paste it in the chat to access it there and you would be able let me first check it on my phone to see if it's working here we have it i think it's working let me quickly do that to paste the url here on youtube but yeah the application on my phone is working fine okay i right away spotted an issue i need to uh reset to null the ids so that everyone can join with their name so uh yeah now i can do my name here full name vadim login okay here we have it public and we can start talking in the public chat who is going to be the first to join guys hey how is it going with a project it's actually very good we are almost done for today uh just a moment to to give you access to the application here with these you can access this application in expogo by following the link that i just dropped in the chat or by uh open scanning this qr code and after that we can chat hey we see new people there and we can chat and we can we can take pictures wait a second let's do it like this so use photo and in a moment i'm gonna send it i already see people here chatting everyone have there are also emojis how did you find them i didn't even know that we have that android hamburger icon is not on android the hamburger icon is not visible that's a good thing to test right now no usable data found for qr code you need to have expo go application installed on your um on your machine not machine on your device i meant like on your physical device you need the expo go and after that either paste in that url in expogo or you can easily simply scan this qr code i can also publish this project right publishing your project users with android phone will be able to access your project from our website hey max zen thank you very much for your donation hello so nice to see people contributing and supporting the channel is it only for android that's weird so guys uh that was everything that i wanted to show you this week let's get into uh some where is it some q a if you have any questions related to uh stream sdk or related to this project please let me know and while you're thinking about your questions uh let me thank you once again stream for sponsoring this video and for being being uh all sponsor of this channel multiple times i really enjoy building chat application with streams and on this channel we have built a ton of messaging application we have done everything ourselves we have tried stream and um in a lot of situations we in order to be fast we had to cut a lot of features when doing it ourselves so uh in a lot of situation we didn't have a lot of features then we did the signal clone which i wanted to do like very very in-depth but that that project took around eight videos with more than 35 hours of live stream coding and we didn't come any close to what the stream is providing us by default with everything here uh like out of a box so when building an application um it's it's good to think like if you want to build the technology yourself or if you want to leverage the technology that already exists and you don't have to reinvent the wheel because yeah like reinventing the wheel is very expensive and like you don't have to do it it will not define your your project it will not define your company or your startup what actually will define your project and and start up and what will lead to success if you solve actual problems to ve to for users and for example if you have an application um like like an ecommerce application or any other application that the core features and the core of application is not messaging it's i don't know buying selling playing a game or something else and at the same time you also want to improve a bit the user experience of um for your application by providing uh in-app messaging real-time messaging then in that case you don't have to invest your own money and resources to build all the infrastructure for the chatting because that's already done and we can use it in our project with a very fair price for the time that it saves us most importantly stream provides a maker account which is totally free if you qualify for it and in a lot of situations like especially for projects that are just getting started you will qualify for uh for the maker account and like if i'm not mistaken let me double check um not streamyard the maker account where is it it's here somewhere come on okay that's not the point so guys um i'm thinking uh this is a very good beginning for us to to get started and build this discord clone of messaging what do you think should we continue next week do we implement a lot more management tools in our application now that we have almost all the ui ready and here i'm talking about having the ability to invite users to your channels having the ability to create a new channel having the ability to for example do a private message or to kick a user ban a user and all of these things that are very important for having this application almost production ready what do you think should we do it if yes smash the subscribe button and write down in the comments uh something that will let me know that you want part two of this video i'm not sure uh if we're gonna do i cannot promise because i'm working a lot on the course nowadays and doing youtube at the same time like it's very difficult for me uh in terms of time but if a lot of people will want the second part where we will implement all the management tools for our discord clone i'm gonna think about it and maybe we're gonna do it so now back to our questions do we have any questions your videos are amazing thank you thiago thank you very much uh will you support this project after finishing it i don't plan to i don't know i don't plan to uh but maybe maybe we'll see so people started already playing with the gifts as i see uh someone not in there um not in the youtube chat but in our custom build chat is asking can we build a rec native plus node real time clone please it would be really great um not sure i cannot promise for the next feature maybe later we will do it i definitely want to expand to our technologies as well especially node and mongovet i've been working so much with these exact technologies the only issue is that like i work with that them i enjoy working with them i see the value but the barrier to entry and like at the same time having easier solutions to build and to accomplish the same like is um yeah is that his idea that's why i'm i i'm on the fence with that i have done a node.js with with mongodb tutorial on the channel you can have a look at it um yeah it's there we've done it already all right let's let me switch my mouse uh i enjoy this season thanks a lot thank you very much can one have a custom back end with this yes definitely you can uh connect your custom backend with the stream sdk users by simply where is it in the signup screen by simply sending here a token that was generated by your backend you can um you can connect them another thing is that uh the stream sdk works on backend as well so if you want to for example create a user from the back end that's also possible if you want to automatically add a new user to some channels that's also possible there is an sdk for node.js and for a lot of our technologies that will support communicating server to server your server with stream chat sdk server so yes it's possible [Music] can we make a video on automating like fastlane circle ci um that's a very good that's a very good topic like someday in future we're gonna get there i don't know like every elsewhere that i'm giving is someday in future because at the moment like my mind is all in the course and in the course yes we we we are doing uh ci cd so didn't started it yet didn't reach it but i'm planning to do it very soon so yeah is it a privacy concern when we add a lot of dependencies well here it depends it depends to what what data do you allow the dependencies to use because in our situation we give stream sdk a lot of data but we they have a lot of compliance in place specifically for this so if i can check it here yeah compliance like vr compliant with hipaa which is specifically for developing application for healthcare and being compliant with hipaa allows uh other companies to use stream as decay in order to develop a health application it is compliant with gdpr and others that i do not know uh east of this i think is for security if i'm not mistaken so yeah like you you need to to double check like how the tools that you are using are managing and handling your data in some situation this is very important and in a lot of use cases there are very strict rules like i don't know if you are developing a health application like managing storing and doing everything related to the health data of users is a very regulated industry and in this situation you need to be for example this hipaa compliant so yeah it depends from from application to application yes let's continue adding more features let's go yes please continue this discord part have a name are you still active on discord uh i'm trying but like the time doesn't allow me to be as active as i would like to be so there is a mom of air that is trying to help as much as possible so he is responsible for the discord momo say hi in the chat hey just wondering how reliable is building chat application yourself versus using chat providers like sunbird so like my my idea to like the decision flow that i would follow in order to decide whether to do it ourself or to use a tool is kind of simple like if messaging is not the core of your business which in 99 of the times messaging is not the core of your business uh and having messaging at the core of your business here i'm talking about what's up here i'm talking about facebook messenger imessages whatever tools have like specifically messaging even okay discord discord has like the messaging at its core uh but and in that situation like it makes sense to invest in your infrastructure if you want to compete with uh the big leaders uh however like there are companies like very big companies that are using stream sdk for vr uh for their applications so for example a dob or sound cloud like let's let's check like is that sound cloud like do they have somewhere here which i think or how does it work probably you talk with i don't know where is the chatting here oh comments these are comments but that's interesting like soundcloud is using them uh etoro so in this case etoro like etoro their main business is not messaging period like they don't have to invest their resources in developing their own infrastructure and not only developing here i'm talking about maintaining as well because maintenance is actually the the most uh cost ineffective were like the most money are spent on maintaining rather than on developing and we decided to use stream sdk to implement their chatting features because we focus on trading and stocks that's it uh master class this is um strava crunch base very hoping very big companies are using stream sdk it's crazy they are they have uh we have over one billion end users so most probably you have already used the stream uh stream chat you just didn't know that you are using them but you i am pretty sure that like 90 of the users here that are watching this live stream have once used the stream chat sdk as a user i mean not as a developer oh interesting questions what others do we have here uh i missed it this time when it will be available to watch right after we finish it but i think you can still watch right now just by going back uh vadim do you plan on making native project not using expo here i can say definitely no no and no if i didn't have a good experience developing native application not for android and not for ios so no after you go react native route like there is no way back uh great content thanks for educating thank you very much for being here which framework is good for beginners as an app developers which is easy to pick up interesting um i don't know i don't know to be honest for beginners like if you have some experience with react.js then definitely go with react native route because it's going to be easier for you to get there but if you are a complete beginner i don't know someone is saying expo is really beginner friendly like yeah like if you go react native route definitely start with expo uh like don't even think about starting with rack native cli when you're just getting started build a couple of projects try out things and when you get comfortable then you can get into react native cli and it's nothing nothing different is just you have to set up more things on your machine to use react native cli with expo you just install it globally initialize the project open work and that's it okay okay guys uh thank you very much for joining today's live stream and if you found this live stream available and if you learned something new today please subscribe to the channel because this helps me a lot and helps the channel grow um yeah let me know down in the description below if you'd like us to build them build a discord part 2 where we will implement more features more management features of creating channels adding members to the channels sending private messages and a lot more features that we we can develop here so i'm waiting your responses uh and i will i hopefully will see you next uh friday no actually next friday we have a very important live stream so be here be ready be motivated write clean code stay hydrated and today's friday and i'm out bye

Channel: notJust․dev

Views: 128,079

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react tutorial, whatsapp clone, build a whatsapp clone, whatsapp clone react native, whatsapp clone tutorial, chat app, react native, javascript tutorial, real time chat app, socket io, react native chat app, discord clone, build a discord clone, discord clone react native, discord clone tutorial, react discord clone

Id: RlDeNi1_1Ew

Length: 222min 41sec (13361 seconds)

Published: Fri Feb 25 2022