1 00:00:02,500 --> 00:00:07,190 Now I disabled linking here so that I don't have all these warnings and errors regarding code style. 2 00:00:07,190 --> 00:00:10,550 Of course you can adjust your code to follow that style, 3 00:00:10,640 --> 00:00:12,820 that's a personal preference in the end. 4 00:00:12,830 --> 00:00:19,070 Now what I want to do here is I want to show you how you can of course change the code but then also 5 00:00:19,130 --> 00:00:24,390 how we could add a native functionality in such a vanilla React Native app. 6 00:00:24,610 --> 00:00:28,780 So for that, I'll first of all simplify this starting app a lot, 7 00:00:28,850 --> 00:00:37,250 just get rid of all that content here and just add a basic style set up here with flex one, justify content 8 00:00:37,400 --> 00:00:44,090 center and align items center to center my content on the screen. 9 00:00:44,090 --> 00:00:46,550 Get rid of this thing here 10 00:00:46,760 --> 00:00:54,150 and from all these imports here, I want to use the stylesheet, I want to use the view and I want to 11 00:00:54,290 --> 00:00:59,720 use the button because what I want to add is the image picker functionality. 12 00:00:59,750 --> 00:01:01,660 So here I return my view 13 00:01:02,750 --> 00:01:08,100 and my button and on the button, I say take image 14 00:01:08,240 --> 00:01:10,460 and then in onPress, I want to open the image picker. 15 00:01:10,460 --> 00:01:11,990 Now how can we add this? 16 00:01:12,230 --> 00:01:19,740 Now since this is a React Native project without expo in any way, we can't easily use the expo APIs 17 00:01:19,740 --> 00:01:20,030 here. 18 00:01:20,040 --> 00:01:25,530 There actually is a way of using them and I'll come back to that later in this module 19 00:01:25,530 --> 00:01:30,690 but you would need to configure a couple things. So therefore what we can do instead is we can do something 20 00:01:30,690 --> 00:01:34,660 which you will do a lot if you're working with a vanilla React Native app, 21 00:01:34,730 --> 00:01:39,810 we search for React Native image picker for example to find a package that helps us with that, 22 00:01:39,810 --> 00:01:43,060 for example this one, the React Native image picker package 23 00:01:43,320 --> 00:01:49,140 and now we can install this because now we can bring any third-party package, no matter if it adds native 24 00:01:49,320 --> 00:01:55,080 functionalities or not into your app. Previously with expo, this was not really possible, there you could 25 00:01:55,080 --> 00:01:59,520 only bring third-party packages that did not tap into native device features, 26 00:01:59,520 --> 00:02:01,380 now you got no restrictions. 27 00:02:01,470 --> 00:02:03,060 So now we can add this 28 00:02:03,360 --> 00:02:09,810 and here we can install this by following the installation instructions here, so by going back into our 29 00:02:09,810 --> 00:02:18,690 project and in there by running npm install --save and then here it's React Native image picker, 30 00:02:21,970 --> 00:02:25,430 like this. By the way, you can keep this process here running and you should 31 00:02:25,450 --> 00:02:30,730 so that code changes once you save your files are picked up and pushed to your devices. 32 00:02:30,970 --> 00:02:34,310 So let's wait for this installation to finish now. 33 00:02:34,330 --> 00:02:35,090 Now it's done, 34 00:02:35,110 --> 00:02:35,860 took quite a while 35 00:02:36,800 --> 00:02:39,240 and now we need to install this and the good 36 00:02:39,240 --> 00:02:41,900 thing is this package is very easy to install, 37 00:02:41,910 --> 00:02:44,770 you should only need to run this command here - 38 00:02:44,790 --> 00:02:47,250 React Native link, React Native image picker. 39 00:02:47,340 --> 00:02:49,270 So run this in your project, 40 00:02:50,400 --> 00:02:53,550 like this and you should be good. 41 00:02:53,730 --> 00:02:57,870 Now I will say there are third-party packages that take more effort, 42 00:02:57,870 --> 00:03:00,960 it really depends on the package. For expo, 43 00:03:00,960 --> 00:03:05,540 it obviously was very easy, you just ran expo install, that was very fast, 44 00:03:05,550 --> 00:03:08,720 didn't take that long and you didn't need to do anything else. 45 00:03:08,880 --> 00:03:11,140 Here you need to run one extra command 46 00:03:11,270 --> 00:03:12,870 but of course that's also not too bad 47 00:03:12,870 --> 00:03:16,890 but again, I will say not all packages support this command, 48 00:03:16,920 --> 00:03:22,950 some packages require way more manual wire up work, manual work where you then actually need to dive 49 00:03:22,950 --> 00:03:28,250 into the Android and iOS folders to start working on some configuration files there. 50 00:03:28,290 --> 00:03:33,600 That's what the React Native link command did for you, for example on Android if you dive into the app 51 00:03:33,600 --> 00:03:39,540 folder and there, source and then in the source folder into build gradle, you will see that there, 52 00:03:42,290 --> 00:03:43,970 this line was added. 53 00:03:44,000 --> 00:03:45,710 This wasn't there from the beginning, 54 00:03:45,710 --> 00:03:48,610 this was added by the React Native link command 55 00:03:48,830 --> 00:03:52,250 and for some packages you have to add these entries manually, 56 00:03:52,250 --> 00:03:57,080 a lot of packages support the link command and with more recent versions of React Native, 57 00:03:57,080 --> 00:04:02,480 some packages even support autolinking where this linking will be done automatically once installation 58 00:04:02,480 --> 00:04:06,550 finished but not all packages have that support, so that's something to be aware of. 59 00:04:06,550 --> 00:04:12,680 Behind the scenes, a lot of configuration was changed. With that, we can now use this package, again as 60 00:04:13,100 --> 00:04:19,680 instructed in their docs so we can add this import here, here, 61 00:04:20,000 --> 00:04:31,050 then also add the pick image function here maybe and connect that to our button 62 00:04:34,100 --> 00:04:37,360 and now here, image picker works a bit differently than the expo one. 63 00:04:37,370 --> 00:04:42,400 Here we call image picker show image picker with options which we can set up, 64 00:04:42,410 --> 00:04:49,550 options are configured as described up here or described in the docs in general and here I will just 65 00:04:49,640 --> 00:04:56,120 grab this entire code here, like this, 66 00:04:56,140 --> 00:04:58,510 copy that into the pick image function, 67 00:04:58,510 --> 00:05:00,450 get rid of this set state call, 68 00:05:00,460 --> 00:05:03,820 we're not in a class based component so that's not something we can do, 69 00:05:04,000 --> 00:05:06,560 instead here in the else block I'll just console log 70 00:05:06,590 --> 00:05:09,960 the response URI which should be the path of the image 71 00:05:10,150 --> 00:05:11,160 which was taken 72 00:05:11,340 --> 00:05:15,940 and then we've got a couple of handlers for different scenarios here and with that, let's see whether that 73 00:05:15,940 --> 00:05:16,330 works. 74 00:05:16,330 --> 00:05:17,440 If we save this, 75 00:05:20,110 --> 00:05:21,550 normally it should rebuild here 76 00:05:21,550 --> 00:05:28,470 but due to our new package installed, I will quit this process and rerun react-native run-android here 77 00:05:28,490 --> 00:05:33,680 now in my terminal integrated into Visual Studio Code and therefore, in this project folder and now this 78 00:05:33,680 --> 00:05:42,270 will bring up this development server again and more importantly, it will then also relaunch the 79 00:05:42,270 --> 00:05:47,750 app on the emulator so that we hopefully can see it there and can test the image picker here. 80 00:05:47,820 --> 00:05:51,060 So let's wait for that to finish, for that build process to finish. 81 00:05:51,060 --> 00:05:58,260 Now here's the app coming up and if I press it, I get this overlay, I can click take photo and nothing 82 00:05:58,260 --> 00:05:59,700 happens. 83 00:05:59,700 --> 00:06:04,290 Reason for that is missing permissions and that's the manual work I meant. We have to go into the Android 84 00:06:04,290 --> 00:06:11,610 folder, there into source, main, AndroidManifest which configures the Android app and there you have to 85 00:06:11,610 --> 00:06:16,770 add a new permission. You can copy this internet permission which you'll always need for the Android 86 00:06:16,770 --> 00:06:22,530 app to communicate to the development server and there you can now add the camera permission 87 00:06:22,530 --> 00:06:29,360 which you need to add for this app to be able to access the device camera, otherwise this is not supported. 88 00:06:29,370 --> 00:06:35,820 So now we can rerun this process, rebuild the application and make sure that we take this new setting 89 00:06:35,820 --> 00:06:39,090 into account and with that, we should now be able to open this. 90 00:06:39,120 --> 00:06:43,070 So again, it's an additional setup which we didn't need to do in the expo world of course. 91 00:06:44,400 --> 00:06:49,180 On iOS by the way, you also need to do something similar whilst this rebuilds. There, 92 00:06:49,200 --> 00:06:57,100 if you go into your RNWithoutExpo file, you find the info.plist file and in that file, 93 00:06:57,490 --> 00:07:02,630 you also need to add an entry to ask for this permission. 94 00:07:07,760 --> 00:07:14,660 You need to add a new key here after an existing key-value pair, the exact position doesn't matter and 95 00:07:14,670 --> 00:07:19,920 you'll find the detailed instructions on the official docs of that package, there under installed doc, 96 00:07:19,920 --> 00:07:25,710 if you click there, you'll find instructions regarding which permissions need to be set for Android, 97 00:07:25,710 --> 00:07:27,100 I also forgot one, 98 00:07:27,150 --> 00:07:32,240 we need to set this external storage permission as well so let me go back to the AndroidManifest, 99 00:07:32,250 --> 00:07:38,380 add this here and now rerun this on Android and for iOS, there 100 00:07:38,410 --> 00:07:43,970 you need to set these keys here. So you copy all of that 101 00:07:47,020 --> 00:07:53,410 and then go back to the info.plist file I showed you here and now you can add these key-value pairs here. 102 00:07:57,460 --> 00:07:58,210 With that, 103 00:07:58,750 --> 00:08:01,750 let's check the app on Android 104 00:08:01,930 --> 00:08:05,860 and if I now click on take photo, now I'm asked for permission here, 105 00:08:05,860 --> 00:08:08,730 this now happens automatically, the package does that for us 106 00:08:08,920 --> 00:08:12,120 and now, the camera opens up. So this now works 107 00:08:12,130 --> 00:08:17,350 but as you saw with a little bit of extra configuration and by following the instructions on the official 108 00:08:17,350 --> 00:08:23,260 docs and every package will have its own instructions there. Some packages don't even support the link 109 00:08:23,260 --> 00:08:23,830 command, 110 00:08:23,860 --> 00:08:25,530 there you need to do even more, 111 00:08:25,560 --> 00:08:31,380 other packages require less work. You have more flexibility but therefore also more duties. 112 00:08:31,390 --> 00:08:37,240 This however is how you can bring third-party packages that tap into native device features to a React 113 00:08:37,240 --> 00:08:40,970 Native only app for your component code which you write, 114 00:08:41,020 --> 00:08:43,630 that's the same code we srote throughout the entire course - 115 00:08:43,630 --> 00:08:49,660 same components, same logic, same way of how you build your app. You can create the same folders, you can 116 00:08:49,660 --> 00:08:52,540 add React navigation, that all doesn't change.