Okay, today I will talk about making a mobile app with a React Native. Now first give you an overview of how mobile apps are traditionally built. So there are two main ways of making a mobile app today because of the two most popular systems. One is Android, the other is iOS. So traditionally people would have to write code for two separate apps, one Android app and another iOS app. So for iOS, which is basically iPhone and Apple stuff, you would write it in the language called Objective C, but now Apple's created another language called Swift and that's the one that they encouraged to use today. And then on the Google side, Android, people would write them originally in Java language, but now they recommend using Kotlin language to build those Android apps. Now you might see the problem here, okay, what if I'm a small company, I don't have budget to create two separate apps, I cannot afford to have an Android engineer and an iOS engineer separately. Isn't there a solution that we could come up with across platform? Of course, they figured it out and had, there's many solutions for cross-platform, so you can build one single app and it works on both systems, Android and iOS. One of the solutions is React Native and the benefits of this one is interesting that in we write code in JavaScript, Node.js, and we use the React pattern that we learned from React.js library to build user interfaces on the web. And yeah, that's very interesting. Now, of course, if you have the budget, you're a big company, you probably have separate teams for separate apps because ultimately, the experience is probably better, more performing, but React Native does the job for cross-platform and let's learn about that. So you're going to need Node.js like we already have in previous lessons. Basically this is JavaScript outside of the browser environment and then you're going to need a smartphone and your smartphone needs to install this app called Expo. So this is the one from the App Store and that's the one for Android. So you need to have that because we're going to develop loading the app directly on your phone. Of course, there are solutions, we can have like the simulator on iOS or maybe later through Android Studio, but that's just a bit too much for this introduction. So if you recall, we had a web client for this simple app that has a messages page and we can load these messages. So we might want to do this kind of same thing with the mobile app, but before we do that, let's just do a deep dive into React Native. So I'm going to need a terminal, let's go. I'm using Mac today so that's why it might look a little bit different. Here's my terminal, I'm in the root, I'm going to do the following, let's see, I'm going to do MPX and the command is create dash expo dash app at latest a space dash dash template space blank. Now you notice this is very similar to create React app that we use before, we just substitute React with Expo and Expo is just like a software development kit. There's this company made Expo. To make it easy to develop mobile apps with JavaScript and React Natives. Anyway, it's MPX not NPM, okay, and template blank because I don't want to use all the fancy stuff that they put in, but you can try later by yourself not having template blank. So I want to keep it simple and just start off with that. And this should install, ask some questions, I'm going to call the app mobile because I'm going to have a separate folder just for the mobile app. And now it's NPM install, meaning it's installing third party packages, remember node package manager, NPM, it's a way for us to install code that somebody else wrote libraries might take some time. Okay we got that. Now you see this here, these are some of the commands you can run, but first we got to change the directory to mobile CD mobile. Now that we're here, you can open your text editor like code dots for visual studio. I already have it open, and you can do just NPM start like this, you don't have to use the other one. Now let me show you what that's going to do before I run. Go here to VS code, I don't want to save this. So we got mobile here, directory, package.json, and if we do NPM start that's actually a script from line six, which is basically calling expo start. Now like I told you before, you need to have your phone connected to the same network, Wi-Fi like as your computer that's going to run this development server. If that does not work for you, you can always add dash dash tunnel here, and that should make your app available for download from the phone itself through tunneling stuff. Anyway, I only use this if I need it, so I'm going to remove it, but it's there, noted for everybody. Anyway, going back to the terminal, we're going to do NPM start, and that's going to run, if you notice here, that runs and expo start, and you're going to see a couple of commands that you can press, and by what matters right now is scroll up, and you see this QR code. Now we got to take our phone, open the camera app, and scan the QR code. Okay, let me show you here. Let me show you my phone, if I can share. Okay, do you see that? That's my phone. Camera app open, I'm going to point to that. I see open in expo, I click that. Now it's open the expo app, and it's going to take some time to load it. And there you go. You should see the message to open up app, just start working on your app. Okay, everybody has to make sure they got that before we move on. If you have trouble, let me know. Okay, again, the person just came in, let's reiterate what was just done. Okay, let me first show the repository, github.com. Those who haven't done this before, this is the repository we have been using so far, and we're going to need that code. I post to the zoom chat. Okay, now if you clone or download this, and then you CD to that in the terminal, and then what you're going to do is you're going to run the command here, I paste the zoom chat and px create dash expo, dash app, at latest, dash dash template blank. Okay, now the person joined. Okay, let me try to explain again. All right, we are using this repository here, I'm pasting the zoom chat, and then we CD to that in the terminal, we run this command, posting to the zoom chat. I called it mobile, by the way, they ask what name do you want to give a call mobile. And that's it, enter, it's going to install everything. And finally, after that, you can open the project in Visual Studio Code or whatever you use. And here, finally, I did npm start to start this development server for react native. And you're going to notice, if you scroll up, there's a QR code. What you've got to do is open your camera app, point it to the QR code. I'm going to share my phone again. Here's my phone, I'm pointing the camera app to the QR code. And finally, I can click that label. And that opens expo app on my phone, make sure you download expo, for those just came in. Okay, you should see open app whatever here, that's working. For those just came in, you need expo on your phone installed. Let me copy the links again. You need that. There you go. Expo, this one, or that one. If your iPhone user, this is the one, expo go. If your Android user, this is the one, expo. Okay, everybody has to be on track, otherwise we can't continue. Let me know if you're having trouble. Okay, I'm going to keep going. Okay, back to my text editor. For those who just came in, remember, if your phone has to connect to the same Wi-Fi as your computer, if they're not on the same network, it's not going to work. So if you've got an error, you've got to go to package.json inside mobile. And then you've got to change the script start to expo start, space slash, if you cannot make the phone have the same network as the computer running the development server. I'm not going to do that because I don't need it. Okay, anyway, with that out of the way, let's look at this. So we got all the dependencies here. We already looked into how node install stuff and on and on and on. So what we do now is we go under mobile directory, app.js, and this is where you're going to see that text. You can see line seven, open up app to start working on your app. That's what you see on the phone. So if you do change this to hello world and save the file, you should see it update in real time. If everything is set up properly, let me share my phone screen again. There you go. Here's my phone screen and the message changed to hello world. Okay. Now, if you just got here and you have trouble following, let me know and we'll tell you the commands to run to get to where we are right now. Comment in a chat. Anyway. All right, so you change the code, save the file automatically, it's going to appear here. Hope that's clear. Going back here. So basically the anatomy of React Native, it's very similar to React on the web like we did. We call going to the web client directory here. We got some React component pages, for example, messages, it's just a function that returns some template ultimately here. That's something that looks like HTML, but it's called JSX, which is synthetic sugar for calls to react dot create element, the function JavaScript function. Anyway, going back to app under mobile, you see the function app, that's the main application that's run, the screen that you see, and it returns a template. Now the difference between React on the web and React Native is the tag names are different. Notice we don't have like a div, we have view, and notice we don't have like a span for text. We have just text like that. And this is the status bar component. And then when you want to style things, instead of doing class, you do style like this, and you pass an object as the value. Now this object styles here is defined here. And it's basically an object. You can ignore the style sheet for now. It's basically an object that has the property container. So when you say styles dot container, you're accessing this value here. So imagine this value is actually being replaced here like that. Okay, basically it's basically JavaScript writing the style like that. So if you don't want to write it inline, you do what we usually do CSS, right? We define kind of like classes or whatever. And this is very similar to that. Now how's everybody doing? Everybody got here so far. The person who just got here at last, are you able to create a project? Or you want me to tell the commands again? I don't think Zoom, you can see the history of messages, right? So I can paste them again. Come on, let me see. I'll paste this repository to download the code. And then we got commands to run, commands to run, this, call, name it mobile, NPM start, use phone camera app to scan QR code. But I need to tell you to download Expo app on your smartphone first. Let me paste that here. So everybody else just got to make sure everybody's on track. And then if you, your phone must be connected to the same network as computer. Otherwise, you have to tunnel, Expo start, in fact, you're getting some like this. Okay, I paste everything that I code in the chat. You can read from the top to the bottom, I hope that helps. Anyway, so let's start doing some stuff here. Okay, the first component that we learn is text, right? It's very easy. Basically it's like a paragraph or a span in HTML. So we use a tag text, we type whatever you want to show and close it like this. Just like HTML, right? And in order to use the text, you got to import, okay, from React Native at the top and with the curly braces like that. Make sure it's there. If you have more than one, you can put a comma between them, okay? And then, yeah, okay, now another text, what's up? And that should show on the screen automatically. Okay, hello, what's up? Let me move my fingers on the way. Okay. Now, let's learn how to add a button. So what you're going to do is, okay, button like this, first letter capitalized. You can say, click me, and then close it like that. Just like HTML, accept the first letters, v capitalized. And then that's going to show a generic button, but I wanted to do it like this so I can show you how to debug an error. So I intentionally missed something if you look at the phone. Okay, this is what you're going to see when you get errors. You're going to read the error and say, okay, render error, property button doesn't exist. Okay, it doesn't know about button, so we got to do what? Import. So you might find yourself forgetting to import things. So go up there, it's from React Native, put inside the curly graces button here. And that shouldn't do the job of fixing. And then it's going to give you another error saying you need a title, basically. Because this is actually wrong, sorry. That's tough. Let's go, it's title, actually. And then you can leave it like that, that's fine. So usually when you have this closing like that and you don't have anything between, you can just put the slash here and take away the closing tag, okay? And that should finally fix it. Now you see the button click me. And you press click me, nothing happens. So how do you handle click? Well, that's called on press in React Native. Now let's do that. So you add a property here, instead of on click, in React Native is on press. And then you can pass a function, for example, on button click or press or whatever, that's good press. And then we can define it here before the return, but still within the function for app, on button press. And then you can do something when the button is pressed. Maybe you want to show a message. Let's do show a message after the button. So what we got to do is use have a state. So let's do react use state here and have an empty message initially. And then we destructure that. So let's call it a greeting. How about that sec greeting? So basically I'm asking, I got import that too. React from React from the top here. Basically, I'm asking react, can you keep track of this empty string? And later I'm going to set to a message when I click or press the button, okay? So on button press, I will set greeting to hello there. Now this message greeting, we need to show it somewhere. Let's do it after the button. I can add a conditional here with short circuit. Basically, I'm going to say greeting variable, which is initially empty, double ampersand, and I'm going to add a text with the greeting substituted here. Basically, if this greeting is empty, that's a falsi value JavaScript. It ends right here, doesn't show anything. Now if this is true, meaning there is at least one character in the string, it's going to short circuit and look at the right hand side, because this is like an and logical. And it's going to put a text with the value of greeting substituted here. Let's test it out. Metaverse, do you know how to generate a project? Let me know if you don't. Just click here, hello there, it appears. Let me know if you need command to generate the project. I can copy it again, because Zoom doesn't keep history, right? You cannot see the previous messages. Let me copy and paste. There you go, it says the Zoom chat. Okay, everybody got easy, too easy, I want to move faster. We got text, we got button, we learn how to use state just like we do for React, and a function to handle the press. Pretty much the same, patterns, right? Let's add an image about that. Okay, let's import from React Native an image. Doesn't matter where you put the image, I just like following alphabetic. That's what I put after B. Okay, let's add an image after the greeting. Oops, sorry. Now, image spelled out, different from HTML, which is just IMG. This one has a source spelled out as well, and you can pass an object to this. Remember, this is the syntax for the value of this prop, which HTML called attribute. React world, we call it prop. So this is the syntax, and inside we can put an object. Okay, don't confuse the curly brace outside with the inside. The outside is the syntax, the inside is an actual object letter from JavaScript. And you can add a property called URI, and you can put the URL of the image. Let me take a dog image found on the web. Here's the link, like that. Okay, so you can self-close the image. You can either do like this, or you can put the slash like this. Also, you want to set the width and height, and we do that with the style attribute. And remember, this is syntax, curly brace, and then we got the object for the actual style. Let's do width 200, height 200. I know it might stretch the image, but... And then let's finally see it, what it looks like. So we got the image of puppies in the middle of the screen. Okay, by the way, it's in the middle of the screen because of the style of the view that contains everything. If you notice here, the container for all of these is a view element. That's a generic container. And it has a property style that takes style from the styles.container. Now styles is defined here at the bottom line 24. It's a variable that holds what they call a style sheet. That's basically an object. You can just use an object. You don't have to use style sheets like that. But documentation for React Native recommends using that somehow. There's some debate on Stack Overflow as to whether that's really beneficial or not. And I would point you to reading that. I don't want to waste too much time. But if you do want to use stylesheet, just call stylesheet.create and pass an object. And make sure to import in the top. Anyway. All right. And this stylesheet container contains flax1 background color. And because it's flax, it's expanding to take the whole thing. And then it's a container flax. We didn't talk much about flaxbox. But that's what's used here. Basically, these two variables here are controlling the alignment. Sorry. Two properties. So in React for the web, the flex direction which determines the main axis is from a row, meaning from left to right. However, for React Native, the default flex direction is column, meaning the main axis from top to the bottom. Therefore, if you want to change alignment along the main axis, top to bottom, that's justify content. So if I would say flax start here, you would see in your phone that everything moved up to the start. If I do flax end, it moved down along the main axis. Okay. Now, if you want to bring that back center, just put center there. Now, if you want to align, you see top to bottom is default main axis. Cross axis is left, right. So if you want to align left, right, that's align items. So if you want to align to the left, that would be flex start. Oops. Flex start. You should see it align to the left. Like this. And if I type flex end, it should go to the right. Remember, the flex direction here is column, so top to bottom main axis. So justify content control, stop to bottom. Align item controls across axis, left to right. Okay. I'm going to bring it back to center. You can see that. Here you go. And that's the brief flex box direction. Lesson. Okay. What else can we do now? How about a text box? Text box like an input type text, we can do that with the text input. Like this. And it's self closing. Now, it probably not going to show anything unless you add some styles. Let's add style. Here. An object. And I'm going to add some. Height. Of 40. We can add border call if you want. Gray. Border with one. And if you want to take the whole if 100% I think we can do that. Now we got import. Let's do text input at the top within the curly braces from react native. And if you want to add a label if you're free to do so, I don't have any labels and just add a text type something. And you can style this if you want style. Object font weight for bold. You want to make it bold. If you want to increase the font size. Basically, it's just like CSS, right? Except you will you have to name it using camel case, which is all the words together and every after the first word every the first letters capitalize. Let's try 16 here. That's a little bigger. Okay, let me share what it looks like for me. No, because we have Android and iPhone users. Our look might not be exactly the same. But this is what it looks like for me. If I click there, the keyboard appears and you notice the keyboard is covering the thing. So that's kind of sucks. And I cannot even scroll the page. So that's unfortunate. So maybe we can move everything up. Remember, if I go to style, to the style and change my main axis for alignment, right, justify content. I can try to do that to flex start here. And that might improve a little bit. Let's see. Okay, so now I can see the input. We try to click the return. Click there. And I can type hello there. Oops. Okay. I can type hello there. Oops. Oops. Oops. Oops. Oops. Oops. That's the text input. And I think this text input has many forms. Let's look at the docs. Let's, let's see how we can reference documentation if we ever need help. I hope you can see my Chrome. I'm using Chrome. Go to this is the documentation website. You can click guides or whatever components. And we can see text input on the left hand side. And it gives you some information about it. And you can see it can do multi-line with the multi-line prop number of lines, blah, blah, blah, blah, blah, blah, blah. Okay. So basically the reference for props is here. There's so many auto capitalized auto complete. I think there's one for hidden password or something. What does it call this secret or password? Don't remember what is this one secure text entry. This one is, if you want to add a password, you add this problem. Let me show you. Basically you go to the code. Let's add another one here. The password. Tax password. This one here can add a secure text entry like that, just like that as a prop. It's implied to be like true like that. So it can be true or false, right? False by default. So we can just leave it like that. And that should show a password if you look. But before you go there, I want to show you the other one. You can make a multi-line. And by the way, some people like this style here. It's easier to read if you break everything into a line. Like, oops, not that one after the coma. Like that. So people find it easier to read. And you can go here outside style, not inside. You can add multi-line. I think number of lines you can put like three. Let's see if it works. Let me go back to the docs multi-line. I think the height might be affecting it. If I remove that, let me see because I don't see it changing the things. Not sure. Let's try it out. Let me put 120 height. I put 120 height here. Okay, let's check it out. Okay, we got the password here. Hello. And it's being hidden with bullet points, at least for me. And let's see. Hello. Another line. Looks like you can do whatever. So many lines. Not sure if number of lines doing what I expected to do. I have to read the docs. But basically, multi-line makes it like this. You can scroll and add multiple lines. The other one doesn't let you. Press return to just one single line. And this is basically the equivalent of text area, this one with multi-line. It's a text input with multi-line. Anyway, where's my Chrome? Let me read what number of lines actually doing. Oh, this is what is happening. You see this is label here? Android. Because I'm on iOS right now. I'm using iPhone, by the way. This property doesn't work for iPhone. I don't know if people have Android there. Does number of line work for you? Because it's only Android. So this one is a specific to one platform. Okay, so keep that in mind. So I probably have to remove it because iOS doesn't work. Okay, now let's learn how to control that input. Actually, I want to make a new page to do that. Let's make a new component here. Let's try to simulate what we did for React on the web. If you remember, we have a text area. We write a comment, submit to the backend. Let's create here a new component so you can go outside, make a function. Let's call that messages. And you can return a template. What I'm going to do is going to take the text input here. I don't need number of lines. Take that out. I'm going to cut. And I'm going to go to messages here. Let me add a container view. And I'll paste that. Basically, this will act as what the user needs to type. And then I'll copy the label, which was this text. It was cut, sorry. Like that. Okay, so we got the thing with the text input. And then we can go and let's see. Basically, I created my own component, right? And if I want to use this, that is, take this and put it here. Sorry about the scroll. I would just instantiate it like this. That way it will appear just like before. Okay, there's a slight problem with the view because now it's kind of squished, like it's compressed. And that's because now we got a view here. That's container for that. And because of this view here, outer view, it has the display flex and alignment center. One option we got to do is make it 100%. Maybe that can fix it. So basically the view for messages. You can either do from, ideally I would do it from as a prop here, but for now I just go to view here and add style and make it with 100%. Let's see if that works. Yeah, that face for me. Okay, now let's take that, let's add a button here to submit, right? Button, title, comment. Let's call it comment. And I don't need a clothing tag, so I'm going to put it like that. Save that. And we're going to move this a different screen later, okay? I'm going to show you how it can navigate. But for now, let's just have it like that. Let's make it a little bit more organized. I'm going to just have this messages at the top and all the other extra stuff. I'm going to put in a different component. How about that? Let's make another one function outside. Let's call this home or whatever, because it's going to be the main screen and the other ones, it's the messages screen. Later, we're going to learn how to separate them. Okay, basically home, I want to add a view container because I have to return only one thing from JavaScript. So I'm going to take all these stuff that I don't care about, move it there. Now, the password could be in the sign up or sign in page. But yeah, we could create an element for that too. Let's do that. Another function. I don't know what you're going to call a sign in. Sure. Return. We technically don't have sign in the web client, right? See, there's an error here. I can only return one thing. So either return a fragment, if you recall, or you can do a view, either one, okay? If you do fragments like this, right? If you recall, this is just react dot fragment here, which is basically if you don't want to include that extra view or extra div and react. And people like committing with empty tags. Anyway, you can put the stuff here. Let's do it. So first is we got home, we got sign in. I want to put messages at the top. So where did I put messages? Oh my God. Line 31. I don't want it to be there, okay? Let me take this out and bring it back to here at the top. And then the other ones I'm going to add here, I'm going to add home, I'm going to add sign in. You don't need to have space between them, by the way. What else? I need to take these out, right? Because these are from the button press of home, remember? And greeting. So move it to the body of the home function here. Save it. And I think, yeah. What else? We got status bar. I don't think this is much of a change if I move to the top. It doesn't matter. Okay. Let me see what it looks like. Where's my phone? That was just moving code around, not much creating our own components and instantiating them. You can see now at the top is messages. Then we got home, and we got the sign in, right? Maybe I can annotate so you can visualize for those or it might be. If you recall, this is sign in. This here is home. And this other one here is at the top is the messages component, right? We got three boxes. Now you notice how it's all the way up there and I got a notch on my iPhone, actually. I don't know if you can see it in the shared screen, but I actually got a notch. It is blocking my view. And it's even more what's worse is it's like overlapping with the time, right? Time and the network signal strength on the right hand side. So to avoid that, we have to add a padding to the top to match the height of that status. Okay. So let me show you here the cheap trick. Oh, let me get out of drawing. We're back. Okay. So here's the container for everything. We got to add something here. So if you want to add something in addition, like a second class sort of weighing HTML, obviously HTML be class one space class two, right? Within the class attribute or class name and react here. It's easy just by using array. So you can add additional styling put this in an array. And then the second element is whatever you wanted to find like an object here. Let's say the padding to the top padding top is 40. And that should add some space there. Let me show you what it looks like for me. Now, this solution might not be so ideal because baby devices, different devices have different heights. I'm not really sure this is what it looks like for me. So it's a lot better than before. I don't know how it looks like for you, but I see some space at the top now. There is a constant that X will provide that we can use to actually try to be more comprehensive of what device it's using. So I'm going to show you how you can use that. So basically you can use a constant value from the X will dash constants library. Let's see if it's not already installed. So we're going to go through the code under mobile package Jason, I'm going to look at the dependencies. I don't have X will dash constant. So I have to install it. So I'm going to open the terminal. And let me see if we can do that without killing the, the development server that I have in a separate terminal window. I'm going to CD to mobile make sure I'm in mobile and PM install X will dash constants like that. Let me copy this for you. Okay, we got it here dependencies. What we got to do is go to app where you see patting top. You're going to see that you're going to use constants dot, oops, constants dot status bar height like this. And then you need to import that at the top. And we do so like constants report constants from X will dash constants and save it. And I think that worked without restarting the server. If you look at my phone. Okay, so that way I can see the space of the top. And I think it matches the height of whatever device you're using. So if you're in a different iPhone or Android device, I think it should also work for you very nicely. Okay, maybe it's time for us to take a break right now. What do you think? Let me move back to this, the code, what it looks like right now. Okay, so let's take a break and I'll see you on the next one.