1
00:00:02,530 --> 00:00:07,990
Now we tested the application on a real device which is of course pretty nice and also amazing to see

2
00:00:07,990 --> 00:00:10,520
it run there but for development,

3
00:00:10,540 --> 00:00:16,270
I will actually use a simulator which is a virtual device running on my machine, simply so that I don't
 
00:16.270 -- 00:20.310
constantly have to test the app on my real device,

4
00:00:20,460 --> 00:00:23,660
I like having it here, also makes it easier for recording.

5
00:00:23,680 --> 00:00:29,680
You probably also want to test the app on a simulator at some point, for example because you probably

6
00:00:29,680 --> 00:00:35,530
only own either Android or an iOS device and you also want to test and see your app on the respective

7
00:00:35,530 --> 00:00:41,410
other platform or you have both devices, you have an iPhone, you have an Android phone but you also

8
00:00:41,410 --> 00:00:47,530
want to test your app on an older iPhone, on a smaller Android device and with simulators and emulators,

9
00:00:47,680 --> 00:00:52,860
you can launch different types of devices and test your app there. To get started with that,

10
00:00:52,870 --> 00:00:55,030
go to the guides section down there and click on

11
00:00:55,030 --> 00:00:59,710
Up and Running, doesn't matter where you click though, in the end you just need to get to docs.expo.io

12
00:00:59,740 --> 00:01:03,460
and there in the managed workflow,

13
00:01:03,520 --> 00:01:09,910
you can click on iOS simulator or Android Studio emulator and there, you learned how to install

14
00:01:10,000 --> 00:01:16,690
Android Studio and then launch a virtual device or install Xcode which is Apple's development environment

15
00:01:16,900 --> 00:01:23,620
and launch an iOS simulator. Important, an iOS simulator can only be launched on MacOS devices because

16
00:01:23,710 --> 00:01:30,020
Xcode, a tool which you absolutely need for that is not available on Windows or Linux, so you can't run

17
00:01:30,040 --> 00:01:37,180
an iOS simulator on Windows or Linux, you can run an Android Studio emulator there though, on MacOS

18
00:01:37,180 --> 00:01:38,510
you can run both.

19
00:01:38,530 --> 00:01:41,710
So let's now install these things and let's start with the Android

20
00:01:41,770 --> 00:01:47,650
Studio emulator, for this, you first of all need to install Android Studio. For this, you can of course simply

21
00:01:47,650 --> 00:01:53,080
google for Android Studio and you should find developer.Android.com/studio, simply click

22
00:01:53,080 --> 00:02:00,550
on there and then there, choose download Android Studio and agree to these terms here.

23
00:02:00,550 --> 00:02:05,090
Now this will open up that download window and now download Android Studio which is quite large and

24
00:02:05,090 --> 00:02:07,280
therefore this download can take a while.

25
00:02:07,360 --> 00:02:09,810
Now I'll be back once this download is finished

26
00:02:09,920 --> 00:02:16,250
to then continue with the setup. So the download finished for me and with that, I'm opening this up, now

27
00:02:16,280 --> 00:02:22,490
I'm on Mac here but also Windows, you simply double click on that downloaded file to start the

28
00:02:22,490 --> 00:02:27,750
installer and the installer will open up and walk you through a couple of steps.

29
00:02:27,810 --> 00:02:33,590
Now in that installer, you can simply leave all the default settings. Now with the Android Studio installed

30
00:02:33,590 --> 00:02:36,080
and the installation finished, we'll launch in a second.

31
00:02:36,080 --> 00:02:41,960
Now before I launch together with you and we walk through this first step, make sure you have these

32
00:02:41,960 --> 00:02:45,860
settings down there on MacOS and Linux configured correctly.

33
00:02:46,010 --> 00:02:47,780
So on Windows, you should need to do that

34
00:02:47,840 --> 00:02:52,580
but on MacOS and Linux, make sure you follow these two steps which you'll find in the official docs

35
00:02:52,640 --> 00:03:00,170
so that everything works correctly. Now with that, let's launch Android Studio, once you start it,

36
00:03:00,170 --> 00:03:02,640
you should see a screen that looks something like this.

37
00:03:02,750 --> 00:03:07,580
There, you can click on configure and then choose the SDK manager.

38
00:03:07,610 --> 00:03:15,310
Now here in the SDK manager, make sure that you have one of the latest SDKs installed.

39
00:03:15,350 --> 00:03:20,180
Now typically, you have the topmost SDK which is is still in beta,

40
00:03:20,480 --> 00:03:26,150
so in my case that's the Android API level 29q which has no official name yet

41
00:03:26,390 --> 00:03:30,050
and the latest stable version, in my case pi, is the one you should install,

42
00:03:30,050 --> 00:03:33,170
typically the second item here in that list.

43
00:03:33,170 --> 00:03:37,190
So the first version which has a real name so to say, in this case pi,

44
00:03:37,190 --> 00:03:40,920
make sure that this is installed simply by checking it here

45
00:03:41,000 --> 00:03:46,460
and once you've checked it, you can click apply down there and this will automatically download and install

46
00:03:46,460 --> 00:03:53,830
it. Besides having an SDK installed, make sure that in the SDK tools, you have the Android emulator installed

47
00:03:53,830 --> 00:03:54,640
here,

48
00:03:54,640 --> 00:04:01,120
so simply click on this here, add a checkmark here and the SDK platform tools and the SDK tools, that all

49
00:04:01,120 --> 00:04:11,890
these three are checked here. Also check into Intl 86 emulator accelerator here and the Google Play Services.

50
00:04:13,110 --> 00:04:16,100
With all of the checked, click apply

51
00:04:16,100 --> 00:04:21,300
and now again this will prompt you and then start downloads of all these items and install them into

52
00:04:21,300 --> 00:04:27,600
your Android setup here and you need all these things installed to develop Android applications.

53
00:04:27,600 --> 00:04:34,620
So let's wait for this download and installation to finish here and with that finished, you're done here,

54
00:04:34,630 --> 00:04:40,300
you can close that and the next step, still in that Android Studio window here, is that you click on configure

55
00:04:40,570 --> 00:04:42,410
AVD manager.

56
00:04:42,490 --> 00:04:46,750
This is the manager that allows you to create and launch virtual devices.

57
00:04:46,750 --> 00:04:49,120
You see I got a couple of devices already,

58
00:04:49,120 --> 00:04:53,830
you might have none, you can always create a new one in the bottom left corner by clicking on create virtual

59
00:04:53,830 --> 00:05:00,070
device and then choose a phone here and you can choose any image you want here to create different devices

60
00:05:00,070 --> 00:05:01,340
of different sizes.

61
00:05:01,360 --> 00:05:06,310
I would recommend going with one that has the Play Store installed, that can help with testing certain

62
00:05:06,310 --> 00:05:08,430
features which we might need later

63
00:05:08,440 --> 00:05:11,830
but in general, you can pick any image here which you want,

64
00:05:11,860 --> 00:05:15,350
I'll go with the pixel 2 here. Click next,

65
00:05:15,490 --> 00:05:17,150
then choose an Android version

66
00:05:17,170 --> 00:05:20,230
you want to use on that device

67
00:05:20,230 --> 00:05:20,620
and there,

68
00:05:20,620 --> 00:05:22,500
I will use the latest stable one,

69
00:05:22,510 --> 00:05:28,110
so not the beta one, not the Q in my case but the latest stable one, you might need to download it first,

70
00:05:28,120 --> 00:05:32,350
this image, this is independent from the SDKs you installed a second ago,

71
00:05:32,350 --> 00:05:38,730
these are device images. So make sure you download the latest stable one and select it thereafter,

72
00:05:39,040 --> 00:05:40,420
click on next.

73
00:05:40,420 --> 00:05:42,600
You can leave the default settings here,

74
00:05:42,610 --> 00:05:46,680
you could dive into advanced settings if you really know what you're doing but otherwise, you can leave

75
00:05:46,700 --> 00:05:51,520
the defaults and click finish and this will now create a new emulator,

76
00:05:51,610 --> 00:05:57,250
in my case this one here and you can launch the emulator by clicking that green play button here and

77
00:05:57,250 --> 00:06:04,200
this will now start that emulator here which is now booting up here and once it is booted up, you can

78
00:06:04,200 --> 00:06:09,180
run your expo app, your React Native app, on this emulator.

79
00:06:09,180 --> 00:06:10,530
So let's wait for this to finish and

80
00:06:10,530 --> 00:06:17,420
let me then show you how to launch your expo app on that emulator. So the emulator finished up booting

81
00:06:18,890 --> 00:06:25,640
and now you can launch your app on this emulator simply by going to your project where you might have

82
00:06:25,640 --> 00:06:28,190
your process still running, if you quit it,

83
00:06:28,220 --> 00:06:33,020
you can simply restart npm start in your React Native expo project.

84
00:06:33,020 --> 00:06:39,930
So that's what I'm doing here and it's again starting the expo dev tools in the browser here and now

85
00:06:39,930 --> 00:06:46,530
here where we previously scanned this QR code, you can press run on Android device or emulator and if you have

86
00:06:46,530 --> 00:06:51,870
an emulator up and running, it will automatically run your app there or in your terminal here where you

87
00:06:51,870 --> 00:06:54,120
have this running npm start process,

88
00:06:54,120 --> 00:06:57,720
you can press a to also launch your app on the emulator.

89
00:06:57,750 --> 00:06:58,950
That's what I just did,

90
00:06:59,100 --> 00:07:02,850
this will now install the expo client on the emulator automatically,

91
00:07:02,880 --> 00:07:07,750
so you don't need to install or manually install the expo client there, it's done for you

92
00:07:07,830 --> 00:07:12,540
and once it's done with that, it builds your app and runs it on that Android device.

93
00:07:12,570 --> 00:07:15,060
So let's wait for this to finish,

94
00:07:15,060 --> 00:07:21,610
here it is, here it's booting up and yes click okay here, you're prompted whether you want to allow displaying

95
00:07:21,610 --> 00:07:29,800
this app the first time you launch this. Turn this on here, then go back, go to the app drawer here or to the task

96
00:07:29,800 --> 00:07:36,460
manager and go back into your app here and now here is your expo app launching, it's again building that

97
00:07:36,460 --> 00:07:42,490
Javascript bundle at the bottom and once it's done, it will launch your expo app here and only that first

98
00:07:42,490 --> 00:07:48,240
build takes quite long, subsequent rebuilds and hot reloads as you saw are pretty fast.

99
00:07:48,520 --> 00:07:55,960
So let's wait for this build to finish and now it is finishing up here and here, we see our app. By the

100
00:07:55,960 --> 00:07:56,410
way,

101
00:07:56,410 --> 00:07:57,130
this is nice,

102
00:07:57,130 --> 00:08:00,700
we saw it on the iPhone before, at least here in the videos.

103
00:08:00,700 --> 00:08:05,440
Now here it's running on Android and the button is one of the very few components React Native offers

104
00:08:05,470 --> 00:08:08,410
which does automatically adjust its look to the platform,

105
00:08:08,410 --> 00:08:09,940
so that's pretty sweet

106
00:08:09,940 --> 00:08:15,820
and we have the same functionality as before and this allows us to test this, not only on the real device

107
00:08:15,850 --> 00:08:17,560
but also in a simulator

108
00:08:17,590 --> 00:08:23,020
and there you can simulate any Android device you want, which is of course pretty useful.

109
00:08:23,020 --> 00:08:25,500
So that's the app running on an Android simulator

110
00:08:25,510 --> 00:08:31,540
and throughout this course, I will always always show how this runs and works on an Android emulator.

111
00:08:31,540 --> 00:08:34,390
Now let's next dive into running this on iOS.