I'm going to talk about React Native, that's a framework that we use to build mobile applications using the JavaScript programming language, aka Node.js. Now why use this and how are mobile apps made traditionally? Well, traditionally you have two versions. We have Apple with iOS and you have Google of Android. To do Apple, people used to program Objective-C, but now they do Swift. If you want to build only for Apple, you do that. If you want to do Google's Android, traditionally it's with the Java programming language, but now they're using more Kotlin, Kotlin language. If you want to do just that, you can do that. Now the problem is when you have a product and you want to target both iPhone users and Android users. How do you do it? You want to build a different app for Android, a different app for iOS, and that might be too costly for me, especially if I'm a small business startup. What people have come up with is different ways to develop cross-platform, meaning I develop one app and it works on Android and it works on iOS. Now there are many solutions that came out of that. One of them is React Native. If you're familiar with web development, we have a library called React.js that we used to build user interfaces. Somebody had the idea, why not use the same kind of pattern that we use with React on the web and build mobile apps? So that's React Native. You write in a JavaScript language in the manner of React, but it actually appears as a mobile app. They figure that out and it makes it very convenient and easy for us to do. Enough talk, so we're going to need Node.js first installed in your machine. Make sure you download that. Then you're going to need a smartphone because we're going to develop on a smartphone today, although you could have used an emulator or a simulator if you have a Mac, but that's not the topic of today. So for convenience, just get your iPhone or your Android. Make sure you download the Expo app. If you're on Google or Android, go to Google Play, download Expo. If you're iOS, download Expo, go from the App Store, okay, because we're going to load our application using this program. Okay, here's the website for React Native. If you're curious, you can go there, read more about it. Anyway, we're going to need also a terminal because I'm going to run a command to generate the app. So let me go here and open a terminal. Right now I'm using a Mac, so I can just use the terminal app. If you're Windows, either CMD, Command Prompt, PowerShell, Git Bash, whatever else is fine. Or even the built-ins in your text editor or ID, for example, Visual Studio Code, if I press Ctrl-BackTick, the key next to one, it opens the terminal. Okay, so let me clear this. So go whatever you want the project to be, so I'm going to say npx create Expo app separated by a dash. The documentation keeps changing, like they add new stuff, change stuff. So right now, they tell us to add app latest to install the latest version. And then you have to do what the following, the option template with dash dash template, space blank, because I don't want, I just want a simple app blank template for you. Before we didn't have to do this, but now that they've changed things, that's why I've got to do that. Now finally, I think we can add any name you want if you want to customize the directory name. Otherwise, I think it will say my dash app. So let me, today I want to build like an image gallery. So I'm going to say mobile image gallery separated by a dash. Press Enter. And it's going to ask you want to proceed yes, type y and enter. So that's going to install the package and generate the project. So those are NPS, the command that you can use to run NPM is the node package manager. So that's what it's doing. It's installing that from the NPM registry. Create expo app is one way that you can generate a project for React Native. It might take some time depending on if you have installed before or not. And meanwhile, let me know if you have any questions or any concerns because it's better we address now otherwise you cannot do anything later. I hope everybody's installing it without an issue. Let me scroll up for those who just got in, we're just generating a project of the command here NPS create dash expo dash app at latest, space dash dash template, space blank, whatever name you want for the directory, I choose mobile dash image dash gallery. Do that in your terminal. Okay, let me just copy this to the Zoom chat in case anybody's lost or have come late. I'm going to move on here. It's been installed. You can see there are different ways to run it. Make sure to CD first. So we got to go CD exchange directory should work on Windows, Linux, Mac to the mobile dash image gallery that I created. And here I'm going to do the following. Okay, I'm going to open my text editor. That's visual studio code, but you can use whatever you want with the current director meaning dot. So I can have the code open and I'll show you later. Let me open my visual studio resize. Okay, my visual studio is fine. I got the code there. Now I have to run the development server. Now the development server, there's one thing you have to do. So you need to have your phone, your smartphone connected to the same network as your computer. If you don't have that's not going to work. Now is there a way to make it work? Yes, I will show you with the dash dash tunnel option, but try to connect to the same network. Is this meeting be recorded for later reference? Yes, and it's going to be posted to YouTube. There's the link. Anyway, make sure you're connected to the same network as your phone, or your phone has the same network against your computer. If you cannot do that, I mean, no, I'll show the option in a moment. So MPM space start will start the development server. Okay, and then scroll up. You're going to see this QR code. What you're going to do is you have to scan this. Let me show you here. I'm showing my phone one moment. Let me share. I'm sharing my phone right now. I'm using iPhone iOS. As you can see, I have ExpoGo installed. Okay, now on iPhone, you're going to look for the camera app. Use the camera app. Now you're going to go here, see that? It's going to see open in ExpoGo. You click that, and it's going to open the Expo app automatically. So it's going to load the app to your phone. Okay, so it's loaded. Open up app, whatever. This is the app that's loaded on your phone. Okay, if you cannot get this to work, I'll show you the tonal command. Okay, somebody asked, please show the start command again. Okay, let's go one by one. Let me stop sharing here and share the development server. Okay, backtrack for those who just came in again or got confused. First we have to generate the project. I paste the command to the Zoom chat. You got the project generated, ready. Now you got to run CD to the project. Let me go back here and clear. So I created the project. I'm going to CD to the name of the directory, and then I'm going to do MPM start. Again, you have to have your phone connected to the same network, Wi-Fi as your computer. If you don't have that, I'll show you how to make it work with the tonal option. Okay, MPM start. It will bring up this, if you scroll up, there's the QR code. If you are on iOS, use the camera app to scan this and press the button. If you're Android, go directly to the Expo app and scan the QR code. I think they have an option there. Okay, somebody said, it takes me to a website. Can you elaborate? If you're still having trouble, let me know and be more specific. Anyway, is everybody able to load the app on your phone? Again, iOS, camera app, scan the QR code, press the button. Android, I think you have to go directly to the Expo app first. Choose the option to scan QR code and then point to this. Okay, I'm assuming everybody's fine. Now, for those who cannot connect to the same network, you're having trouble, have some error, and I'm going to show you the option to make it work. Now, you can press Ctrl C to exit this development server if you want to stop. Ctrl C to stop, okay? That's the way it is. Then I'm going to go to my code here. This is the code in Visual Studio Code. I'm going to go to the file package.json. Let me increase the font size. You can see a little bit bigger. I think I hope you can see it's not too small. Okay, you see this line with set scripts and immediately after the start, now Expo start, you're going to add space to the right, dash, dash, tunnel. With this option, you don't have to have your phone connected to the same network as your computer, and that should work. Okay, save that file with the dash, dash, tunnel after Expo start, and then you go here to the terminal and run it again the same way. Just say npm space start. And then I see the same QR code and you can scan it. This should work fine. This is the tunnel option, meaning you don't have to be connected on the same network. Somebody asked my Expo go says npxexpo start when I open the app. It does give me the option scan the code. Okay, have you tried your camera app and scan? Well, I do that. Anybody else who's on Android was able to do it? I figure it out. Okay, a lot of other people know how you did it. Because we need, this is the crucial moment. Everybody needs to be on board. Otherwise, we cannot do the app. Okay, so you use the camera app. So it's the same as iOS. Okay, that's great. Don't use the app. Just use the camera. That's great. Don't use the app. Just use the camera. The same as iOS and then. Okay, so where are we? Like I said, everybody got the thing loaded on the phone. It should look like this. Open up app.js. Okay, if you got an error, please tell us what's the error is. And I'm very confident that the error is because you don't have the same network in your phone as the computer. So to fix that, like I said, you have to go kill your server with Ctrl C, Ctrl C to kill it, go to your code. Again, locate package.js. So when you have to have under scripts, the start option, export start dash dash tunnel, you know to have that. Use that if you cannot. First, you got to let me know what's done error specifically. What does the error say? And I'm very confident it's the tunnel option. So try using the tunnel option as if it works. Most of the time is just that. Okay. I'll paste to the zoom chat the dash dash tunnel. Oh, too many open files. So that's on your terminal. Yeah, that error I know. Is that on your terminal? Okay. In that case, let me see what I can do you have. That happens when you have too many files being watched. Maybe when I had a problem, I had something like a cloud drive open. So if you could close that like one drive Google Drive app running in your Mac, you could close that and try again. And another way is I'll show you here in my website. Sorry about the wait post. We got to wait for everybody to be on board. So if you still can figure out the problem, Mickey, you have to go and install watch man if you're on Mac and still having that trouble with the two many files. First you need brew. I don't know if you have brew, but here's the link. I paste to the zoom chat. And then after you get brew, that's like a package manager. You have to install the brew install watch man separated by space. Every word. Okay, I paste the link to the zoom chat. Anyway, try doing that. And fortunately, I have to keep going because I don't have cannot get stuck and have people wait. All right, so try that and let me know. Okay, everybody, let's move on. So I'm back to the code here. So what do you want to do is go to app.js. That's the file. What's nice about this is if you see here, open up app.js, whatever, that's what appears on your phone. And if you try changing that text to something else like hello world, and you save the file, my case command s or control as if you're on Windows. You can see automatically, oh, I forgot to power up my server. So don't forget to restart. I forget here because I had killed it before it's MPM start again. Let me MPM start. Okay, great. And I'm going to go back to the code. And you can always scan the code back again. Or if you're still in expo for some reason, you disconnected, you can shake the phone, literally shake it. And it will bring out the venue. Let me show you here. Share the phone. I'll show you again. I'm going to shake it to bring out this menu here. The menu allows me to reload the app. So I click reload. So that should reload and bring the hello world. You see hello world now? So that's what I replaced in app.js. Okay, back to the code. So the way, if you know HTML, web development, we use tags, markup language, the same way in React. And in this case, React Native. So we have a tag for open for the text. And you have a closing tag. We have the open tag, whatever you want to show, and then close the tag. So that's the basic text element from React Native. To use that, you need to import here in the top with the curly braces text. Put the text there. Obviously, I have multiple things in part. It's my separator comma. You don't have to have space just for style. And for the React Native package. Okay, great. Now, we also have this view. And that's like a div in HTML. Whereas tags is like a span. View is like a div element in HTML. It's just like a generic container. Now, if you want to style something, you can use the style attribute. When we're dealing with React, we call it property or prop. But HTML, this attribute. Use the style attribute and you can pass here an object. For example, equals sign and then the syntax is curly brace. And if you want to pass an object, you have to add more curly brace. Don't confuse this, okay? The outer curly braces for the syntax in HTML is like double quotes, but in React is curly brace. And then the inner is the actual JavaScript object. So let's say I want to put the background color, change it to, I don't know, let's see if it has light red, I wonder. So when I save my file, maybe that one doesn't exist, let me try red. Oh, it's actually working. It's because I've removed the... Let's see. I've removed the other styles and the red is all the way up there. So if we want to bring it up, I would have to have these other styles here. Let me add it here. Let's see. Column. Center. Try that. Flex one. Flex one. So you can see you can separate the properties of a comma. Okay, I think that was just a flex one that was needed to make it expand. Yeah. Okay, so I styled this container with the style property. I can pass an object with property and value separated by a comma. It's just a JavaScript object. Background. Notice in CSS we have a lower case separated by a dash, the words. But here it's JavaScript, so you got to use the camel case naming convention, meaning every subsequent word has the first letter capitalized. And I need flex one here because it uses flex box. And to expand the container upward and downward, I need the flex one. Otherwise you won't see anything on the screen. So that should see a red screen. See red, red, red, red. All right. So you can play around with the styles here. Let me see questions here. Let me know if you have any questions while reading. Okay. Everybody asks, is there a way to link the source CSS style sheet to react? Yes. So I'm about to talk about it. So you can add the styles here individually, or if you want to reuse them, meaning you want to copy, you know, every time I'm using the same style, that's when this style sheet create can be useful. Now, obviously I can just create an object here, let styles, style sheet or whatever, and put everything there like this one. I can do that. It's totally fine. Put styles sheet here. That's one way of reusing. Obviously you could also move this to another file to better organize it. And then you can import that and use anywhere you need. Okay. That's one way. Another way that I recommend is using stylesheet.create, although many people question whether this is really needed. If you want to use this, fine as well. The only difference you have to call stylesheet, import from react native, and press dot create and pass the object here. So if I wanted to have this one there, I would just do the same thing. Style sheet dot create like that. Worked the same way. Let me shake my thing and reload to see if it's not breaking anything. Yes, same red, red, red, red, red. Somebody asked, can you make a CSS file import like in react? Yeah, like I said, it's not really CSS. You can just create a new file if you want styles.js. You can define the styles there. And then you can export like this. Export default stylesheet. And then from here you would go import stylesheet from dot slash styles. Worked the same way. Create a separate file, define it there, export. And then you're going to go here and put import and then you use it anyway one. Now the way they use this here in the thing, obviously you have to copy the import, right? Because it's going to complain if you look at the errors. Let me show you how to debug. If you look at your phone, I made a mistake of I missed my import. So let me see the error here. Shake reload. So if you have a problem, it's going to appear here. So you're going to read uncaught error, whatever, whatever. Something's wrong and you can press the error to go to the second one. And you can see there's a stylesheet doesn't exist on line one of styles.js. I can see and fix that. So I go back to my code and I'm going to, okay, I forgot to import stylesheet. So it's always usually import curly braces, then you put the name of the thing stylesheet and then from react-native. That way I can have access to that here. And when I save that, I should fix that problem. So let me show you another way of getting back to expulcasia. I just missed my thing here. I don't know if I pressed. Oops, what's going on? Let me share again my phone. I don't know what happened here. Not letting me share. Let's try again. Unplug, plug. Now I'm the one having technical difficulties to share my phone screen. I hope Miki, were you able to do the thing? Let me read the messages. Are you still having the same trouble with ngrok? That problem is just because ngrok was not installed. So try removing the dash-tunnel option. Try removing dash-tunnel, like I said. Okay, I don't know what the hell is happening. Now it's working, right? There you go. Let me share here my expulcasia. Okay, for some reason I lost connection and then my thing closed. So I got back to expulcasia. I could just scan the code again. Or if I'm on expulcasia, I can just press the recently opened, and it will bring me back to that. Okay, now it's working again. The error is gone. Do I need to create an expulcasia account? No, you don't. You don't have to. Just use your camera app, scan the QR code. I'm assuming you were able to run the development server and get the QR code to show. That is the case to scan that. Okay, enough of that. Let's do the image gallery stuff. Okay, I hope you're going to scratch about style sheet. That's a matter of organization of the code. We don't have much time to talk about that today, but we got to make an image gallery. All right, so let's just wipe everything out here. I just want to see the view. Obviously nothing is going to show up if you do that. Now I'm going to show you how to show an image. And I can just import image here. And you can say image. Just like HTML's IMG, here's the image spelled out. The attribute or prop is going to be source spelled out. Different from HTML, that's SRC. And then pass the curly bristful syntax of the value, and then pass an object here, URI. And you got to pass URL there. Okay, then you got to specify the width and height of the style that's outside, but let's find an image. And one of them here, I'll move the thing to the other computer. Let's see, Lauren Pixum. I'll show you this website's very nice to show images if you need my new developing, called laurenpixum.photos. Now right now I'm showing the browser. I'm sharing my browser. This is the website that's nice to take any image. You can generate images online by clicking the link. And you can just take a random image from that website. Just copy this. Okay, copy that. I'll paste it in the Zoom chat if you're interested. Copy and paste. Then I'm going to go back to Visual Studio Code. And this is image here, source. Paste it there. You can close the image with the slash, greater than its self-closing, but make sure it doesn't slash because we're doing React, JSX. Now you need to set the width and height. That's what they recommend. So outside here, as another attribute or prop, you're going to do style and double curly braids. Put a wave. Let's put 400 and hide 400 just for the sake of it. And you should see the image appear there in the top. Okay, everybody was able to show the image. Usually people like breaking this into a new line like this. It's better to read. It's up to you if you have one liner. That's fine as well. Okay, now image gallery usually has an X button or a swipe, right? You just swipe for mobile, but since we don't have time for swipe, we're just going to do a button. How do I show a button? Well, it's a button component like this. Last-end button. Now it needs a title to show what you want to show. Let's say next. And then it needs an alt-press, which will do something if you press. You call a function. Now I'm going to put an arrow function here that does nothing like that. I'll do it later and close the button. Self-closing like that. Now it's going to complain, but it doesn't exist because it got imported to the top. So you can do it before, after, or between whatever you have there. And now I should see next under the image. This is what I got so far. I hope you have that too, the image and the next button. Let me see. Going back to the code. You can, if you, you know, typically when we work at HTML, I can put a container for the image. And I think the problem is when it loads, it will jump. Something like that. If I reload here, sometimes the images will jump as they're loaded. So you, you want to add like a container here style. You can make minimum height 400. So it doesn't jump as we're going to load the images. You're going to notice that. Now, usually I could have done it later to show you how it jumps. But anyway, you can always use views to, to group things together, like a container, generic container. Okay. Now what I want to do is make an image gallery. The sense that when I press next, I want to show another image. And then I press next, another image. But when do we get the images? Well, this website that I just showed you has a very nice API to list images. You read here, pick some dot photos. I'm going to use that if you copy this. Based in a new browser window, you're going to see it returns JSON. An array of objects. And then we can use the download URL. Property that has an image source. Copy this one to a new image, new tab. I see this is the image. So this is very nice. We can leverage that. Okay. Let's learn to fetch data. So if you're familiar with web development, it's going to be the same way using the fetch API. So what we're going to do here, see in react components or functions and then return a template, but I can do something for now I have to use what's called effect, use effect here. Now react hooks, because we're using functional. So what I want to do is when the app loads this component loads, I want to go and fetch all the list of images. Now we do that with react use effect. Let's import react at the top. Or react from react. And then here I'm going to say react dot use effect. And this is a function that's called a hook. And I'm going to pass another function inside like a narrow function to do something. And the second argument to use effect is the dependencies array, which if you put empty, it just runs this function once. So what's going to happen is the app is rendered. This template is rendered. It's going to call this function from the use effect after the first render. And because the empty array is past here, it only does that once. If you didn't have that, it would call the function after every render, which is not what we want. Okay, so this is the function use effect. We're going to do a fetch call. Fetch is used to make a HTTP request. XHR XML HTTP request. And you have to pass first what's the API endpoint, right? I want to make a get request to this endpoint. A get request is usually when we go in the browser and you type something in the address bar, press enter. That's a get request to that address. And that address you call URL. So that's the default behavior fetch. So this returns what's called a promise, right? Now there are different ways to handle promise JavaScript, right? Back in the days, you get to do promise dot then. And then you can do a sync away. I'm going to do that then because it's easy. But if you're free to do a sync away, if you like, or know how to do that. So this fetch where return a promise, we can call dot then to do something after we get the value. And this something is called a response. We can pass a function here. Okay, we can be explicit or explicit. Let me be explicit. Now we get a response object and then we've got to extract the information from the body of the response. And usually because we know it's JSON, so we extract the text and convert to JSON. Now there's a convenience function we can do response dot JSON like this. And we can return that. Okay, of course we're assuming everything went well. There's no errors or anything. Okay, that's the assumption here. I'm not going to handle errors. That's an exercise you can do. Anyway, this is also going to return another function. We can change it again with another dot then. And finally, we will get the images array of image objects. I'll just call it images. And I'll put another arrow function there. So okay, now we have the images but have no way of storing it. We need to find a way of keeping track and holding this to memory. And that's when the use state hook comes in. I can go here before the user fact. I can call the use state like react state is basically. A way to keep track of something to let him react. No, hey, we're going to keep track of this. So whenever the state changes, I want you to re-render the component. So when a state change reacts, re-renders the component. So that's basically why we use that. In versus just creating a normal variable and assigning the value to that. Because if you do just one normal variable react won't know that the value changed. That I assigned an array of image objects to this variable. Okay, so to do that, react, I'll use state and then you can pass an initial value if you want. For example, if you want it to be an initial empty array, you can pass it like that. And this will return an array of two things. And well, the first thing is access to the value. Initially it's going to be empty array. The second is mutation function. Something that you can call that function to modify the value of something new. And people typically use the destructuring notation for that. Like with the square brackets like this and saying for, in this case, images, set images and put a const. Const because creating a variable and then we want to destructuring the sense. I want to extract the first element of the array and putting the variable images. I want to extract the second element and putting the variable set images. Notice the convention is always to say whatever image name, whatever variable name here. And the second is always set that variable name in criminal case. If you need to set images, that's what exactly what we want to do here. In the dot then we're going to say set images and we're going to pass the new value for the images, which comes from the response.json here. So basically this images now will hold all those array of objects. Okay, make you think I'm glad you were able to connect. Yeah, so you can just start changing your code and it will change automatically in your phone. As you save the file. Okay, I was just talking about the state. So we call set images here basically we're setting the value of images to what we got from the response. I went to this website. Hey, I want all these image information. I got it. And I now hold it in memory in the images variable. Then I can use that here to make my gallery, but the problem is I have so many images. How do I know which one I want the user to see. So we also have to keep track of what's the current image. Well, because we have an array, we have indices, right? Every array has many elements. And if I want to reference the first one, that's the one of index zero. The second one index one and so on all the way to the length of the array minus one. Well, I can keep track of that with the reactive state again, but I can say react dot use state keep track the current image index. Now, obviously there's no images initially back and just say zero to be the first one, because arrays always count from zero. The first elements index zero. Okay. So we're going to do structure again, we're going to call this current image index. That's my name. I think you should choose descriptive names to put the variables. And then the next one is just going to be set current image index all in the camel case. All right. And I like to put semicolons at the end just for sake of habit. Okay, now that we have the current image index, what I'm going to do is, okay, if I have images, that's the list or array. If I want to the first one or anyone I can use the bracket notation and pass the current image index like so in this case initially zero for the index. So it's going to be images of zero, which is the first element. Okay, so I can take this and place in this URI value here, place it there. But the problem here is this is going to give me back an object if you remember from the response. And this object has a property called download URL. So I have to say dot download underscore URL. Okay. Let me save that. See if it's working now. For those curious about debugging it, how do I know I want to investigate the response or whatever. Wow. You can either you can use a debugger with breakpoints or just do a simple console log here. Let me show you console log. You can console log. Let's say I want to I'm curious about what the value for images is on every render. So render meaning the function app is called. Every time it's called, it's going to render the template with a return value. Now, if I console log images, I'm going to be able to see what it looks like in every render in the console. Usually I like to put something like images here to know what this console log means because this is going to print this to the console. But if we don't have a reference to know what what is this that I'm printed. So that's why I either like to put images comma here, or you can make this an object and it will have the property images and the value of the images content itself. Okay, save that. Now, how do I bring up a debugger? Okay, you're going to go to your phone. Let me see here. We can show you shake it. I think it's still not up to date. I mean, we love to see if no problems. Sometimes I might forget something. Okay, we got to not really download it undefined. So we got a problem. Okay, how do I fix that? Okay, let's go there. Share screen. So the problem here is saying that this is undefined. This this image is whatever that's, that's true, because initially images is an empty array. So when it hits this here, when you try to reference zero out of the empty array, it's going to give you undefined. So we try to reference download you have undefined is going to give you the error. Now, to fix that error, first, we got to add a guard here. Guard to say, hey, I don't want to show the image until I have fetched them. One way of doing it is just by looking at the length of the images. Obviously, the better way is to keep track of the loading state. You create a variable loading that you set true when you're still loading data and you set false when you finish. That's the better way. But since we don't have time for that, I'm just going to add a guard here. So here I'm going to add curly braces and I'm going to try images dot length. Oops. If that is greater than zero means I have at least one element. I'm going to cut short circuit and percent there and don't forget to add the curly brace here. Okay. So what is doing? Okay, it's going to check the length of the images. If it's greater than zero, the right hand side is evaluated. And it's going to show the image. If it's zero, no images is not going to show anything. It's going to stay as it is. Now, that's not nice for the users. So typically we add a message here saying, okay, what if images length is zero? Maybe I want to add a tax here or something like a loading spinner. Since we don't have time for spinner, just put a tax here saying loading image. Assume it's loading. And that way when the initial is going to appear very briefly loading image and then the image will appear. Let's try that. Let me know if I have any questions so far before I go onto the debugger. You're still unable to what? Let me know more specifically what you're having trouble with. Be specific. Are you trying to show the image? Okay. What about your source? You have URI. Do you have the effect and the state? Did you add the curly brace? Double M percent and then the image and don't forget to close the curly brace. What error are you getting? Are you getting an error? You have to let me know. I don't know what you're seeing. Sometimes the app doesn't quite reload automatically so you have to shake it and then press reload. No error, just a button. Okay. Did you put the fetch like this? Let me copy the code for fetch. I paste the code there. You have to fetch from that specific URL. If you have a typo in that string for the URL, it's not going to work, obviously. Anyway, I'm going to show you the bugger here. Maybe you can leverage that to understand what's going wrong. Let's walk through it. Okay. Make sure everything's okay. I'm going to share my phone. Let's see. Is it showing? I think my cable is messed up. Come on. Okay, now it's okay. I'm going to shake it. Oops, I pasted it to the wrong person. Let me paste it to everybody in the meeting. I pasted it again, the URL. Okay, come on. Shake it. Stop. Okay, finally. Okay, you're going to see open.js debugger. See that? Open.js debugger. Press that. What's going to happen is a browser is going to be open. Where's that? Let's see if it's working off the bat. Typically, the browser is open. Let me know if yours open or not. Mine is not working, but it should. Anyway, if that doesn't work, let's see the terminal. Try again. Open.js debugger. Here. Terminal. Typically, here, I can see, you see, if I cannot get it to work through the debugger pressed in the app, I can go to the terminal. You see this option? If I scroll all the way up back to the QR code, there's this J option. Open the debugger, so I press that. What is going on? No compatible apps connected. Not saying I'm not connected. Let me know if yours works by having difficulties. Copy this. Inspect. Yeah, you got the same error? Yeah, I don't know why it's happening today, but usually it doesn't happen. Let me try to move through the app. Open.js debugger. Wonder if it's because of the tunnel option. Let me take that out. I remove tunnel option. Then I'll go to the terminal. Control C to kill and PM start again. If we can't do it, that's fine, but that's how we would do it. Let's see. Basically, what would happen is a browser window would open, and you could press F12 to see the DAF tool, just like you do with web development, HTML, CSS, JavaScript, and you can inspect the console messages. Let me see this. If anybody else is having trouble, let me know with the other stuff. Let me try to get this to demonstrate. I see the message here. Oh, it's because, oh, this is happening because of Mac. I'm using Mac right now, and the problem is the Mac, you know, Mac has security settings, and it's the first time trying to do something, so it's asking me for permission. Terminal wants to access Google Chrome, so I click allow, and I hope that works. If you're using Mac as well, that might be your problem. Yeah, I removed my tunnel option, and now I can see the DAF tools after allowing Mac to the terminal to access Google Chrome 9 browser. So now I'm going to share my DAF tools. Okay, this is what I wanted to see, and it's going to be like this. Just open the browser. Like I said, on Mac, it needs permission, so click allow, and you can see the console log here. Image is, the first time you can see it's empty. Let me increase this, because it's hard to see. I don't know if I can increase the font size. I don't think I can. Anyway, I hope you can see it, but it's saying image is empty array. And then the second time is the second render. Okay, every render console logs, you can see image is now populated with 30 elements. I can expand them. So if you're curious before, hey, what does this data structure look like? That's how you find out. The first element is this is the one has a download URL. That's what we use to show the image. And then other stuff in the object. Okay. The body said I got same error. Close the app on accident, now a new error. You know, if you close something on accident, just do the same thing over again. If it's just the phone, scan the photo again of the QR code. If you're unsure everything is messed up, go to the terminal control C to kill it, and then run npm start again. Then you see the QR code, use your camera, scan that. Okay, everything messed up, just do everything over. And for your record, I removed my dash dash tonal. I don't know if that was affecting the opening of the debugger, but I removed that. And I allowed, click the loud in my Mac, the terminal to open the browser. Anyway, this is nice, but there's something even better. If you click sources, let me show you here. You can see the JavaScript source somewhere here. App.js is here. See that? If you go to sources in the DevTools, and you expand this to see app.js, this is the code where you can actually place breakpoints. So somebody was unsure what was wrong. So you can trace the code here. For example, maybe is my fat okay? So you could place a breakpoint here, pressing the line number, and then you could put another one in the other one. Let's first go here to see if it's actually calling the function, right? So what I would do is reload, shake the phone and reload. And then it should stop at the breakpoint here. Let's see if it's stopping. Let me see if it's working or I disconnected. Okay, it's working. So this should stop there. I don't know why. Let's see. Let me try again with the return. This should stop the breakpoint. Reload. Open. Yes, debugger. Oops. I clicked it again and it closed it. Let me try reload. Let me see your messages. I fixed it. It was because type property called styles. Yeah, yeah, be careful. When programming, every single character matters. I would suggest you look character by character instead of words and make sure it is plural and singular. Make sure the names are the same. Usually you have silly mistakes like just one character. Anyway, that's the debugger. I guess I should just wrap it up. Yeah, so basically I wanted to show more, but we're out of time unless you guys want to do five more minutes, try to show the clicking. Let me know. Okay. So I was going to show next is basically to change the image. So to change the image, here pressing next. I was going to show you later how to do change your screen, but we don't have time for that. So I'll just let you know how to change the image. I'm going to press next. So basically we've got the button here. I hope you're seeing my code and on press is the property that you can pass a function that is going to be called or executed every time you press the button. So in this case, I can pass a function here that will call set current image index to the next one. So if I'm here and expand that, I can say, okay, I want to set the current image index and the new value in the parentheses. Well, I want the current image index plus one. Okay. And this is nice until you reach the end of the images. What do you do? You want to go back to the first? You want to like circle? If you want to circle, you can percent module with the images length. So that way, I think there's 30 initially. So it goes for zero for 29. When you reach 30, 30 divided by 30 has remainder zero, right? So it would replace with zero again here. This is the module operator. Like 30 divided by 30, take the rest, the remainder, which will be zero again. And we'll go back to zero to start. So if your last image click next, it goes to the first. Okay. Let's save that and see if it's working. I'll reload here and see and share with you via cable. Let's try again. I think my cable is bad. That's why it's messing up the connection. I'll get a new cable. Press next. It takes some time to load, but it's working. Okay. Just wait. Press next. And that's the next. You can press like 30 times and then go back to the beginning because there's only 30 images, objects. So you can keep pressing and go on and on and on. And then we'll go back to the beginning. I hope with the module. Obviously, if you want to test the going back to the beginning, you can make the data set smaller. That's too many. Can there's just three for the temporarily? Let me show you. Let's see. Or you can console log the index as well. That's another way. So there's two ways. Let me see. If you console log the index here, you can see the depth tools. If you open the burger, it should go back to zero. You console log current image index. And then here, make the data set smaller. One way is you can where you set the images. You can just slice that and zero. Let's say we just want two images. Or let's do three. It's zero comma three. Meaning take the array. I want to chop it. Only take from the index zero all the way. Three minus one. So zero, one, two. So that way I can temporarily do that. What's the problem now? Can't read of undefined. That shouldn't be a problem. Let me reload. Okay. I hope it's working now. Otherwise it fixed the error. Let's go. Let's go. Come on. Share. Press. It'll have three images. I hope if it reloaded. So MacBook Air. Some dude. Another MacBook Air on the right. Oh, okay. We messed up. Okay. This is called one off error. Okay. Sometimes it's very common. We forget to set the value by one. Let's let's see what's going on here. Let me see if I can open the dev tools. I'll show you the dev tools here. Let's see. New share. Here's the dev tools to debug. You see. You see what happened in here. First, the current image was zero and then all the way to three. It shouldn't be three. That's wrong, right? Because it should be zero, one or two. So one off error. Let's fix it. So I think I have to do what? Let me see. One, one image, current image that is two. We are here and press the button that should go back to zero. So this one is going to do two plus one is three. Oh, I know why. Wait. Images length. Do I have reason to believe the parentheses matter here? Let me check. Baby. Image length. Let's let's work this out in the dev tools. Current image index is two. And then I do this. What happened? Oops, not images. I have to put create images here. Let me create images. It's just an array of, let's say, one, two, three things. Let's do it again. Current image index two. You can always walk through in the terminal if you cannot figure things out, just to make have a sanity check what would happen in this case. Oh, that's wrong, right? That's what the problem is. Okay, so what if I put parentheses? Ah, that's the problem. Math, it's math problem, precedence. So I think it was doing the wrong calculation here. You know, if you do one percent images length first, that's one, and then you do two plus one is three, you know, so you put the parentheses. So the sum is done first, addition first. Remember from math? That's the problem. Okay, figure it out. Go back to the code. We're going to add the parentheses here. And now I hope that works. Let's test it again. Here's the phone. First image index zero. Second image index one. Third image index two. The next should go to the first because it resets indexes zero. Aha, now it's working. We fixed the one off error. Now we can circle back to index zero, one, two, zero, one, two, so on. Okay. What do you guys think? So I think that's enough. I would like to go over changing to press the image and see details, but we're out of time. But if you're interested, I'll talk about the boot camp in a moment, but I'll conclude this lecture.