Summary of React Native Tutorial

I'll now talk about React Native, which is a framework we can use to build mobile applications using the JavaScript programming language, aka Node.js. Traditionally, these applications are divided into separate systems, one for iOS, one for Android. And if you were to do it the kind of original way, you would have to either use Java or now Kotlin to build an Android app, and then for Objective C or now Swift to build the iOS. So typically, companies would have separate teams building separate apps for that. But then, of course, why not use the same code base to build one app for both systems? That's the requirement that spawned this framework React Native. And instead of either using Swift or Kotlin to build the app, you actually build it with JavaScript or Node.js. Okay, so we're going to need Node.js installed. That should come with NPM. And then you're going to go to the terminal. Let's open here BS code, I'm going to open a new terminal here. And let me make sure, okay, so I'm going to do npx, base, create, dash, expo, dash, add, add latest space, dash, dash template, space blank. And this command will ask you the name of your app, we can just call it mobile client or something. And you can see the mobile director has been created. Basically this command allows us to generate a project for React Native without us having to manually write all the code for the boilerplate to make it work. So it's very convenient. Okay, once that is done, you can see the mobile. And if you notice the mobile directory here, as a package JSON with all the dependencies already set for this project. And what we're interested is running the start command here, which basically calls expo start. So you can run npm start. And that should power up the development server. And if you scroll up, that my thing is too small. But if you scroll up here, you'll see this qr code. Now what you have to do now is you need a smartphone, and you're going to install the app called expo. That's the link. Okay so make sure to install that. So I already installed expo on my smartphone today I'm demonstrating with the iPhone, which is iOS, should be similar to Android. Here's my phone screen. You can see expo go app has been installed, and I can click that to see it's open. Okay so typically we can do it using the camera app to scan the qr code. So what we got to do is remember that qr code from the development server here. You're going to use your camera app on your phone, and you're going to scan this qr code. And it should bring you to the expo app when you click the label. Okay so let me demonstrate. So you see my camera app, I'm going to open it. You see I'm scanning that, I see you open in expo go, I'm going to click that. And it should load the app on my phone. Okay you should see openapp.js to start working on your app. One detail is make sure that your phone is connected to the same network as your computer that is running the development server. If you're not running your smartphone connected to the same like wifi as the computer that's running the development server, they cannot connect. So in that case what you can do is, if you have that problem, you can go to the package.json file, locate your start script, you can change that, okay you can add the dash dash tonal option. Okay so if you do that, then control C to stop the server here. And then you do npm start again, it should call up the dash dash tonal option. And that option is pretty much going to make this development server available anywhere you are. You can be in a separate network on your phone and it will still work. So you can see the address here has been changed. So all you got to do is scan it with the camera app the same way and then it should work. Let me know if everybody got it working because we need to have this working before it can proceed. In my case I don't have a problem with the tunneling so I'm going to remove it. And I'm going to control C and restart my development server. Okay so I'm going to go on now. So in React Native we are interested in this directory app.js. So React Native from the name itself has React. So if we have learned the React library for the web, we can do the same pattern for mobile. So as you can see in React we have components that we define as functions. So here in app.js we have the app component defined as a function here and that returns the JSX which looks like HTML for what you will see. Now in the world of React Native we don't have specific HTML tags like div, paragraph, ul and so on. We do have separate names for things for example for a generic container we use a view to show some inline tags we use text and etc. So if you change anything here for example I change the content between the open and closing tag for text to hello world and I should be able to see in real time as I save this in my phone that has been changed. So let me go back there. Let me re-scan my thing because I changed to tunnel and back. You can see now from my sharing screen that the text changed from what the previous one to hello world. So whenever you change the search code and save it should automatically transfer that to the device. I noticed somebody just came in if you are lost let me know. I can backtrack and let you know how to do stuff. I pasted the links not the links the destructions to the zoom chat if you are lost. Going on for styling we would use this style property passed to the component and it can be just an object here of property names. Now the property names are not necessarily with the dash case like CSS it's in chemo case because we are dealing with JavaScript. So in this case what they are doing is they are using styles.container. So styles is defined here at the bottom as a variable that's the return value of the stylesheet.create function. Now this function is just a returning basically an object that you can use there so you didn't really have to use this although they recommend in a documentation. So the way you do is just create an object create a key as though it were like a style sheet for CSS and the object can have all these property values that we use for the style. So in this case you can think of this object here being copied over here. So this view will adopt these following styles okay now by default it uses flexbox so that's why you're seeing aligned items and just by content center there. And if you remove that the message should go to the top okay let me demonstrate for the text let's add some style and I can pass an object there. So for the syntax if you recall from React to JSX syntax the outer curly brace is for the syntax for the value for these property whereas the inner curly brace is an actual object literal. Let's change the color to red so you just say color as the property colon and then the red as a string because this is an object so you have to use the property colon value syntax. So when you save that you should be able to see a red text for the hello world. Okay so let me know if you're having trouble or not otherwise I'll have to keep going. Okay now let me demonstrate how we can add like something like a button. So you can actually use the button component that's from React Native you can notice here that Visual Studio Code suggests me to auto import this so if I click that it should add button here to the list imported from React-native. And once I do that I have to specify here the property to give the label in this case it has to be title. And then this can be a self closing tag so you could either do like this with nothing between the open and close or you can shorthand with the slash before the greater than for the open tag. So if you do that you should see a button. Now if you click it nothing happens. Now if you want to handle click here you have to do on press property and pass a function. Now let's call this function on button press and I will define it. Now we define it before the return value here function on button press this name has to match what you type there and it can divide the body of the function. Let's say I want to show like a message when I click the button so we can keep something in the state for React that will be set to the message content for example when I click the button I set a flag show message and then the message will appear. Now to do that we have to keep a state keep track of a value that's either true or false so for that we use the react dot use state hook with an initial value of false because we don't want to show the message and then this thing will return an array of two things one first element being the actual reference to the value and the second a function that we can use to modify that value. People usually like to use the structuring syntax so we use const with the value there let me call this show message between a square brackets so we extract the first element of the array comma and then set show message extract the second element and finish off of the closing square brackets. Now we are able to keep track of this value show message that's initially false. Now usually it's probably going to complain react is not defined so let me save this and show you how we can debug things. Here in my share screen for the phone you will see if you do any mistake if you make any mistake in a code you will see an error message and it will tell you first we have to read at the top a render error property react does not exist and then you read what line cause the problem and you can see it's line five and it points to react you can see there. So we know right away where to look in a code so app dot js line five and then the right hand side of the colon is 41 is the column. Okay so we would go back to the code go up here and we import react from quotes react you're also going to see use state being used without going through react if you want to do it that way you would go here and do the named import here use state between the curly braces if you want to do it that way. Okay once I save it I will no longer see should no longer see the error for the app. Okay now let's when I call when I click the button I will call this function on button press and then I want to show a message right I want to set show message to true now this message we have to show here in the template so I'm going to add something if show message is true I will show a text hidden message now to make this work we got to use the curly brace here so what's happening here is we have a variable that is either true or false if this value is true at the right hand side will be checked because this is an and operation if this is false it stops right there it doesn't even check the right hand side it returns the fall see value which is to be false and react we'll understand false as something you don't want to render therefore nothing will be shown okay let's try it out to see if it's working I'm going to click or press click me and I should be able to see hidden message now you have questions let me know if you ever have trouble with your app running and if for some reason it's not updating you can always reload the app let me show you how you can do it you can either go and shake your phone and it will bring up a menu if you shake it and then you can click reload that's one way another way is if you go to your development server terminal window you'll notice here in the commands there's one press R to reload the app so if you press R in the terminal it should reload the app as well okay now let's do something more fun let's show an image you can also show images with the image component so let's call image here so it's all spelled out unlike html where it's abbreviated and you can self-close it and then it need a source so you spell it all out source and for this one you can pass an object with the proper uri and pass a url there for example I got this from the internet I pasted the zoom chat too and let me just happens so you might notice there's no image it doesn't recognize it so we have to go to the top and add images anywhere here in the comma separated list add image so it imports that and then notice there's no image because we have to set the width and height of the image so for the image component add a new property here outside make sure it's outside this object you can call it style and pass an object of width for example 200 and a height 200 like a square and that should set the image you should now be able to see an image on the screen and there the image okay okay so let me show you maybe you can make like an image gallery of sorts image feed but so let's say I had I had a list of images that I want to show and you want to be able to scroll it to see them all like a feed in social media or something so basically you would leverage image component but then you need a list of images we can make an array here and keep track of that in the state usually that would come from a backend server but we we can also do it just for show right now we can show it from let's make a variable here let's call it images make an array and I'm not storing the state because it's constant but we want to change to use state for you taking it from the backend so let's add an object here and then let's call it id one and then we're going to do the url and I'm just going to use the same that we did here and just copy and paste so let's make believe each object represents an image and I'm going to use the repeated ones but you can later change it I have three more here four five oops four five six so I got six I think that's enough to cover the whole screen right so we're going to use that here to generate new images so the way we do it is we take the array images and we map so the map operation will take for every element in the array it will generate a new one so there will be a new array of new elements and those elements are defined in the argument to the map function so you can return actually an image there so we can move this inside by the way I use the alt up and down arrow to move things in visual studio code now because this is jsx if you want to return value from this to be included here substitute it use the card erase surrounding it so what's happening you have a callback function here that's called for every element of the array of images and the argument is the actual image object so you're going to start with this one and you can do whatever you want and return a new value that will populate that new array and then next go to the other one and then next go to the other one so one until the end so basically it's a loop a repetition and make sure to return the actual image from that and then for the uri here you can take from the image object dot url that way it's not always constant if you change that object it would change there as well okay let's take a look at what it looks like so you can see you got all these images but notice we only have five shown how can we scroll down to see the other ones i'm going to teach you in a moment but you can notice this error here this is because in react whenever you map in jsx you got to include the property key for each return value in the callback function so it's very common so let's fix that we go here to the image i add a key that can be something unique the image id if you don't have an id or anything unique you can use the second argument to the map that should be an index so if you add index and use that you can do that as well anyway that should fix the problem now let's talk about scrolling so to scroll some of the screen instead of using the view you're going to use scroll view and you just change that to scroll view and then you can import at the top you can add here scroll view now it's it's complaining about some scroll view child layout as you apply through the content container style because of this styling here so you got to remove that or use what they said content container style content container style property okay that should fix the problem but still the scrolling is weird and that's because probably the that's css those those styles so if i remove those styles here let me try removing everything except the flex one and then let's see you you can see hello world still one two three four still not entirely correct right so if something's going on with those styles i think the flex let's try changing it i'll remove container style from that and see what happens now it works yeah so usually you don't want to do that so i remove the property and should now be able to scroll correctly so if you need scrolling just put the outer view make that a scroll view make sure to remove those any weird styles that you might have anyway you might notice the top is a bit weird in my case i have ios and i see the notch for the my physical device covering the button and also hello world is way at the kind of the status bar that has the time and then the signal bars so that sucks so we got to add some sort of padding to the top so make sure it's always pushed down so let me show you how we can do it in a nice way so for that we're gonna need a expo constants so let me get the name for you here so if you go to package JSON we don't have expo dash constants as dependencies so we got to install it so you go here to the terminal npm install expo dash constants and it should be included now in your package json let's power up the development server again i see the qr code there and we're gonna go to app let's see for this scroll view we can actually add an interview here and set some styles on that so if you add the interview you're gonna add the style here for the padding top and that has to be there's a constant we can use from expo that already has the size the height of the status bar so we can use that we'll go to the top and we're gonna import port constants from expo dash constants the name of the import could be expo constants or whatever it doesn't matter so this is how i'm going to call it here so you're going to go where the padding top is and put constants dot and then there's a property called status bar height that should give you back the number well the height and with that i should be able to see a better at the top you can see hello where it's been pushed down because the padding at the top remember padding is the inner spacing between the content and the border of the box so now it's no longer overlapping with the status bar and i can scroll just fine although it's interesting the scrolling it goes to the status but i think that's normal right when you scroll things okay let's see so let's do something exciting i will show you this this website here picks some folders has an api that returns a list of objects with image url this download url here and it gives you an image like this so what if we use this so we're going to call on this backend server that's fake get this list of images and then we're going to show that in the app that way we have a varied amount of images that's not repeated so let's go here so if you want to retrieve data in a react app just like a react for the web you're going to use the hook use effect so somewhere here before return let's do before this thing you're going to call use effect that's from react or you can this structure or use the name the import and this use effect will take a function that we executed every render of the component if you want it only executed once you can pass as a second argument an empty array of dependencies so that means after the first rendering of this component i want to call this function this function will be called to retrieve the data from the backend server so if you recall i'm going to do this url here now to make a htp request from react native it's the same way using the webs fetch api so you can just call the fetch function pass the url and this will by default be a get request and it will return a promise and then it can handle the same way you do with javascript for the web you can do that then write a promise it's going to fulfill a value eventually and that's going to take time therefore must handle that once the promise is fulfilled the defunction that is passed to the dot then will be called with that response object and then here you would check if response is okay okay i leave that as to do and assuming it's a happy path we can return the response dot json function call to extract the body of the response and then convert that to javascript object notation which in this case will be an array of objects and that also returns a promise therefore at outside it must handle with the dot then another one and this dot then when the response body is extracted we'll call this function here that we passed to dot then and the function will have the actual array of images let's call it image list and then here i can finally take that data and store in the react state so that react will know that oh we've retrieved a new list of images therefore let's do some work to show them on the screen we don't have something keeping track of images yet so we got to scroll up and instead of using a hard coded array here i'm going to change that so we're going to make it empty by default and pass that to react dot use state and remember use state returns two things we must destructure with the square brackets and the second one will be the function to change images that i call set images so once we got that i should be able to scroll set images here with the image list as the argument therefore whatever received from the server would be now stored in the images variable here and because it's stored there react will see that the state changed therefore the component has to be re-rendered and when it reaches the mapping operation which is initially an empty thing will now be populated and will generate all of these images and there's one detail though the worry of the image is wrong because the image object that is passed here is no longer has the uri you have to change the download uri url because that's what the server response returns so you make sure to do this here all right let's see what we got now maybe that's too many images as you can see we now got different images and i think there's way too many so maybe you should have limited the api response with the underscore limit query so that's cool all right so let's go back i want to show you maybe how to debug this maybe you're interested in the response from the images to better understand maybe there's some more data we can use maybe show some text there for every image under the image so i'll show you how to debug using the developer tools so what you got to do is you shake your phone sometimes it doesn't work let's go shake shake shake come on okay there you go finally you see there's an option open js debugger so you're going to press that now if you're using when i first use this on my mac which is i'm using right now it's going to ask for permissions and it might not work the first time so make sure to grant permission to open the browser once you do that you should be able to see a dev tools window open on your computer you there's also another way of opening the debugger through the terminal that has the development server so if you go there you notice there's an option j that you can press to open the debugger so if you cannot do it through the phone you can do it through the terminal by pressing j to open debugger okay enough of that let's go back to the dev tools i'll teach you how you can set up break points to analyze that response from the server so here let me press the zoom see if i can why isn't it let me doesn't seem to work anyway quick sources and we're going to press control p and look for the file that has the code that he wants in this case app.js and it should open that same file here and then you can set up break points for example i'm interested in what the server returned so i can go here where we are about to call set images i can go to the line number click to set up a break point and then the next time i load the app let me reload it here i click reload in my phone it should be hitting the break point right now let me see so let's see why is it not doing that let me click on return reload it's not stopping anyway i don't know why it's not stopping sometimes it acts weird and it doesn't do the thing it's supposed to do let me try again open jsd bugger share roundup tools sources go to the terminal okay let me do something to make that trigger let's try putting a button here that will trigger that patch so we're going to make a function here retrieve data this function will do this fetch operation and then i'm going to call it from here but i'm also going to be able to call it from the button press so if i add a new button here let's say button title retrieve images on press here you can pass a function you can either define it or you can put it in line you can also pass functions in line like this and this one is basically going to call retrieve data when i press the button let's see if the dev tools will trigger when i press okay now it's triggering i don't know why apparently i didn't reload the app so when it save it again it's now trigger here but okay so let's see so you can go here and look at image list let's see play i'm going to press retrieve images we'll see if it's working now let's stop here you can open a terminal let's see what's going on image list and you've got the images there which is 30 of them and you can see each object has these properties of which we use only download your app so we could actually use the author name here so let's go ahead and do that and before i do it you can always remove your bake points by removing here and then you can close the dev tools when you're done okay so you can press play to go on let me go back to the code and here where we got the mapping of image i can add surround that with a view so that i can add a text next to it for example under that i will add some text with the image dot author i think right you recall try that and we should see the author name under it now it'd be nice to have a separation between them so for the view we can add style with a margin to the bottom and you can add 16 for example and this should be more far apart you can also make the text a little bit further from the image by either changing the style of the text with a margin to the top or the margin bottom of the image either way if you were to do the image you add here margin bottom or eight for example for the text you can also increase the size of the font by adding style here with font size property for example if you do 16 should be bigger so it's just like a css except the name of the properties has to be in camel case which is the first letter of the first word is lower case and every subsequent word has the first letter capitalized okay yeah so let's look so you could go on and add more information and format and the styling to look make it look better maybe you can make the image take the width of the whole screen and then adjust the height accordingly and then you can add borders colors make them cards something like that just copy whatever your favorite app is and make it look like that