Now I disabled linking here so that I don't have all these warnings and errors regarding code style.
Of course you can adjust your code to follow that style,
that's a personal preference in the end.
Now what I want to do here is I want to show you how you can of course change the code but then also
how we could add a native functionality in such a vanilla React Native app.
So for that, I'll first of all simplify this starting app a lot,
just get rid of all that content here and just add a basic style set up here with flex one, justify content
center and align items center to center my content on the screen.
Get rid of this thing here
and from all these imports here, I want to use the stylesheet, I want to use the view and I want to
use the button because what I want to add is the image picker functionality.
So here I return my view
and my button and on the button, I say take image
and then in onPress, I want to open the image picker.
Now how can we add this?
Now since this is a React Native project without expo in any way, we can't easily use the expo APIs
here.
There actually is a way of using them and I'll come back to that later in this module
but you would need to configure a couple things. So therefore what we can do instead is we can do something
which you will do a lot if you're working with a vanilla React Native app,
we search for React Native image picker for example to find a package that helps us with that,
for example this one, the React Native image picker package
and now we can install this because now we can bring any third-party package, no matter if it adds native
functionalities or not into your app. Previously with expo, this was not really possible, there you could
only bring third-party packages that did not tap into native device features,
now you got no restrictions.
So now we can add this
and here we can install this by following the installation instructions here, so by going back into our
project and in there by running npm install --save and then here it's React Native image picker,
like this. By the way, you can keep this process here running and you should
so that code changes once you save your files are picked up and pushed to your devices.
So let's wait for this installation to finish now.
Now it's done,
took quite a while
and now we need to install this and the good
thing is this package is very easy to install,
you should only need to run this command here -
React Native link, React Native image picker.
So run this in your project,
like this and you should be good.
Now I will say there are third-party packages that take more effort,
it really depends on the package. For expo,
it obviously was very easy, you just ran expo install, that was very fast,
didn't take that long and you didn't need to do anything else.
Here you need to run one extra command
but of course that's also not too bad
but again, I will say not all packages support this command,
some packages require way more manual wire up work, manual work where you then actually need to dive
into the Android and iOS folders to start working on some configuration files there.
That's what the React Native link command did for you, for example on Android if you dive into the app
folder and there, source and then in the source folder into build gradle, you will see that there,
this line was added.
This wasn't there from the beginning,
this was added by the React Native link command
and for some packages you have to add these entries manually,
a lot of packages support the link command and with more recent versions of React Native,
some packages even support autolinking where this linking will be done automatically once installation
finished but not all packages have that support, so that's something to be aware of.
Behind the scenes, a lot of configuration was changed. With that, we can now use this package, again as
instructed in their docs so we can add this import here, here,
then also add the pick image function here maybe and connect that to our button
and now here, image picker works a bit differently than the expo one.
Here we call image picker show image picker with options which we can set up,
options are configured as described up here or described in the docs in general and here I will just
grab this entire code here, like this,
copy that into the pick image function,
get rid of this set state call,
we're not in a class based component so that's not something we can do,
instead here in the else block I'll just console log
the response URI which should be the path of the image
which was taken
and then we've got a couple of handlers for different scenarios here and with that, let's see whether that
works.
If we save this,
normally it should rebuild here
but due to our new package installed, I will quit this process and rerun react-native run-android here
now in my terminal integrated into Visual Studio Code and therefore, in this project folder and now this
will bring up this development server again and more importantly, it will then also relaunch the
app on the emulator so that we hopefully can see it there and can test the image picker here.
So let's wait for that to finish, for that build process to finish.
Now here's the app coming up and if I press it, I get this overlay, I can click take photo and nothing
happens.
Reason for that is missing permissions and that's the manual work I meant. We have to go into the Android
folder, there into source, main, AndroidManifest which configures the Android app and there you have to
add a new permission. You can copy this internet permission which you'll always need for the Android
app to communicate to the development server and there you can now add the camera permission
which you need to add for this app to be able to access the device camera, otherwise this is not supported.
So now we can rerun this process, rebuild the application and make sure that we take this new setting
into account and with that, we should now be able to open this.
So again, it's an additional setup which we didn't need to do in the expo world of course.
On iOS by the way, you also need to do something similar whilst this rebuilds. There,
if you go into your RNWithoutExpo file, you find the info.plist file and in that file,
you also need to add an entry to ask for this permission.
You need to add a new key here after an existing key-value pair, the exact position doesn't matter and
you'll find the detailed instructions on the official docs of that package, there under installed doc,
if you click there, you'll find instructions regarding which permissions need to be set for Android,
I also forgot one,
we need to set this external storage permission as well so let me go back to the AndroidManifest,
add this here and now rerun this on Android and for iOS, there
you need to set these keys here. So you copy all of that
and then go back to the info.plist file I showed you here and now you can add these key-value pairs here.
With that,
let's check the app on Android
and if I now click on take photo, now I'm asked for permission here,
this now happens automatically, the package does that for us
and now, the camera opens up. So this now works
but as you saw with a little bit of extra configuration and by following the instructions on the official
docs and every package will have its own instructions there. Some packages don't even support the link
command,
there you need to do even more,
other packages require less work. You have more flexibility but therefore also more duties.
This however is how you can bring third-party packages that tap into native device features to a React
Native only app for your component code which you write,
that's the same code we srote throughout the entire course -
same components, same logic, same way of how you build your app. You can create the same folders, you can
add React navigation, that all doesn't change.