1
00:00:02,230 --> 00:00:08,830
Now besides setting up a new project from scratch with React Native CLI or with the expo CLI

2
00:00:08,860 --> 00:00:10,820
and then choosing the bare workflow,

3
00:00:11,020 --> 00:00:19,710
you can even convert a managed project into a React Native bare workflow project

4
00:00:19,900 --> 00:00:24,480
and that's pretty cool because that means you can get all the convenience features of the managed workflow

5
00:00:24,490 --> 00:00:32,170
during development and once you're done for example or once you need a certain third-party package which

6
00:00:32,230 --> 00:00:38,110
integrates some feature you don't have built into expo and you absolutely need, in such a case you can

7
00:00:38,110 --> 00:00:43,180
still switch and you don't have to rebuild the app from scratch and create a brand new project and copy

8
00:00:43,180 --> 00:00:44,890
over your code.

9
00:00:45,010 --> 00:00:51,380
How? Well in your project and this is the native device feature, the great places project we build earlier

10
00:00:51,380 --> 00:00:57,520
in the course where we can add places, where we are of course using the location, maps, the camera, SQLite,

11
00:00:57,520 --> 00:01:05,230
where we are using all these things, there in this project, you can simply run expo eject and

12
00:01:05,230 --> 00:01:10,390
this transforms your project into a non-expo managed workflow project.

13
00:01:10,390 --> 00:01:13,110
Important though, there is no going back,

14
00:01:13,110 --> 00:01:18,550
of course you can copy your folder and make a backup copy and save this or if you're using git, you can

15
00:01:18,550 --> 00:01:23,860
of course go back to an earlier commit but if you haven't saved your project, once you eject it, you

16
00:01:23,860 --> 00:01:25,360
can't transform it back,

17
00:01:25,360 --> 00:01:26,900
so be aware of this.

18
00:01:27,160 --> 00:01:32,680
You would have to create a brand new expo managed project and copy over all your code if you wanted to

19
00:01:32,680 --> 00:01:33,970
go back.

20
00:01:33,970 --> 00:01:40,720
So here if you run expo eject, you should actually be asked to which kind of project you want to eject

21
00:01:40,750 --> 00:01:46,180
and here I got two options in the end. Now the options you see here by the way might differ over time

22
00:01:46,210 --> 00:01:52,360
but here, the two options I have are bare and expo kit. Expo kit is deprecated,

23
00:01:52,360 --> 00:01:58,780
this is basically what we had before we had the bare workflow, so you shouldn't really switch to this,

24
00:01:58,780 --> 00:02:02,520
instead you can switch to bare here which simply means that

25
00:02:02,530 --> 00:02:08,710
now this will be transformed to a React Native project, as if it would be created with the React Native

26
00:02:08,710 --> 00:02:13,010
CLI without the expo wrapper but it will be preconfigured

27
00:02:13,030 --> 00:02:18,640
as mentioned here on the react-native-unimodules page which is it is kind of this package which

28
00:02:18,670 --> 00:02:26,200
expo needs to expose all these expo APIs to a non-expo app. So it will preconfigure all these things

29
00:02:26,200 --> 00:02:29,140
during each action so that you don't have to do that,

30
00:02:29,350 --> 00:02:36,120
so you get a React Native plus app so to say. So if I hit enter here and now important, you can't go back

31
00:02:36,120 --> 00:02:42,310
once this completed, you can choose a name for the home screen and I'll choose great places here for example,

32
00:02:42,910 --> 00:02:50,490
hit enter, now name my Android Studio and Xcode projects rn-guide

33
00:02:50,530 --> 00:02:54,670
but that's up to you and now this will do its job.

34
00:02:54,880 --> 00:02:56,280
It transforms the project,

35
00:02:56,290 --> 00:03:02,380
it adds an Android folder and since I'm on macOS, it also adds an iOS folder. Of course on Windows and

36
00:03:02,380 --> 00:03:02,790
Linux,

37
00:03:02,800 --> 00:03:06,970
it won't do that because there, since you now need to build this locally,

38
00:03:06,970 --> 00:03:08,660
it can't build iOS apps

39
00:03:09,640 --> 00:03:16,450
and it preconfigures everything and installs a couple of dependencies so that you can use your existing

40
00:03:16,450 --> 00:03:22,150
code and all the expo packages you already installed in this bare setup,

41
00:03:22,150 --> 00:03:25,130
so it does not just set up all the unimodules stuff here,

42
00:03:25,240 --> 00:03:32,710
it also makes sure that all the packages you are already using, like expo location or expo SQLite,

43
00:03:33,130 --> 00:03:37,980
that those packages also work. So now this can take a while, so

44
00:03:38,010 --> 00:03:46,260
let's wait for this to finish and here it's done and you see it actually tells me that it generally

45
00:03:46,260 --> 00:03:50,430
did its job but there were two packages which require some manual setup.

46
00:03:50,430 --> 00:03:54,750
You can simply click on these links to get instructions on what you need to do there,

47
00:03:54,780 --> 00:04:00,810
it's the expo image picker and the React Native maps package where you need to do some manual installation

48
00:04:00,810 --> 00:04:01,980
to finish it up.

49
00:04:02,820 --> 00:04:05,010
So here on the expo image picker page,

50
00:04:05,010 --> 00:04:11,400
in the end what we need to do is we need to run port install in the iOS folder, so we need to do all

51
00:04:11,400 --> 00:04:11,810
the things

52
00:04:11,820 --> 00:04:18,660
after installing the package. So in the project folder, I'll navigate into iOS and run port install, port

53
00:04:18,660 --> 00:04:24,930
is like npm for iOS, it installs some dependencies which iOS needs to work correctly,

54
00:04:25,050 --> 00:04:32,040
so that's what's happening now and once this is done, we'll also need to add this entry here to the Android

55
00:04:32,040 --> 00:04:36,030
manifest, so that's also something we'll need to do.

56
00:04:36,270 --> 00:04:42,030
So we need to go to the Android folder, the app folder there and in the source folder, the AndroidManifest

57
00:04:42,360 --> 00:04:47,070
and then as described here, add this inside of the application tags.

58
00:04:47,070 --> 00:04:57,060
So here is application and in there, we should add this activity entry here, like this, that's required.

59
00:04:57,300 --> 00:05:02,280
Now whilst I'm already here, you will also see that this manifest file also was set up in a certain

60
00:05:02,280 --> 00:05:02,950
way,

61
00:05:03,090 --> 00:05:08,940
it includes all permissions and of course, you don't want to do that, you only want to ask for the permissions

62
00:05:08,940 --> 00:05:10,390
you really need.

63
00:05:10,410 --> 00:05:18,480
So as it says here, remove any permissions your app doesn't need and for example my demo application

64
00:05:18,480 --> 00:05:24,300
here should only need the access find location permission which I'll move up there

65
00:05:27,440 --> 00:05:36,890
and the camera permission of course which I'll move up there and also the write external storage permission,

66
00:05:41,790 --> 00:05:43,520
that should also be required.

67
00:05:43,530 --> 00:05:48,900
These should actually be all permissions and you can check all third-party packages or all expo API

68
00:05:48,900 --> 00:05:54,110
packages you're using to make sure you're not missing any permissions.

69
00:05:54,300 --> 00:06:00,840
With that, I'll actually comment out all these permissions here and also all these permissions and we'll

70
00:06:00,840 --> 00:06:09,170
test it to see whether that works. So with that, setting up the image picker package is done. Now React Native

71
00:06:09,190 --> 00:06:14,880
maps also needs to be configured and there we can dive into the installation instructions.

72
00:06:14,880 --> 00:06:18,260
Now this npm install command, that already happened

73
00:06:18,390 --> 00:06:24,960
but now what we need to do is we need to run React Native link React Native maps. So let's simply go

74
00:06:25,020 --> 00:06:32,380
up one level back into the root project folder and run React Native link React Native maps and

75
00:06:32,380 --> 00:06:34,590
that will now link everything up,

76
00:06:34,600 --> 00:06:40,870
make sure that everything works correctly, that everything is configured correctly and you will still

77
00:06:40,870 --> 00:06:49,120
need to do some manual stuff, all these things here should not be required,

78
00:06:49,270 --> 00:07:00,230
that should all be done with linking thankfully but on Android, you need to make sure that you add this

79
00:07:00,230 --> 00:07:00,790
entry here,

80
00:07:00,790 --> 00:07:05,520
this metadata entry into your application key in the AndroidManifest.

81
00:07:05,630 --> 00:07:11,990
So here inside of application, we can add this entry and there you need to place your Google Maps API

82
00:07:11,990 --> 00:07:12,740
key.

83
00:07:12,840 --> 00:07:14,680
Now I have that in the env folder

84
00:07:14,690 --> 00:07:21,230
if you remember, so I'll just grab this key and add it here, replace your Google Maps API key here with

85
00:07:21,230 --> 00:07:23,490
it and also important,

86
00:07:23,660 --> 00:07:31,040
if you go to the Google Maps API page, you need to enable this maps SDK for Android for your project,

87
00:07:31,040 --> 00:07:31,790
that's important

88
00:07:31,790 --> 00:07:36,500
otherwise this will not work. For iOS, you don't need to do anything special unless you want to use Google

89
00:07:36,500 --> 00:07:41,690
Maps there, in which case you need to follow the instructions given in the React Native maps

90
00:07:41,870 --> 00:07:44,920
instructions here for how to use Google Maps on iOS

91
00:07:45,800 --> 00:07:52,930
but for Android you definitely need to enable the Google Maps SDK for Android API here. To enable this API,

92
00:07:52,940 --> 00:07:58,760
you can go to the Google Cloud Platform here for the project you worked on earlier when you set up that

93
00:07:59,000 --> 00:08:05,240
API key and so on and then here under APIs and services, you can go to library which takes you to

94
00:08:05,240 --> 00:08:09,710
a library of all the Google APIs and there the maps SDK for Android,

95
00:08:09,710 --> 00:08:11,120
you need to enable this.

96
00:08:11,120 --> 00:08:15,980
You also will need to set up the maps SDK for iOS if you want to use Google Maps on iOS which I won't

97
00:08:15,980 --> 00:08:17,150
use here though.

98
00:08:17,350 --> 00:08:18,760
Now it should be enabled here already

99
00:08:18,770 --> 00:08:21,500
but make sure it is. So in case it was not enabled,

100
00:08:21,590 --> 00:08:22,710
definitely do so.

101
00:08:24,370 --> 00:08:27,240
With that, this should also be set up such that it works

102
00:08:27,250 --> 00:08:34,450
and now if we run react-native run-android, the app we built in an earlier module with the expo managed

103
00:08:34,450 --> 00:08:41,260
workflow should now still work, now without the expo managed workflow without the expo client being used

104
00:08:41,260 --> 00:08:47,770
on the simulator or the real device but instead build locally with Android Studio or of course also

105
00:08:47,770 --> 00:08:48,090
with

106
00:08:48,100 --> 00:08:54,000
iOS if you want to use that and therefore in the same way as you would do it in a React Native CLI

107
00:08:54,010 --> 00:08:55,510
created project

108
00:08:55,510 --> 00:09:01,000
but now after ejecting from the managed workflow which of course means all this code was written in

109
00:09:01,000 --> 00:09:07,180
the managed workflow and yet I now run it in the non-managed workflow which is pretty sweet.

110
00:09:07,180 --> 00:09:10,830
So let's wait for this to finish and see whether this app works the way it should.

111
00:09:11,590 --> 00:09:16,780
It's coming up on the Android emulator here which is the emulator I want to use for testing because

112
00:09:16,780 --> 00:09:23,020
there I can use the emulator camera for testing and again, just to emphasize this, this is now not using

113
00:09:23,020 --> 00:09:24,400
the expo client app,

114
00:09:24,400 --> 00:09:28,930
we also couldn't scan a barcode here because there is no barcode to scan,

115
00:09:28,940 --> 00:09:34,570
this is now really an app built with Android Studio and pushed to our app.

116
00:09:34,720 --> 00:09:38,710
So here's our app and now let's try adding a new place here,

117
00:09:38,710 --> 00:09:44,470
test, take an image, allow access to the camera of course

118
00:09:49,370 --> 00:09:50,630
and then take this image

119
00:09:53,960 --> 00:09:55,190
yes crop it,

120
00:09:56,060 --> 00:09:58,010
pick a location on the map maybe,

121
00:10:00,760 --> 00:10:04,050
here's the map coming up, this location looks good to me,

122
00:10:04,070 --> 00:10:06,760
save this, save the place,

123
00:10:06,760 --> 00:10:07,540
here we are

124
00:10:07,540 --> 00:10:09,940
and now let me close this app.

125
00:10:10,060 --> 00:10:13,210
There, you also see that this really is a standalone app installed,

126
00:10:13,210 --> 00:10:19,210
if I open the app drawer here on the device, here on the simulator,

127
00:10:19,380 --> 00:10:22,040
it's this great places app you see here.

128
00:10:22,040 --> 00:10:28,920
So if I launch this, this now relaunches the app we just worked in and there's our place as it was stored

129
00:10:29,190 --> 00:10:30,330
in the local storage,

130
00:10:30,330 --> 00:10:34,540
the image obviously was stored on the filesystem otherwise we wouldn't see it

131
00:10:34,710 --> 00:10:41,370
and it works as before but now not inside of the expo client but as a standalone app without any expo

132
00:10:41,370 --> 00:10:41,970
wrapper,

133
00:10:41,970 --> 00:10:48,300
still using some of the expo APIs and expo packages with the help of this unimodules package which

134
00:10:48,300 --> 00:10:53,640
is automatically added and configured to the bare workflow which we on the other hand got with the help

135
00:10:53,700 --> 00:10:55,080
of ejecting.

136
00:10:55,080 --> 00:10:57,000
So lots of cool things going on there.