There may be special circumstances under which
the Create React Native App that you have
used to scaffold out our React Native Application,
may not meet your specific requirements.
In that case, we can always eject out of
the CRNA environment and then obtain
our React Native App and continue further development using native development.
Now, once you eject from CRNA,
then you will end up with an Android and an iOS parts of an app,
where you can further do Native development.
Let's look at several steps for doing this in this exercise.
So as I mentioned,
there may be circumstances where you need to eject out of the Create React Native App.
Now, here is a documentation of what it means to eject out of CRNA.
A link to which is provided under Additional Resources.
So again, reading from this,
ejecting is the process of setting up your own custom builds for your CRNA app.
Now, this may be required under certain circumstances.
So as you can see, you have given three different reasons for ejecting out of CRNA.
First, when you want to include a library which uses React Native Link.
This is one reason for doing this.
You want to be able to write your own native code to augment your application.
Then, you may wish to build
your own application publishers to the App Store or the Play Store.
So, under all these circumstances,
you need to eject out of CRNA.
Now, ejecting out of CRNA is a one-way process.
Once you eject out,
you can't go back into CRNA anymore.
Now, once you eject out,
you get an app that is very much what you would
create using the standard React Native CLI.
So, at that point,
you need to use either Xcode or Android Studio to continue your development.
In this exercise, we will look at how we can eject out of CRNA.
But since we have already used some of the Expo APIs,
and if you wish to continue to use the Expo APIs,
then you need to eject with a special proviso.
You need to eject out using an ExpoKit.
I will talk about that and we'll see how we can eject
out to continue to use the ExpoKit next.
To eject out of CRNA,
their simple process is to say "npm run eject" or "yarn
run eject" and then you are out of the CRNA environment.
Now, in this exercise,
since we have already used some of the exposed APIs in our project,
we may wish to keep using the Expo APIs.
If you don't wish to use the Expo APIs,
you have two choices.
You can completely remove all the use of Expo APIs from your React Native Application,
and then eject out at the point.
Then you will have to include the corresponding
"npm modules" that provide similar functionality as what you have used from ExpoKit,
and then develop your application.
So, that is one approach that you then take to further doing the development.
In this exercise, I am going to eject out using something called the ExpoKit.
Now, what is ExpoKit?
We'll talk about that in a minute.
The ExpoKit will allow you to continue using
the Expo APIs along with building your own native code.
But if you eject out using the ExpoKit,
then you will require to continue to use the Expo account
and you need to use the Expo Developer Tools for continuing your process.
Now, when you do this ejection using the ExpoKit,
then what happens is that Expo will set up a rudimentary application which
provides the wrapper around the Expo APIs plus the React Native Code.
So, you can still use the React Native bundling that you do with the Expo app
and some of the JavaScript bundle using the Expo server.
But when you eject up with ExpoKit, as I said,
ExpoKit will provide you with
a shell application that it has functionality that is pretty
similar to what is provided by
the Expo client that you have already installed on your device.
But this particular shell application would be your custom shell application.
Now, after this, you can add additional native code to
this custom shell application on your own and then continue the development.
Now, once you eject out with ExpoKit,
you can no longer use the Expo client that you have been using so far.
You have to build your own native application.
The shell that Expo provides for you using
either Xcode or Android Studio for iOS and Android.
We will look at how we build this for Android in this exercise.
Now, what exactly is ExpoKit?
ExpoKit is an Objective-C and a Java library that allows you as mentioned here,
it allows you to use the Expo platform and
your existing Expo project as part of a larger standard native project.
Now, you would resort to doing this only under
circumstances where you realize that Expo doesn't
support a specific access to
a native environment and so you will have
to build your own native library to include that in that case.
So, this our remote circumstances under which you will do that.
But since we are completing this course,
I thought I will introduce you to that part also in this course,
so that you have a complete picture.
But exactly how you build
your native library and include it and so on is beyond the scope of this course.
That is a bit advanced because you need to know how to do
Xcode based iOS development and
Android Studio based Android app development before you can do that part.
That is way beyond what this course can cover.
But I will show you how to eject out into this environment.
If you are already familiar with iOS development to using
Xcode and Android development using Android Studio,
then you can continue further along that process.
So, you will be detaching
your JavaScript Expo project into a JS and Native based ExpoKit project.
Then you will have to adapt to using custom native code with Expokit.
So, once you do this again,
this documentation is also provided in the Expo docs.
So, the first step would be detaching to
Expokit and then this provides you with the details.
Now, I will illustrate this to you from the clear react native App in a short while.
So, here are the documentation on exactly how you go about doing this,
and then you will double up with Expokit.
Now, for all these you would need to have Android Studio installed on your computer.
So, if you have a Windows machine,
or a Mac, or a Linux machine you can continue to do the development using Android Studio.
But if you need to do iOS development using ExCode then you definitely need a Mac.
In this exercise, I'm going to illustrate to you how we can use
Android Studio for continuing with Android development.
Now, to understand how you need to set up your computer
for continuing to do development using Android Studio.
The documentation and instructions on how to set up
Android Studio on your computer is already given in the React Native documentation here.
So, when you go to the Getting Started page,
you need to go to this tab saying Building Projects With Native Code.
Since you have already ejected out from Create React Native App,
you will need to do the steps in the section.
Now, if you are going to do iOS development,
then the only option is to use a Mac.
If you are doing Android development,
for Android you can use a Mac,
a Windows machine or a Linux machine.
So, if you are using a Mac,
now the steps for setting up your computer for doing native development are given here,
you need to install Watchman and also node.
Node we have already installed so that is not an issue for us.
You need to install Watchman on your computer and
then you may need to install React Native CLI.
But that is not needed because we are coming through
to the part of native development from Create React Native App.
So, the next step would be to install the Java Development Kit,
so as you see here.
You need to install the JDK as specified here.
Then after that you, need to set up your Android development environment.
To do that, you need to install Android Studio.
Here are the steps given for installing Android Studio,
you need to install the Android SDK as shown here.
Then after this, you need to install the APIs.
With the Expokit when you reject then you will need to set up or using
Android Studio with at least platform number 23 and so on.
So, you see exactly the setup
that you need to do and also set up some environment variables.
Now again, as I said,
this is not a straightforward thing unless you know what you're doing.
So, that's why I would advocate this to only people
that really want to do native development.
Then you need to prepare an Android device.
You can either use a physical device,
that is exactly what I'm going to demonstrate to you here.
Or you can set up a Emulator or
an Android virtual device as given by the instructions here.
After having done this,
then you will be able to use Android Studio and
then compile and then deploy your application to the device,
which I will illustrate too in a short while.
So, this is the instructions for Mac.
Now for Windows also for Android,
if you go into the Windows for Android,
you will see the set of steps that you need to do to install,
set up again, same kind of things.
You need to install something called Chocolatey,
which allows you to install some native environments here.
Then after that you need to do the Android development environment using Android Studio.
The configuration of Android Studio is very much similar to what I have shown you
for the Mac iOS and follow the steps and set up everything,
and then I will demonstrate to you how you make use of Android Studio.
Now, for Linux also,
correspondingly follow the instructions given here to set up
your computer for doing Android application development.
Once we have completed all those steps,
now it is time for us to eject out of our Create React Native Apps.
So, go to the project in the terminal or command window and at
the prompt type yarn run eject,
or NPM run eject and then eject out of your application.
When you run this,
you will immediately see that you will be given choices on the screen here.
So, it says, eject out using Expokits.
So, this will be the option that will be given to you
because we are using Expo APIs within our application.
So, that's the reason why we would be asked to eject out using this.
Also remember, that ejecting out of CRNA is a permanent one-way process,
and once you reject out you can't go back to what you have in the previous step.
So, do it only if you are sure you want to do it.
Now in this exercise,
I'm going to illustrate how to do it so that's why I will
have no choice but to eject on the spot.
If you don't want to use Expo APIs,
then you can eject out to a regular React Native projects.
So, I'm using the arrow keys to and make choices here.
Now, if I do this for my current project,
it will not work anymore because I am already using Expo APIs in my project.
Now the alternative would be to avoid using Expo APIs,
roll back my project to what I had at the end of
the third assignment and then instead of using Expo APIs,
I will have to take each Native support
for each one of the features that we use from Expo,
install the corresponding NPM modules and then configure them and so on.
Then I then I will not be depending on Expo.
At all, and then I'll be able to eject out like that and then continue the development.
But since I have already used Expo,
I'm going to stay with ExpoKit and then eject out using ExpoKit.
Now once you eject out using ExpoKit,
it'll take some time for it to set up several things for you in your project.
Once it is done,
then you'll be able to continue with further development.
So let me go ahead and eject out.
At that point, it'll ask whether you want to eject out to use an Expo account.
Since we have already set up the Expo account in the previous step,
we can continue to use the same Expo account.
In this case, since you have already set up,
it'll give you this option saying,
"Continue as that particular Expo account."
I'm going to say yes,
because we have already done that,
and we'll just wait for the ejection process to be done.
This is going to take quite some time,
so you need to sit patiently here waiting for it to be completed.