So what are our alternatives to the managed workflow?
One alternative is to use the React Native CLI,
you can learn about this on the official React Native page
if you visit that, you can simply google for React Native to find it and there if you click on get started,
you actually are greeted with two different ways of getting started and the preselected ways to use the
Expo CLI,
it is the approach we used,
right?
So there is nothing too fancy about this, this gives you a React Native app using expo, it's what we
used in this course.
You can also click however on the React Native CLI quick start
and now here you first of all need to set your system up in a certain way and then you can install a
separate package, the React Native CLI which you now need to create a project and to run it and
so on. Now important, here you'll find the detailed installation instructions for different operating systems
and apps you want to build.
Now be aware that on Windows as it says here, you can't build iOS apps, the same on Linux, you can only
build Android apps there and you'll find installation instructions if you select the specific options.
On macOS you can build
iOS and Android and you also will need to follow through these installation instructions.
Now I'll not do this in detail here because you'll find them all written here of course if you want
to follow along,
in the end you will need to install a couple of packages, not npm packages but system wide packages and
the exact installation process differs regarding on which platform you're running on.
You will need to install Android Studio or Xcode, so Xcode for iOS apps, Android Studio for Android
apps and you need to install that now,
previously it was optional,
I just did it to get a simulator,
now you need it because now these tools will be used to build your app.
Previously that was not required because the expo wrapper basically kind of read our code and hosted
it and you can build a standalone app with expo in the managed workflow as well,
there that will happen in the cloud.
Now that all happens locally, so you will need to install Android Studio and so on and install it with all the
options you find here.
Now you also no matter for which platform you're working, you also need to install the React Native CLI,
you can do this in your normal command prompt or terminal, on Mac or Linux you might need to add sudo
in front of this to get the right permissions and this will now globally install the React Native
CLI,
for that you also need NodeJS installed because this uses npm which is node's package manager,
so make sure you have that as well.
Now with the React Native CLI installed,
we can start creating a project totally without expo and for that I'll create a brand new project and I
selected a folder for that by running react-native init
and now any name of your choice, for example
RNWithoutExpo. For the name, it's important that it's written like this,
no dashes or underscores in there but just one word.
So RNWithoutExpo is the name I'll choose and this will now create a brand new React Native project
using the React Native CLI in this place where you ran this command and it will give you this new
folder which contains this new React Native project.
Now important again,
you now need to have Android Studio and Xcode installed and configured as mentioned in the official
docs here,
otherwise what I'm about to show you will now not work,
you need that installed because now these tools will be leveraged by the React Native CLI to build
and run your app. Also spin up some emulators or simulators, can be the same ones used before in
the course but you need to have those running so that we can see our running React Native app there.
So now let's wait for this setup to finish here and once this is done and this process can take a while,
you can follow the instructions here to in the end run your app. So let me navigate into this newly created
folder here
and run react-native run-ios
for example to run it on the iOS simulator which I got. Now this behind the scenes uses Xcode to
built this app,
it does not use expo anymore, you could uninstall the expo client here, you can uninstall the expo CLI
from your system,
this does not leverage expo at all, it just uses Xcode behind the scenes to build your app,
so this native Apple development tool. So let's await for this build to finish and the first time you build
this,
this takes a bit longer,
subsequent rebuilds will be faster. So let's wait for this to finish.
Now throughout this build process, a new tab will be opened or a new window in your terminal,
keep that process running and also keep the build process running of course,
don't quit this,
so keep both these processes up and running here and now this installs the app on the,
in this case, simulator, if you had a real device connected, it would install it there and it launches
the app there and therefore here,
it actually created a new simulator here for me,
doesn't matter though, it now launches the app here in this simulator. Again for the first launch, this
now downloads the built app on this device basically and you have some nice development features there
too, remote debugging can be enabled, so you've got all these nice features in here as well,
that's not expo exclusive and this first launch will take a bit longer as mentioned.
So let's wait for this download to finish here so that the app does launch and here it's coming up. Now
the exact start screen you're seeing here,
that might differ over time because that's just the starting code you get in the project which we'll
have a look at in a second but this is now the app, a native app without expo otherwise the same, running
on iOS. We can also run it on Android and for that, this process which now finished can be cleared,
the other one should be kept running,
that's your development server that talks to the device and which watches for file changes and pushes new
code to the device,
so what you know from expo, that works here as well. So keep the other process running but now we can
also run react-native run-android to also build the app for Android and leverage that same server to
then also build and push the Android app to the Android emulator and then see that as well.
So let's wait for this to finish,
again this first build will take longer, subsequent reloads will be much faster.
This build process now leverages Android Studio which you also need to have installed and configured
as described in the official docs and therefore this now also of course works totally without expo, it
just uses Android Studio.
Now this also launches the Android app here on my Android emulator but just as before, this initial launch
can take a short while,
now it's connecting to this development server which you therefore here of course
also should keep on running, not only whilst it builds this bundle but all the time so that up on
changes in your files, you get a live rebuild and once this is done, let's see the finished app run on
Android.
Now let's have a look at the code that is responsible for that,
does that now look totally different than what we saw thus far?
For that, I loaded the project here again with Visual Studio Code, so the same set up as before and what
you see looks a bit different but mostly, we have a bunch of different configuration files,
fair enough but that doesn't really change the way we write our code.
Very important, we got an Android and an iOS folder,
we didn't have that before,
those folders and on Windows by the way, Linux you don't have iOS, you only have Android there
but those folders contain the real native app projects which are built with the help of Android Studio
and Xcode and your code gets kind of built into that
you could say, React Native does all that for you, the React Native CLI process but if we have
a look at the concrete code in the app.js file, well that is just what we used in this course,
right? There we have a couple of imports and some additional linking which is showing you some some warnings
here regarding the code style.
These are not actual errors, just that I should use double quotes instead of single quotes,
yes some recommendation I don't care about here but if you have a look at what's getting imported here,
react, save area view, stylesheet, scroll view, view, text -
these are all things we already worked with, so we have the normal components we already worked with
and of course we do because what I said throughout this course, React Native is React Native, expo is a thin
wrapper around it.
We write the same code, we use the same components, they get compiled to native widgets, that all does
not change when we use expo,
the only difference is that with expo, we don't have to set up as much,
the build is a bit faster and adding native modules is super easy, testing on real devices is super easy,
it's simply easier,
we build the app in the same way though and that's something you can see here as well.
Styles are set up in the same way with Stylesheet.create,
that's all just as we did it throughout this course
and that's important for you.
Now one extra thing you'll find here is the index.js file,
we didn't have that in expo, that kind of is the basic configuration file that launches your app you could
say, that makes sure that this app component gets rendered to the screen,
that's something expo did for you in the React Native expo app but other than that, it's really just
the same and you would build an app in the same way.