Expo Go on iOS & Android

[00:00:00]
>> Kadi Kraman: Okay, so we created a project now, called Task Lease if we cd into our project directory and see what we created here. So this should be a pretty bare bones project. So we just have our package Jason, our lock file, our main entry point. Which is just a single file after TSX and our app.json which is a config file for your app, and in your package.json under scripts you can see the scripts you can use to start your app.

[00:00:37]
So you can use the start command which you can see runs expo start. So to run the packager, so the JavaScript side of your app, you run mpx expo start, or you can just run yarn start, npm run start, or whatever package manager start command used. So this now will give you a way a QR code to scan.

[00:01:02]
So basically, a React Native app consists of two parts: you have the JavaScript side, and you have the native app side. So, this here is building the JavaScript side. So how do we get our native app side? For this learning course, we're going to be using Expo Go for this.

[00:01:20]
So, get your phone.
>> Kadi Kraman: Now on your phone, go to the App Store. If you don't have Expo Go installed yet, search for Expo Go.
>> Kadi Kraman: And download it.
>> Kadi Kraman: And the app will look like this. So if you're on an iPhone like I am, there is no button here to scan your QR code.

[00:01:56]
So what you actually do is you open your camera app and you scan the QR code. Now, if this is the very first time you installed Expo Go, this actually won't work the first time. So I installed Expo Go from scratch, specifically to show you. So I've tried to just close it, and now I finally get this prompt that says Expo Go would like to find and connect devices to your local network.

[00:02:22]
And this is so it could actually get this package managed. So I'm gonna choose allow. And go into the camera app and scan this again.
>> Kadi Kraman: And now you should see something like this. So this is just your app. So the code that we have in our app.tsx running inside Expo Go.

[00:02:50]
>> Kadi Kraman: And let me show you on Android as well. So on Android, it'll be similar. So we're going to go to the Play Store. We're going to search for We'll just search for Expo Go. We're going to install Expo Go.
>> Kadi Kraman: And we get this app installed. And now on Android you do actually get a button here to scan the QR code.

[00:03:15]
So let's allow Expo Go to use the video. And scan the QR code, and we have our app running. Now the reason that the iOS app doesn't have a button is because Apple doesn't allow it, so the Expo Go app wouldn't be allowed on the App Store. It's a basically that's where the restriction comes from, so that's why they're different.

[00:03:42]
All right, so with these, the debug things that are worth knowing is that if you shake your phone, this is where you get your debug menu. So the debug menu will have an option to reload. You can show the performance monitor, you can open a JavaScript debugger, or you can disable fast refresh.

[00:04:03]
So the disabling fast refresh you would usually only do accidentally, so if your app is no longer updating, check that you haven't accidentally disabled it. But most of the time what you use here is you want to reload the app for any reason. Actually shaking your phone might be a bit annoying.

[00:04:23]
So actually on iOS, you can also, if you hold three fingers to the screen, it will also open the dummy. She's handy.
>> Kadi Kraman: All right, and I am actually going to open this on an iOS simulator, because it will be a little bit easier to see on my screen for the workshop.

[00:04:51]
So iOS simulators, you will get this if you have Xcode installed, which isn't necessary for this workshop. But we'll do that in the intent and I just wanted to call out that we used a TypeScript template, and you might be wondering whether you have to use TypeScript. And honestly, I would very, very much recommend it.

[00:05:11]
The reason being that the JavaScript community like companies, and projects, and communities, are very much moving from JavaScript Script to TypeScript. And TypeScript is just a superset of JavaScript. So all JavaScript code is valid TypeScript code. And TypeScript is just JavaScript with some additional type information. So even if you've never used TypeScript before, I very much recommend doing it for this workshop and you'll just get a very light intro into TypeScript.

[00:05:40]
If you really, really don't want to use TypeScript, I actually had some time yesterday, so I created this JavaScript only version of the app that we're gonna be building. I'm not linking to it throughout the course, but I used the same commit names, so you could look it up.

[00:05:55]
But honestly, the difference between this and a TypeScript course is very, very minimal. So I would just do the typescript app, but I wanted people to have an option. And finally, with some debug tips, if you're struggling to connect to Expo Go, first make sure that your phone is on the same Wi-Fi network as your computer.

[00:06:17]
You should be connected to the same thing the reason for it is that this bundler is running on localhost on your machine, so only devices that are connected to the same network will be able to access it. But if you still can't get it to work, or if that's not possible, then there is actually a workaround, so you can run the start command, but with dash dash tunnel.

[00:06:42]
So the first time you run this, it will prompt you to install Ngrok. Then what it's going to do is it's going to expose your bundler externally to the Internet using Ngrok. And that way you can actually scan this QR code from any device on any computer anywhere in the world and you will run the bundle from your local machine.

[00:07:04]
And this is incredibly handy if you want to share what you're working on with a colleague or a friend but also if you want to get around this restriction. So it's quite common on Windows when you have a firewall for this to be a problem. It's a little bit slower than using it normally.

[00:07:22]
So if you can not use Tunnel, I would recommend doing that.