Now besides setting up a new project from scratch with React Native CLI or with the expo CLI
and then choosing the bare workflow,
you can even convert a managed project into a React Native bare workflow project
and that's pretty cool because that means you can get all the convenience features of the managed workflow
during development and once you're done for example or once you need a certain third-party package which
integrates some feature you don't have built into expo and you absolutely need, in such a case you can
still switch and you don't have to rebuild the app from scratch and create a brand new project and copy
over your code.
How? Well in your project and this is the native device feature, the great places project we build earlier
in the course where we can add places, where we are of course using the location, maps, the camera, SQLite,
where we are using all these things, there in this project, you can simply run expo eject and
this transforms your project into a non-expo managed workflow project.
Important though, there is no going back,
of course you can copy your folder and make a backup copy and save this or if you're using git, you can
of course go back to an earlier commit but if you haven't saved your project, once you eject it, you
can't transform it back,
so be aware of this.
You would have to create a brand new expo managed project and copy over all your code if you wanted to
go back.
So here if you run expo eject, you should actually be asked to which kind of project you want to eject
and here I got two options in the end. Now the options you see here by the way might differ over time
but here, the two options I have are bare and expo kit. Expo kit is deprecated,
this is basically what we had before we had the bare workflow, so you shouldn't really switch to this,
instead you can switch to bare here which simply means that
now this will be transformed to a React Native project, as if it would be created with the React Native
CLI without the expo wrapper but it will be preconfigured
as mentioned here on the react-native-unimodules page which is it is kind of this package which
expo needs to expose all these expo APIs to a non-expo app. So it will preconfigure all these things
during each action so that you don't have to do that,
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
once this completed, you can choose a name for the home screen and I'll choose great places here for example,
hit enter, now name my Android Studio and Xcode projects rn-guide
but that's up to you and now this will do its job.
It transforms the project,
it adds an Android folder and since I'm on macOS, it also adds an iOS folder. Of course on Windows and
Linux,
it won't do that because there, since you now need to build this locally,
it can't build iOS apps
and it preconfigures everything and installs a couple of dependencies so that you can use your existing
code and all the expo packages you already installed in this bare setup,
so it does not just set up all the unimodules stuff here,
it also makes sure that all the packages you are already using, like expo location or expo SQLite,
that those packages also work. So now this can take a while, so
let's wait for this to finish and here it's done and you see it actually tells me that it generally
did its job but there were two packages which require some manual setup.
You can simply click on these links to get instructions on what you need to do there,
it's the expo image picker and the React Native maps package where you need to do some manual installation
to finish it up.
So here on the expo image picker page,
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
the things
after installing the package. So in the project folder, I'll navigate into iOS and run port install, port
is like npm for iOS, it installs some dependencies which iOS needs to work correctly,
so that's what's happening now and once this is done, we'll also need to add this entry here to the Android
manifest, so that's also something we'll need to do.
So we need to go to the Android folder, the app folder there and in the source folder, the AndroidManifest
and then as described here, add this inside of the application tags.
So here is application and in there, we should add this activity entry here, like this, that's required.
Now whilst I'm already here, you will also see that this manifest file also was set up in a certain
way,
it includes all permissions and of course, you don't want to do that, you only want to ask for the permissions
you really need.
So as it says here, remove any permissions your app doesn't need and for example my demo application
here should only need the access find location permission which I'll move up there
and the camera permission of course which I'll move up there and also the write external storage permission,
that should also be required.
These should actually be all permissions and you can check all third-party packages or all expo API
packages you're using to make sure you're not missing any permissions.
With that, I'll actually comment out all these permissions here and also all these permissions and we'll
test it to see whether that works. So with that, setting up the image picker package is done. Now React Native
maps also needs to be configured and there we can dive into the installation instructions.
Now this npm install command, that already happened
but now what we need to do is we need to run React Native link React Native maps. So let's simply go
up one level back into the root project folder and run React Native link React Native maps and
that will now link everything up,
make sure that everything works correctly, that everything is configured correctly and you will still
need to do some manual stuff, all these things here should not be required,
that should all be done with linking thankfully but on Android, you need to make sure that you add this
entry here,
this metadata entry into your application key in the AndroidManifest.
So here inside of application, we can add this entry and there you need to place your Google Maps API
key.
Now I have that in the env folder
if you remember, so I'll just grab this key and add it here, replace your Google Maps API key here with
it and also important,
if you go to the Google Maps API page, you need to enable this maps SDK for Android for your project,
that's important
otherwise this will not work. For iOS, you don't need to do anything special unless you want to use Google
Maps there, in which case you need to follow the instructions given in the React Native maps
instructions here for how to use Google Maps on iOS
but for Android you definitely need to enable the Google Maps SDK for Android API here. To enable this API,
you can go to the Google Cloud Platform here for the project you worked on earlier when you set up that
API key and so on and then here under APIs and services, you can go to library which takes you to
a library of all the Google APIs and there the maps SDK for Android,
you need to enable this.
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
use here though.
Now it should be enabled here already
but make sure it is. So in case it was not enabled,
definitely do so.
With that, this should also be set up such that it works
and now if we run react-native run-android, the app we built in an earlier module with the expo managed
workflow should now still work, now without the expo managed workflow without the expo client being used
on the simulator or the real device but instead build locally with Android Studio or of course also
with
iOS if you want to use that and therefore in the same way as you would do it in a React Native CLI
created project
but now after ejecting from the managed workflow which of course means all this code was written in
the managed workflow and yet I now run it in the non-managed workflow which is pretty sweet.
So let's wait for this to finish and see whether this app works the way it should.
It's coming up on the Android emulator here which is the emulator I want to use for testing because
there I can use the emulator camera for testing and again, just to emphasize this, this is now not using
the expo client app,
we also couldn't scan a barcode here because there is no barcode to scan,
this is now really an app built with Android Studio and pushed to our app.
So here's our app and now let's try adding a new place here,
test, take an image, allow access to the camera of course
and then take this image
yes crop it,
pick a location on the map maybe,
here's the map coming up, this location looks good to me,
save this, save the place,
here we are
and now let me close this app.
There, you also see that this really is a standalone app installed,
if I open the app drawer here on the device, here on the simulator,
it's this great places app you see here.
So if I launch this, this now relaunches the app we just worked in and there's our place as it was stored
in the local storage,
the image obviously was stored on the filesystem otherwise we wouldn't see it
and it works as before but now not inside of the expo client but as a standalone app without any expo
wrapper,
still using some of the expo APIs and expo packages with the help of this unimodules package which
is automatically added and configured to the bare workflow which we on the other hand got with the help
of ejecting.
So lots of cool things going on there.