Setup & First Steps— React Native Mobile App Development Part 1
This is part 1 in a series of articles about mobile app development with React Native.
In this article, you will learn how to bootstrap your first React Native project. We will cover the options you have and walk through the first steps together.
In case you are wondering why you would want to use React Native in the first place, check out the 0th part of this series, where some alternative technologies for mobile app development are discussed.
Setup. Your Options
There are two ways to go about setting up your first React Native project. The two bootstrapping tools you might want to use are
create-react-native-app (CRNA)/Expo CLI and the
react-native CLI. We will look at both here.
So what’s the difference? Well, CRNA and the Expo CLI used to be two different things, but have been merged into one tool by now. They bootstrap a React Native project with a couple of enticing bells and whistles: A more flexible development tooling and a set of useful native components.
CRNA / Expo
The team at Expo tries to streamline the React Native development process by providing a set of really convenient tools. If you want to take advantage of what they offer, you can start by bootstrapping a new React Native project with the Expo CLI. Expo abstracts away all of the native code that is part of a React Native project. This has some significant implications:
- Your project folder will not contain any native code and any app configuration is done through an expo-specific config file.
- Since you don’t manage your app’s native code yourself, you can’t link native modules that you wrote yourself or that the community provides. This means that as soon as you want to do something, that Expo does not support, you are pretty much out of luck.
You have to decide for yourself, whether you want to take advantage of the Expo ecosystem or not. If you did set up your project using the Expo CLI and change your mind later on, you can easily opt out using
expo eject, which generates iOS and Android projects for you.
Install the Expo CLI with
npm i -g expo-cli and bootstrap your app using the following command:
> expo init -t blank myrnapp-expo
[14:48:41] Extracting project files...
[14:48:49] Customizing project...
Your project is ready at /Users/peter/myrnapp-expo
To get started, you can type:
Let’s take a look at what that command leaves us with:
App.js app.json assets node_modules package.json
Expo-specific is the
app.json file, which contains configuration that is usually contained in the native project files and that Expo passes along. Other than that there is not much to say:
App.js contains your apps’s entry point and from there you can start writing your components (which we will get to in a bit).
To run the project you just bootstrapped, you need to install the Expo app (iOS, Android) on your mobile device. On your computer use
expo start to start the development server and then open the project in the Expo app. Under Android you can conveniently scan a QR code that the Expo CLI presents to you, while iOS users have to manually navigate to
X.X.X.X is the local IP address of your development machine.
Neat. We will look at the code in more detail in just a bit, but first, let us talk about the alternative setup method.
“Native” with `react-native init`
When you want nothing to do with Expo, their tooling and their SDK, you can initialize a traditional-style project that contains all the necessary sources that you need, in order to run an app on Android and iOS. This also means that you need the respective technology stacks available to run an app and test it out. To run on Android you need Android Studio (available for Windows, macOS and Linux) and either and Android device or an Intel CPU to run an emulator (without Intel’s HAXM software the emulator will be unbearingly slow). To test your app on iOS you need a machine with macOS and Xcode installed, and then you run the app either inside a simulator or your iOS device.
Let’s create an app using the React Native CLI. Install the CLI using
npm i -g react-native-cli and then use it to initialize a new project.
> react-native init myrnapp
This will walk you through creating a new React Native project in /Users/peter/myrnapp
Using yarn v1.9.4
yarn add v1.9.4
info No lockfile found.
[1/4] Resolving packages…
[2/4] Fetching packages…
Done in 22.46s.
To run your app on iOS:
— or -
Open ios\myrnapp.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
App.js android app.json index.js ios node_modules package.json yarn.lock
To get this running on your device requires slightly more work compared to the Expo variant: Open the project on Xcode or Android Studio (depending on your target device). You can launch the app in an emulator, but running it on a device is much more exciting and useful. For iOS you need to set up code signing with Xcode first — if you have not done that before, you may want to consult Apple’s documentation.
Code. At last
Let’s finally look at the actual code that we start out with after having our project bootstrap by one of the two tools.
For those of you who are familiar with React, the code will already make sense. If you have never seen React code, this might look a bit weird, but you will quickly get used to this syntax and structure.
The code above imports some basics from the
React.Component and contains a
render method. As in React.js, every component needs to have a
render method — you can even define you component as just that function, but we will be using classes per default.
render method returns the UI component that is shown to the user. The return value of the
style attribute in the
<View> component above.
Components are composed of other components. In the example above the structure is simple: A
<View> (more or less corresponding to a
<div> in the world of the web) is wrapped around a
<Text> node — only
<Text> components can directly include text in React Native.
Try and change the text, the component shows, and reload the app — if livereload is not already enabled you can fix that in the app’s debug menu that you open up by shaking the device or pressing
CMD+R in the emulator.
App.js file also includes some style definitions that are applied to the
<View>. Just as in HTML, elements/components can be customized using the
Try rendering a different text by adding a
color property to the stylesheet and give it either a hex-value or a color name like
React Native uses the Yoga layout engine to position components on the screen, which works similar to the CSS flexbox model. You will quickly pick up how this works in the related React Native layout documentation.
But I am getting ahead of myself. We work with the code in the coming parts of this series.
In this post you have seen how to bootstrap your first React Native project and run it on your device. You can start writing native apps now, or you can stick around for the next article in which we will build a simple master-detail kind of application.