Preview
Video Player
00:00
00:00
Previewing Your App
6:12Create React Native App uses Expo to get your app up and running quickly. Expo is a set of tools, libraries and services built around React Native. Expo makes React Native development easy because it helps you build native iOS and Android projects with just JavaScript and React Native's built-in components.
Create React Native app uses Expo to
get your app up and running quickly and
0:00
painlessly.
0:04
Expo is a set of tools, libraries, and
services built around React Native.
0:05
Expo makes React Native development easy,
because it helps you build native iOS and
0:09
Android projects with just JavaScript and
React Native's built in components.
0:14
So that means you don't have to know or
write any native code like Swift,
0:18
Objective C, or Java.
0:22
Expo takes care of all the native
environment set up, so
0:24
you can just focus on building apps
with the skills you all ready have.
0:26
You will develop for both Android and
iOS using one code base,
0:29
without having to install Android Studio
or X-code on your machine.
0:33
Create React Native app is going
to run a development server and
0:37
a packager that bundles
up your source code.
0:40
Expo then mix up your app available
to preview on your device or
0:43
in the simulator.
0:46
So running your app with NPM start,
starts the React Native packager
0:48
which bundles up your app's JavaScript
source code into a package and
0:52
serves it from a development server.
0:55
It's also going to print
a QR code in the console.
0:58
As you can see here, it says that to
view your app with live reloading,
1:00
point the Expo app to this QR code.
1:04
So to preview that you're building in your
iOS or Android device in development mode,
1:07
you'll need to install
the Expo Client app on your device.
1:12
Then you can simply scan the QR
code displayed on the console.
1:16
And it's going to load
your app on your device
1:19
as long as you're on the same local
network as your development computer.
1:22
And when you make any
changes to your project and
1:25
save them, the changes will be
reflected live on your phone.
1:27
As I mentioned earlier,
create-react-native app uses Expo
1:31
to launch your app in the iOS simulator or
the Android emulator.
1:35
So for example, if you want to preview
your React Native app in the iOS
1:39
simulator, you will need to be on
a Mac and have Xcode installed.
1:43
Then you can type the run iOS command
I mentioned in the previous video or
1:47
if the dev server is running,
there is a shortcut.
1:51
Press the I key on your keyboard to
open up your app in the iOS simulator.
1:54
So I'll go ahead and press I, and
it shows that it's starting iOS.
1:59
Now if you don't have the Expo
app installed in your simulator,
2:04
the very first time you
preview your app in iOS,
2:08
it's going to install the latest
version of Expo on you iOS simulator.
2:10
So this may take a little while.
2:14
When the app loads in the simulator,
you'll see the initial view and
2:16
text create React Native app
provides to help you get started.
2:20
Now if you see a screen with this text,
2:24
that means you're ready to get
started building your app.
2:26
And the screen lets you know that
to start working on your app.
2:28
Open the file app.ts.
2:31
So what's great about React Native
development is that you don't need
2:32
a special text editor SDK
to develop your native app,
2:36
just use your favorite text editor.
2:39
So now go ahead and
open the project in your text editor.
2:42
I'm using Visual Studio code.
2:45
And as you can see,
create React Native app generates
2:48
only the files you need to start
your React Native project.
2:51
So if you've built React Native apps
before, you're not going to see your have
2:54
access to any direct recent files
where all of the native Android or
2:58
iOS code libs.
3:02
So for example the file App.js
contain the main view of the app.
3:03
And it uses React Native
specific components, and
3:08
it has some default styling
here in the styles object.
3:11
Since the app is running in development
mode, if I make any changes, for example,
3:15
change the text to welcome to my iOS app.
3:19
When I save the changes in my text editor,
3:25
it automatically reloads the app
with the latest changes.
3:27
You can also launch your app in
an Android emulator or virtual device.
3:32
To run the Android emulator, you'll need
to download and install Android Studio, or
3:36
you can install an emulator
like Genymotion.
3:40
Genymotion is a popular android emulator,
because it's easy to install and use.
3:43
You can learn more about Android
emulators in the teacher's notes.
3:47
So I have the Android Studio
emulator running on my machine.
3:50
So in my terminal, I'll first
press Ctrl+C to stop the Packager,
3:53
then type the command npm run android.
3:58
You could also simply press the A key on
your keyboard after running npm start.
4:02
And there is the same app
on an Android device.
4:11
I like the iOS preview.
4:14
I can make a change in the files, for
4:16
example change this to
Welcome to my Android app.
4:18
Save the changes, and Expo will live
reload the changes in the emulator.
4:23
Expo also lets you enable React Natives
handy debugging features in both iOS
4:29
and Android.
4:34
For instance in iOS,
4:35
you can access a developer menu by
either shaking your physical device or
4:37
you can press command D on your keyboard
to bring up the menu in the iOS simulator.
4:42
Now to access this in app developer
menu in Android, it use the command and
4:47
keyboard shortcut instead.
4:51
So here you can for example,
4:53
inspect the elements in your app
using the element inspector.
4:54
Now the best part about this
menu is that you can debug your
4:59
apps JavaScript in Chrome by
selecting Debug Remote JS.
5:04
This will open a new tab in your chrome
browser, open up the console, and
5:08
you can do all your debugging here as
you're with a regular JavaScript app.
5:12
For example, I'll change some
code in App.js, save it, and
5:16
it's going to show
an error in the console.
5:20
All right, and just like that
you'll have a React Native project
5:28
set up on your computer and
running on your device or a simulator.
5:32
Now since Expo is build into
create-react-native app,
5:35
that means it got to work with all of
the components and APIs in React Native,
5:39
as well as many of the JavaScript APIs
that the Expo app provides.
5:43
For example,
5:48
Expo provides APIs that let you use
a device native features like the camera,
5:48
push notifications, geolocation, AR kit
for augmented reality and lots more.
5:54
You could even use Expo to publish and
6:00
deploy your app to the App Store and
Play Store.
6:02
To learn more about Expo and
how to install Xcode or set up an Android
6:04
emulator, check out the resources posted
in the teacher's notes with this video.
6:08