Now that we're back, we're continuing to build a mobile app. We're going to do a couple of cleanup and organization-wide things before we move on to navigation. So one thing I want to do is I want to show you, let me remove this call, that, you know, like HTML, CSS, we usually would have separate CSS files. And how would you do this here to like reuse styles and such? Well, you can just define these styles here like this in a separate file, then you export that and then import from whatever you want. For example, let's say this is a global style for a container that any component could use. So we can create a new folder here to keep it organized for styles and create a file, maybe global.js, and then let me open this down. So we got app.js down here, and then a little global there. So basically, you could take this definition here, basically, you can take that here, you can put it there. Look, I'm using Mac today, so I got a press command C. I don't like spaces for, I'd like to change that. There you go. I can create a variable like that and just export default or export const like it was, doesn't matter. If you want to call it global or something, global styles, doesn't really matter, right? There you go. Okay. Now with that, I can remove this from here, but it's going to fail from the places where styles use, right, look styles dot, I think it's only here, lines 56. So this case, I would call it global styles, just to differentiate from other styles that I might have on this specific page. And then I go up here, I can do import global styles from dot slash styles slash global, and you don't have to type .js here, by the way, it's implied. Something you might also see is the file names for JS, it might also also be called .jsx when you have like JSX stuff. And if you're using TypeScript, it will be called .tsx, okay? So that's it. Now it's going to be an error because stylesheet is declared whenever read here. I want to keep it here because I want to build another one. But if you go back to this, it doesn't know what stylesheet is. So you've got to go to the top and do import curly brace, stylesheet from, yeah, clash native. That should do it. Now, again, whenever we change code, we want to make sure it's still working. So we're going to test it so we can go and see if the styles are not messed up or anything. Looks good, right? Same thing to me. Okay. Moving back, let's continue. So if you want to create some maybe specific styles to only this page here, you would create it at the bottom here. Or you can put in another file on the styles, okay? But in any case, I want to do now is separate, you can see we have this function, I'm doing the folding by the way, if I click here, that one and this one. So we got three separate screens that I want to build, okay? Usually when you have components, we define them one per file, that's the common practice. So I'm going to move, let's first move messages to its own file. So I'm going to do the following, under mobile, create a new folder, I'll call the screens. I'm going to call it messages.js. And I'm going to leave it open at the bottom and have the app at the top. So I'm going to take the definition for messages here from the closing curly brace all the way to the function keyword. I'm going to cut, I'm going to paste here. Now I don't like space four, let me put it back to two. Select that, okay? And because this is defined in a separate file, if you want to make this available to other files, you got to export. So we can do export default. And the reason for using default is so I don't have to use the curly brace when I import. Okay? So that way I can do it like this. And then from app, I would do import messages from that slash screen slash messages like this. You see, I don't put a curly brace because I use export default. If I don't have default, I would have to put the curly brace. Save that. Now it's complaining that if you go back to messages, there are some things that doesn't know about like view, text, text input button, so on, basically got to do the import. Import curly brace, first you got view and text, text input, basically what I would outdid very quickly is go from the top to the bottom here, every line, I see what's not important. And I write it down here. I got view, I got text, text input, and finally I think button from react-native here. And that's it. And usually other, if you go back to app when you do that, maybe some of these will become no longer used so you can clean it up. For example, this one is no longer used, so I'd probably remove it. I'll keep it there just in case we need to define a style sheet later, but I don't know if I'll do. Okay, so that's how you move to its own file. Now we can do the same for home and then for the other one. Let's go screens, home, JS, take home here from the function to the closing curly brace, paste it there in the new file, fix my indentation, and I'm going to do the imports from the, I'm reading from the top to the bottom, blah, blah, blah, blah, I got new view, text, button. You can order this alphabet if you like doing so, but it doesn't really matter from react-native. We did that. Now it doesn't really know about home. So here in app, I do import home from the slash screens, messages, oops, not messages, sorry, home, like that, but it's going to complain, it doesn't know what it is, right? You got to never, because you got to export the function here. So you can either do export default before the function, not home, or you can do later here as well. That's fine, export default home. You might also see that, okay? I think it's also complain about react.define here, so you got to do import react from react. And you might see a lot of people not using like this, but instead using just like that. If you want to do that, you can put comma curly brace here like that. And I don't think we might, yeah, like that. Anyway, I think that's it for home. Again, test the, go back, test to see if nothing broke. Everything seems fine, right? I still see home, right, this hello world, click me, whatever, if I click, something appears, so it's working fine. Going back, let's do the same for the other one. So finally, what's the other one signing? Basically, the very tedious, now that we know how to do it, it's just a matter of repetition. New file under screens, sign in.js, paste it, fix my indentation, export default, and then import text, text input, from react.native. Actually, I was import react from react, but I don't think you need it. It's doing somewhere implicitly. Okay, seems okay to me. I look at my app, nothing's broken, but that's because I haven't imported here yet. Back to app.js, you got to import, sign in, from dot slash screens, sign in. Oops, no g. Like that. Still working for me, I checked, okay, make sure to check. Still working. Okay, so let's see, yeah, so let's say going back here to home, going back to the topic of CSS. Maybe if you wanted to, for example, take this style here, I don't want it to be here, I want this to be reusable for some reason, for this image. You can take this out and move, first you can move to a variable. We can say like styles, dots, let's say, image, about dog image, whatever. And you can define it either before or after, const styles is that object, right? And that works the same way. Let's see. Oops, sorry. I got to have the property dog image like this. Otherwise, I would have to say just styles there. And this way is like you're defining many properties in an object to make it look like a class definition. There you go. Now the dog is still there. Okay, validate the dog is still there, no problem. Going back, so you can keep going and if you want to go further, you may be some reason you want to reuse this everywhere else, you can always create a style file here, or either move to global this, right, you can cut this and put in global here, or you can create one just for messages, sorry, just for homes, maybe style home.js. And you can go here and cut and put in home. I know it's confusing because I named the same thing, maybe I should call it home styles or whatever, or use, there's no dot CSS extension, right? You can do this and you can export the full styles. And then from here back to home.js, under screens, okay, you can do import styles from dot slash, oops, not dot slash, because it's in a different directory up, you got to do dot dot to go up, and then slash style slash mess is a home, right? Like that, it should still work. I checked and it's working fine for me. Okay, so you can think of different organization strategies for your styles and components and screens. Now let's do some navigation. So where's my Google? I've got to use this library here called react navigation. And this is the website. Can read the docs to see all the contents. Okay, so let's go. We're going to go install some packages for boilerplate. So if you read the guides, you know, how would we use this without knowing anything? Basically read the guide and it tells you what to do. Okay, going back to VS code. We open a terminal here, under mobile, so we're going to npm install at react-navigation slash native. Let me see if no other requirements. Yeah, just that. Okay, so this is them chat. Now we got install npx expo install react-native dash screens space react-native dash safe area dash context. Oh, there's something I didn't mention before if you have trouble with something about too many files being watched on Mac, you would have to bro install watchman to fix that. And bro is the package manager for Mac, you should install from bro.sh website, you go to bro.sh. Anyway, nobody got that problem. If you got that problem, that's why, okay, bro install watchman if you're on the Mac. Okay, we got everything, I think that's all. So we look at dependencies to verify. We got native here and the other ones here. Okay, now how do we hook this up? Well, let's go after JS here, ignore the other stuff. So we got to put a navigation container here. So let's import curly brace navigation container from at react navigation slash native like this. Then we got to take this and put react a navigation container there. And then you enclose everything in that and close it at the bottom here. Okay, everything inside a navigation container. That's the first step. Now we got to define the screens. Okay, then to do that, we got install more packages because there are different kinds of navigators. There is the stack which you're going to use like pile up on top. There's now on a one that appears from the side right if you've ever seen it. And there's the one with the tabs on the bottom, right? So there are different ones. I'm going to do stack. So open up terminal again and PM install. Make sure in the mobile directory. At react navigation separate by a dash slash native dash stack as we're doing stack. Okay, so with that out of the way, if you check back at Jason should be here somewhere. There you go. Here. Okay, going back to app. So what we've got to do is import more stuff import curly brace, create native stack navigator from at react navigation slash native dash stack. I know it's tedious to do this, but you got to do it boilerplate. Got that. So we're going to call that big native stack to create a navigator stack one and it can put in a variable. The doctors are going to call a stack like this. We call it whatever you want. And then from that, you can go to navigation container and start doing stack here dot navigator like this. And then we're going to define the screens and this will be removed later, by the way. So we're going to do a stack dot screen like this. Self closing. And we're going to find all the screens that we have. This is the reason I did this and that and that. So that's easy for us to do that here. So basically the first one, let's name it home. So prop name equals home. And then you can put component equals whatever is the component that's going to render this and this is home. So we take home and cut, paste it there and remove this. And then you do the same for the others stack dot screen. Name is going to be signing or messages or whatever. Let's just sign in component, signing. So we don't need this here, because that's the signing there. And then you do the other ones stack dot screen, name, messages, component, messages. Remember this has to be matching this one to remove that. Got it. I think we can either take this out or put these same styles for every single view. That's one option you can take. Maybe there is a way to make nested stuff. You got to look at the docs, but basically if you want to reuse this here, let's see what I can do. Let's go home. Let's go through all the screens. First screen is home. I have the view here, remember the return. So I can put the same style. Like that. And if you want the status bar, you can do it here. I'm sure there's a way to make this better, but for now we're going to do it like that. That one is done, but it's going to complain. It doesn't know what global style is, so let's copy from app. And you can put it here. And then what else? We got constants, right? That one we copy from app, put it here. And that should do it for this one. And I got to repeat for messages. You see I'm repeating myself. There's likely a better way to have one place doing this. Anyway, let's just do bridge force. Constants, global style, I just copy like this and then go to sign in. Do the same. Now let me repeat the style for the view. And this one, I'm going to make it instead of fragmented out of view like that. And I think I have to import at the top. Okay, import view and then add a view with this for sign in. Save it. Back to messages. I got to do the same. So basically here, you can either put an array here if you want to keep that on 100. Or I think we don't need this anymore, right? We can just replace everything like that. And I think we got to fix the paths because we move things around. We are no longer in app. So all these paths might be wrong, right? So if you go to home, this relative path here, let's see. This one is correct is dot dot, but this one is wrong. Because there's no styles in the current directory screens. So we got to go one level up with dot dot, and then we go back. Go back and then styles, yeah. Save that, do the same for the others. Message.js, a global size from dot dot, signing.js, global size from dot dot. And finally, the status bar is right now is giving an error. So we got to go here and import. Where is that from? Expo status bar, this one. Sign in. I had to sign in. Go to messages. Add to messages. Go to home. And there you go. Now I'm going back to app. I think many of the things here are no longer necessary. So you could remove them. Think like that. I think I'm going to remove this here from app. And just have navigation container, stack navigator on all the stack screens. Okay. So I think this, this, that and that no longer necessary. If you hover declare but never read. So I can remove that and clean up. And what else? Let's see. And if I share the phone. This is what it looks like. By the way, I didn't show you yet. But if you shake your phone, shake, shake, shake. A menu will appear. Come on. Shake. And this menu, you can click to reload, go home and other things like open JS debugger. So to reload the app, you can click reload. And if you have any trouble ever having trouble, try reloading it. Okay. There you go. Now you can see at the top. I have home. That's the bar. That the navigator adds. So if I try to go somewhere, that will change. Now we don't have the links yet. That's what we're going to do next. Okay, to navigate. Okay. Let's go back here. Don't know what happened to my shared. With blank. How do we navigate? Well, every one of those components defined with the stack screen will receive via props. Okay, via props. An object. That we can use to call to navigate. So if we go to home here, let's go to home. Screen. Here at the bottom. You see this is the function. The function actually receives a parameter called props. Usually the properties received by this. So let's add a link here. How would we add a link where we can just add a button. And then we do on press and then we navigate somewhere. So let's do at the top here. Maybe I want to add a button title. Let's do for a sign in. Let's do one for messages. And on press. I'm passing a function. I'll use arrow, by the way. Arrow like this. parentheses equals sign greater than now the props that has is an object. It has another object called navigation that was injected by react navigation from the stack screen. You can do that navigate to the name of the screen you want. Remember, the name is whatever you type here for the name property. So if you want to go to signing, you got to type exactly like was typed there. Some people like defining constants for that. So we are never mistaken. But I'm not going to do that here. Just follow the site. Signing. Like this. Exactly the same. Save it. And then do the same for the other one. I'll press. Passing arrow function, props navigation is injected. Remember by stack that screen. So that navigate and then the name of messages stack screen here. Like that. Now let's test it out. Go to the phone. Let's strike sign in. You see it changed. It piled on top. You can see the top says the name of the screen. And then we got a back button on the left. And the content, which is. Signing component. If I click on the top left, it goes back to home. So it pops that removes from the top of the stack. If I go to messages. Same thing happens. I got the name. I got the left hand sides back button. Now this is iOS. Okay, I don't know if Android is a little bit different. We got Android people here. What do you see instead? I know Android has a back button, right? So it might be a little bit different from what I see right now. Okay, so that's the stack navigation. No mystery there. Let me show a couple of options there. Of course, you can look at the docs and figure out. Other options. If you go back to app. I think you can change that title at the top. If you add options here, for example. And by the way, the first stack screen is the home screen. That's the first screen that appears. If you want to change that, you can either change the order here. So the first one signing is the first, or you can change in the navigator. I think you can add a property here. Let me see what the property is. If I recall. One moment. Initial route name. Initial route name. And it can pass. For example, I want to message this to be the first. Instead of having to click through. So I'd click. So that would be the initial route. I think if I refresh here, my phone. Sometimes you've got to reload for this to work. Because in this case, it's a bit of. Weird. Yeah, I got a reload to actually make it appear with messages first. And the first one. And if you want to change the name here. Let's say I want to change. Options. Here. And you pass a object. I think title is the one you see there are so many of them. And let's call it comments instead. Just for the sake of example. Save it. So if I pass options title. In the object here. I should see that change. Here's my phone screen. I see the top. Now change it to comments instead of messages. That's why I change. And this is the first screen. Remember, usually when I make change initial route name, I got to reload by shaking it. Come on. Come on. Sometimes it doesn't do it. And reload. And there we go. Okay. That's navigation. Now let's move on to data retrieval and sending data, saving the database back in. Now let me refresh your memory. I have here. A terminal in VS code. That is running the server. So CD to make a terminal CD to server. And it can run at npm run dev. Right. Server directory. CD server. And run dev. Then if you recall, I have my. By the way, note the parts 3001 for the server, 3000 for the front end, I think. And I don't know for mobile, what is it's using? Something else, but anyway. Yeah, so this is for the web client. I don't actually need a web client, but I want to show you a running. Let me see. Google Chrome. This is what we got for the web client. Home and messages. This is what we're going to replicate. You're going to notice is pretty much almost the same thing, except the structure is going to be different. Because it's react native. Okay, so we would load the stuff from the back end and can comment with ABC here and click comments. It would appear. Got it. And the code for that. Is here. Under web client source pages messages. You see this is the code. And actually the code here is pretty much going to be the same. Almost the same for react native. To add a message with the fetch and to retrieve with a fetch. Okay. So pretty much copy based. Make sure I know you're doing though. Okay, let's go to messages. So first I got to figure out how to retrieve that from the back end. So remember, if I want to do something when the component loads, component is mountain first render after first render, I want to execute a function, but no more after the first render. We can use effect. We accuse effect. Passive function there. And then second argument must be an empty array. Because every single render will trigger a call to this function afterward. We just want one day once. So hence empty string of dependencies. Array of dependencies. Okay, so we're going to fetch to the back end. So get request by default past the URL htp colon slash slash co host 3001. That's the port I'm using for the server. Remember, my terminal running server 3001. And it's in the code as well. Remember server code. Server index JS. Go to app.listen at the bottom here. I see it's using port 3001. Okay, recall that. All right, this is going to return a promise to handle the promise we do that then. Now it can pass a function that we called when this promise is resolved. Now the function where we receive a response. As the argument now. Handle errors. Jack if response okay. You that's to do. I'm not going to do it. I'm going to assume a clean happy path. So I'm going to return. Response dot JSON like this, meaning I have a response. There's a body. I want to take the body extract that and convert to JSON JavaScript object or raise this case. That returns a promise to so this promise chain is not yet resolved. Without another then outside. So outside another then after the second one, this one is complete. Then I want to do something else. That function will receive the messages. And then you can do something with that. Now that's something we want to store in the state. So I'm going to create a variable. So I'm going to call set messages with messages. Now I got a store that in the state here. So I'm going to do react use state. Initially, I can either be no or empty array. That's fine. Okay. Then I'm going to this structure messages comma set messages, right? Remember, use state. We'll return to an array of two elements, the first being an accessor to the state variable, which is initially an empty string. And the second one is the mutated function, right? Used to modify it. And I use it in line 16. When I get the messages, I set now the value of this to the array of messages. For the server. And because this changes state, react will react to it. Hey, state was changed. We got to rebrand everything, make sure that the user now sees a different kind of screen, right? Let's go. Now we got to use this message is somehow right in the view. So after comment, I'm going to make another view for the comment list. And I can start mapping messages down map because I want to generate a new text or view with the text for every single message. No, the box is for the message. So I got to do map. You can pass a function and every single message is for each iteration. So it can return a template. Let's add a view with some text. And the text is going to have the content message dot comment. Remember, message is an object. I'm going to show you the debugger later. Maybe that will help you out like this. And I think that's all. Maybe want to add some style later, you know, style for the view. Make it back on color. I like antique white. Add some borders. One border radius, I think, rounded border. Maybe four. Maybe some padding. 16. And on and on and on. If you want to change the text style and style, of course, you can always extract this to separate variables and so-called style sheet files that we did before. Font size about that increased to 18. That might be too big. Anyway, got it. Let's scroll up and make sure we import React from React here. By the way, why am I not using status bar? Did not put it here? I should have put it here, I think. This one. Let me see the other components if I use it or not. Oh, I didn't use it. So I can just put that there. I don't even know if that is necessary anymore because we got a status bar from the navigator. And I think this padding is no longer capable of white because of the navigator adds some stuff at the top. So I'm not sure. But anyway, I can put it here just for the sake of having it. So we got home. It's here. We got messages. It's not. Is it here? Yes. And we got sign in. It's not used. So I'm going to just put it here for the sake of having it. Okay. With that out of the way, let's see. So the problem we're going to have right now is the phone, the app on the phone is not going to be able to reach the back end server. And to get around that, we got to do some tunnel. Okay. How do I do the tunnel? Well, we got to work some back end right now. Let's go back here to the back ends part. So I have a terminal window that's open with the back end. Okay. I'm going to kill the server control C. So I'm going to start a new package called local tunnel. Now you can make that depth dependencies with dash dash save that after install to separate it from dependencies. You don't have to do that. Okay. So you got that. Check your server package. Jason. You should see under that dependencies local tunnel here. Now let me add a script here so you don't have to remember this stuff. So I'm going to under scripts. I'm going to add a tunnel. So basically I want to run local tunnel LT. That's what it's used. For some reason it's abbreviated a dash dash port 3001 make sure this is the same porch as the server. And if you don't want the names to always be changing because it has a URL naming, it's always going to change every time you run it. You can put here a fixed name. Let me see. I can find the option here for you. LLT dash dash sub domain. Yeah. Sub domain. Let's call it full dash stack web. I wonder if I can use this. Let's see. Like that. Okay. So what we're going to do now is have the server running here. mpm run dev like normal. By the way, no bonbide whenever you change the code for the server, it might kill the tunnel. So it's kind of annoying. You have to have to restart a tunnel. So be aware of that. If no one is running and restarting stuff. Anyway, open a new terminal. CD to server. Now we're going to have an extra terminal and we got to do mpm run tunnel. Oops. So it runs that LLT port 3001, whatever. And you can see that you got this URL here. HTTPS, whatever. We got to copy this and replace in our front end whenever we call the backend. It's kind of annoying, but it's because we're developing different networks and they don't have access to each other. But if you did have access, you wouldn't have to do this. Okay, I'm going back to messages.js under mobile, mobile slash screens. And where we have this patch for localhost 3001, I got to replace it here. Now, because you'll be using this a lot, it's usually best to add to a central location variable that's only defined once. And whenever needed, you import that. I'm just going to leave in this file, but you'd separate it ideally. Let's call it a backend, let's call backend URL, API URL, about that. API URL in quotes. And I'm going to take this cut and put API URL here. So whenever you need to call the server, you would use this. And then interpolate with this value slash messages, right? Because we need the endpoint path to get the actual messages. And I'll just leave a comment here. Because app loaded in device can't access back and got a tunnel that otherwise would use this here. Leave it as a comment that's ignore, right? Comments are just some notes for us humans, but the computer doesn't care, ignores that. Okay, and I think that fixes everything. Always keep in mind, you should be watching the server if it's not killed. Obviously, I got node mon, but I think the tunnel, if you ever need the tunnel like I did, it might be killed when node bone restarts when you change the code for backend. So be careful, check this if it's not running. So you got to rerun it. Okay, finally, after all that, we can check to see if it's working. And there you go. We got the comments there. Hey, there are no common hello world. Now I'm using maximum my database got reset and added new comments. So that's why it's different from yesterday. I might change the style there kind of bit messed up, right? Add with 100% or something like that. Maybe to improve it up to, you know, I'm not going to touch style much, just focus on functionality for now. But to fix something quick, maybe some space between each would be nice. I could go here and add margin bottom 16. What else we added with right with maybe 90% or whatever. Oops, not working because of the, I think because of the, it's the container that's controlling it. So I got to move to the container, maybe style. Let's try in the container. Yeah, it's the container that's controlling. That's a little better for me. And if you want to add some margin to the top here so doesn't stay next close to the button. So either the button is margin bottom or this view is margin top rate either way. Okay, let's check PG. I mean, so I'm, I'm not so you say you verify that's actually taking data from the database, right? We've done this before. Here's PG admin databases for stack DB two tables messages. Right click view out of data all rows. I see these are the messages that are in the database. If I change it here. Hello world 123 save. I reload my app I should be able to if I shake it should be able to see it right hello world 123. So that would validate that's actually pulling data from the database. Let me show you here reload. See hello world 123. Let's let's now implement adding comments. Let's go. We're a bit out of running out of time. Basically the same thing as we did for react web client copy the code pretty much almost the same. Okay, now we're going to control it in a different way text input though. Okay, so the user types to text input. Okay, now we're going to control that because we need access to what's typed. So we're going to say value will come from a variable that we call new comment. And then the on change here is on change text not on change. And we pass a function. And the function the arguments the text that was typed. Put an error we're going to say set new comment with that text. Like this. Now let's define the state. Oh, yeah, that's right. Go back here outside maybe I'm going to do it here. React use state. I initially is going to be empty right nobody typed anything. The structure new comment set new comment. Like that. Now we got access to new comment by controlling this like this. So you can check that in your phone make sure you when you type a letter, it's working. I just tested and it's working. Okay, now let's do the submission when we click comment we want to do on press. Call a function on comment press. Let's define the function outside before return function on comment press. What we're going to do is call the back end fetch. Back tick interpolate API URL slash messages, but we got to change the method of the second argument object method is post body is going to be Jason stringify an object with the comment coming from new comment. And headers. Let's say we're sending a server with content type is going to be application slash Jason. Basically the same code for the front end in the client for the web. Right if you recall, going back to the web here. Where's it web client source pages messages. Like this, we did exactly almost the same right just changed a new name. I said new comment. Here's new message. Like this. Okay, do the same returns a promise. We do that then response, we can do response Jason we're not going to handle errors. I'm going to leave that to you. And then that then again. Okay. And then this is going to give us back the created message. And, and then you can use that that has going to be that is going to include an ID. Therefore you can set messages is it messages that we call it. Yeah, this one. So you can add it to the top by saying set messages with the created message object here, followed by the copied elements dot dot dot to copy all the elements from messages. That way we create a new array with the first message that was created, followed by all the elements from the existing ones that already were there. And I think what to do is clear the, the text area with set new comment to empty string. Yeah, I didn't put any error handling but you'd have to write it here. Error handling. So our handle here to do response, not okay. Okay, let's check it out. Let's see. By the way, before I do this I want to do the debugger actually. So let's do try to do the bugger quickly after doing this. I want to show you can debug the react native. Okay, let me refresh. I saved everything right I go help so let's type welcome. Oh, what happened. Something bad happened. Let's debug. So first thing I want to see is, is my server still running, not crashed terminal for the server, it's still running it got welcome here. Okay, so that's fine right so our client mobile sent the right data. By the way, this is a log that shouldn't be there but it just for debugging, I should we should remove it but it's there. Something is happening in the react native side afterward, I guess. Let's see. Another thing you can look at is the terminal. That's running the development server. You see all these errors. Let's scroll all the way down. Something just happened. Errors located blah, blah, blah. Each has a new key check render method. Okay, if you notice here. Scroll the way up. Do you see this J? Open debugger. That's how you can open the debugger. It's basically a Chrome window. Or if you go on the phone. On the phone, I can also read the message. I can see clearly. It's messages currently on the fine. That's why it's failing, but let's let's have a look. So here you would shake it. Let's go shake it. Come on. Click dismiss. Why is it not checking and bringing the menu? That's strange. Come on. Dismiss. There you go. You see open JSD debugger. I click that. Now, if you're on Mac, it's going to ask for permission. Okay. So that's why it's going to crash or not fit, not work. So you got to give permission on Mac to do that or something. Anyway, that should open. Or you can press J in the terminal for the dev server. That should open this window for the debugger. Let me make it smaller here. It's too big. Are you seeing the debugger window? Basically it's a dev tools. I can see all the console messages here. And you can even click sources. And I think you can debug somewhere if you click control, command P into Mac or control P on Windows. Look for messages.js. And you can see the code for the component here. And you can put breakpoints. For example, let's see what's going on when I click press. I have new comments. Okay, I got an object. That was correct. I think my response something is messing up. So here I'm going to put a breakpoint to see what's created message returning. So let's try again. I'm going to reload the app. Let's go shake, shake, shake. Come on. I don't know why it's not shaking and doing it. Okay. Let me try to reload from the terminal. That is possible. Question mark. Oh, there you go. It opened. I'm going to reload my app. When I reload the app, it's going to go. We're going to try to do the stuff. Let me show you because it's going to. And I'm going to type test. You see the welcome is there, right though? It's working, but something is making the errors appear. Click comment. Now where's the dev tools? I don't know why it's not working. It should stop at the breakpoint, but it's not. Maybe because I reload. I wonder. Let's try again. Time is running out. Let's see. Dismiss, dismiss. I don't have the thing there, but anyway, we're out of time, but basically that's what he would do. Let me go back. Try to fix it. Oops. Upshare. Lost the thing for zoom. Share. Messages. Hope you can see it. Let's go here. So it's claiming that message is empty. I'm going to put a debugger here to see if that does something. That's another option. You could put a debugger like that. Let's see. Sponsor, create a message. Let's not set message here. And let's just keep it like that. We can console log. Create a message to see what's going on. And then let's go down here and add the key because complain about key. Key, whatever could be message.id. Messages. It's claiming it's undefined. But the default value is empty. I think something messed up when I did this here. So I put a console log. Let's try debugger. I don't know if it's going to work like it was acting on me. Let's see. Let's go and try to comment right now. Let's see. Hello. Comment. Go to the dev tools. This one. Oh, it's paused now. There you go. It's working now. When I put the debugger there. Pause, don't break point. Okay, let's try control back tick. Created message. What's inside? It's an object. Right. Author comment. Hmm. That's what I expected. What's messages? Let's see. What's messages? Should be an array, right? That's correct. Hmm. So when I say set messages, calling this. So we got created message at the top. Oh, I know what's going on. I forgot the square brackets because it's supposed to be an array, right? That's why I need the square brackets here. Right. If I were to do that without it, I think it would set the messages to something not an array. Anyway, that's how you debug. Okay. It's basically the same as the client, but you got to do a little bit different stuff. So let me remove this big point and go back and fix the problem. I'll remove debugger. I don't need console log anymore. I know I messed up here because I forget my square brackets. There you go. And comment this. I think now it's going to work. Let's go. Let's go. Can you see? Let me just reload for the sake of. Come on. This thing has really messed up. I tried to shake so hard. It doesn't work. Come on. Shake, shake, shake. There's a delay or something. Return. Come on. I cannot do anything. By the way, I'm going to show you to finish off how to scroll because right now I can't scroll. I'm trying to scroll and it doesn't work. And I don't know why the heck, you know, what this happens, something's weird. It doesn't shake to bring the menu up. All you got to do is basically close the app, do all the whole scrambles QR code again. Right? I'm going to do this right now. Basically, I'm going to go and close my app and scan the code again because it's messed up. I'm going to kill my process on the phone. Camera app. I'm going to open an expo again. Sometimes it just goes crazy and doesn't work. That's what you got to do. Okay. Let's go. Can you see now? Let's do it. You see? Hello, whatever. Hey. There you go. There's another. There you go. There you go. Nice. Yay. Now we got a lot of comments. Right? For some reason it doesn't click outside. Maybe we got to fix that. How do we scroll? Well, I'm going to show you real quick. It's very easy. So we go to the template. You see this? Are you going to put a scroll view there? Scroll view. Okay. Scroll view. Then you go up there. Import scroll view. Scroll view. Like that. Now. I think it's complaining about the styling right now. Must be applying through the container and continue style prop. So in that case, I think you got to keep the view inside. So instead of doing that scroll view, you add it outside here. It's complaining about the styles. So I'm going to add a scroll view isolated outside and keep that view here. Like this. Okay. So be careful here. It's closing tags. Now I'm going to show you its scrolls and we're going to be done. There you go. Now let's scroll. All the way to the bottom. Nice. Let's add another one. Hey. Oops. Now it scrolls. Thank you for being here. Oops. That was an exclamation. There you go. Yeah. And that's it. That's the end. I hope that was interesting to you. And that I will finish this lecture.