Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using Create React Native App!
You have completed Using Create React Native App!
Preview
Create React Native App has built-in scripts available for running tests and ejecting out of the default configuration.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Earlier you learned that
create-react-native-app has built-in
0:00
scripts available for running tests and
ejecting out of the default configuration.
0:03
So in this video, we'll dive deeper into
the optional commands, test and eject.
0:07
The Jest testing framework works right out
of the box in create-react-native-app.
0:12
Jest is used for writing unit
test on the individual units or
0:17
components of your app to make
sure that they work as intended.
0:20
So if you name your file using
a filename convention like .spec.js,
0:24
or in this case .test.js, or
if you place your test file inside
0:29
a special test folder, Jest will
find those files and run your tests.
0:34
So, for example, app.test.js is a simple
unit test create-react-native sets up for
0:40
us to test if the app component
renders without clashing.
0:44
So back in my terminal,
I'll open a new tab and
0:47
navigate to my myNativeApp folder.
0:53
And running the command npm test,
0:57
runs the Jest test runner
on the tests in my project.
1:00
Looking at the console,
we see a green check mark
1:05
next to renders without crashing and
it let's me know that the test passed.
1:08
Now if I delete a line of code
from app.js, for example,
1:13
an input statement and
run the test runner again.
1:18
It let's me know that the test failed.
1:24
Create-react-native-app does
have a few limitations.
1:28
The main limitation being that you
can't build with custom native code.
1:31
Or have any dependencies
that rely on native code.
1:35
create-react-native-app does not support
loading native modules in your iOS or
1:38
Android apps.
1:42
Your entire app must be
written in JavaScript
1:43
using only React Native components and any
APIs that are available via the Expo app.
1:47
Also when you create a project with
create-react-native-app, you can't change
1:52
anything about your build set up because
all the build settings are pre-configured.
1:56
Everything is managed for you by a single
dependency, React Native scripts.
2:00
So if you need to write
your own native code,
2:06
customize the pre-configured setup to your
liking, or if you have other needs that
2:07
aren't covered by create-react-native-app,
you can use the eject feature.
2:11
Ejecting is the process of setting up
your own custom builds for your app.
2:16
It gives you full control
over your project.
2:21
But be careful with the step because
running eject is a permanent action.
2:24
Once you eject, you can't go back.
2:28
So back in my terminal, I'll stop running
2:30
the server, then type npm run eject.
2:35
Since this is a one way operation,
2:40
the console suggests that you read their
document on ejection before you proceed.
2:42
And this starts the process of ejecting
2:47
from create-react-native-app's
build scripts.
2:50
So in the console, you'll be
asked a couple of questions about
2:52
how you'd like to build your project.
2:55
So first, it asks how you'd like to
eject from create-react-native-app,
2:57
and you have two options,
React Native and ExpoKit.
3:02
So the React Native option will create
a regular React Native project for you.
3:07
If you've ever started a React Native
project in the past using react native
3:12
init in the react native CLI tool,
it's very similar to that.
3:16
But keep in mind that with this option,
if your app uses any Expo APIs,
3:20
you'll need to remove or
replace them before ejecting.
3:24
Now, if you wanna continue using
the Expo APIs, you can eject to ExpoKit,
3:28
which will allow you to build with native
code, and continue using the Expo APIs.
3:35
But if you do eject to ExpoKit, you will
need to create and log in to an Expo
3:40
account and use Expo's developer
tools to run your React Native app.
3:44
Now, for either option, you will need
to make sure that you have an Xcode or
3:49
Android Studio environment configured on
your machine to open and run your app.
3:53
So, I'll go ahead and
eject to a regular React Native project.
3:58
And then it asks, what should your
app appear on a user's home screen?
4:03
I'll type myNativeApp.
4:08
And for what should your Android Studio
and Xcode projects be called?
4:10
I'll leave it as myNativeApp.
4:16
Ejecting moves all the native code and
templates into your project.
4:18
So if you have a look at
your project files now,
4:22
you'll see that it generated and
Android and and iOS folder.
4:24
And if you have a look at
your package.json file,
4:28
you'll see that
the React Native scripts and
4:31
Expo dependencies have been
completely removed from the project.
4:34
So now you can set up your own
custom builds for your app.
4:37
You shouldn't need to use eject
in your projects unless you know
4:41
exactly what you're getting into.
4:45
Create React Native App
included the eject feature for
4:47
customizing a project only
when you're ready for it.
4:51
So remember,
the common reasons you would want to eject
4:53
from create-react-native-app are,
to write custom native code.
4:57
So if you need functionality that you
can only get directly from an Android or
5:01
an iOS API, via Java,
Objective-C or Swift, for example.
5:05
Or to publish your app to
the Google Play Store and iOS App Store.
5:10
When you're done building your app,
5:14
if you need to build the necessary
application packaging formats for
5:16
Android and iOS to publish it to
the Play Store and/or App Store.
5:20
All right, so congrats,
you just learned a new tool
5:25
that will give you a massive head
start when building React Native apps.
5:28
Now, as with most popular
development tools, React Native and
5:32
Create React Native App will
likely be updated frequently, so
5:36
be sure to check the teachers notes for
up to date information about React Native.
5:40
Thanks everyone and happy coding.
5:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up