A Speed Run Intro to React Native for Front End Developers

If you're already familiar with JavaScript, front end development, or React then this speed run intro will get you using React Native code quickly. It's not a full blown tutorial, it won't equip you with everything, but it will get your feet wet and hopefully be the beginnings of you getting into React Native. We'll skip all the cruft and hurdles of setup. We'll cover the basics and get you right into real code as quickly as possible.

What is React Native?

React Native is a way to use JavaScript to build mobile apps for Android and iOS. This means it's cross-platform. It's name highlights it's two important qualities:

1. React

React Native leverages the existing React library. That means you get to apply all the same concepts from React you're used to like components and props.

2. Native

React Native is rendered in truly native code. You might be thinking - "What? How does that work? I thought for mobile apps to be native they need to be written in languages like Kotlin and Swift?" Luckily, React Native is built to use the native APIs of Android and iOS by having your JavaScript communicate with them. This is all done over something known as the "bridge". You can do pretty much all the complicated stuff, maintain most of the performance, and avoid rendering your code in a bunch of WebViews like some other solutions.

Why should I use React Native?

You might poke around online and see a lot of people grumpily dismissing React Native. Or other holy crusaders may say other solutions such as Flutter are the right path. Both sides of this spectrum might be right... in specific contexts. See - I think that good developers pick the right sword for the right task. You wouldn't bring a butter knife to an epic medieval battle. And similarly you wouldn't bring a two-handed claymore to a dinner party. I mean you could - but it's not going to go over well.

That's why you have to understand what advantages React Native offers and make a smart assessment if it makes sense for you.

So what are some of the important pros and cons to consider?

Pros

1. It's JavaScript and React - If you don't know anything about writing mobile applications in languages like Kotlin or Swift, and you already know JavaScript or React, then the quickest path to shipping a mobile application for you is to use what you already know by building with React Native. And because JavaScript is so popular, we can draw on it's existing community and support.

2. It's cross platform - Once upon a time I worked at a company that built an app that had a codebase for the Android version and a codebase for the iOS version. This meant two different teams were building the same features, but in different languages. A lot of the time it meant less knowledge share, and one codebase would often lag behind the other holding up releases. React Native let's you keep all your app developers on the same page while building for both Android and iOS at the same time.

3. It's well supported - Never underestimate the importance of good support. Facebook and a robust community of open source developers work hard to deliver features, squash bugs, and keep the lights on for React Native. It's why big companies can trust it. And why developers know they can use the React Native docs and their Google-fu to get to the bottom of most any problem.

Cons

1. Performance - I would wager that in the overwhelming majority of cases React Native has performance that you can rely on and trust. But in some instances that's not the case. If you're doing some crazy computationally intensive calculations like 3D animations then maybe React Native isn't the right fit.

2. Native code - Sometimes you still just have to get your hands dirty and write native code as a part of your project. Things like push notifications and using the camera aren't always well supported in React Native. This means you'll have to use languages like Kotlin or Swift to get the job done sometimes.

How do I get up and running?

"Okay Tim shut up! I'm reading this article because I'm already interested and you don't need to sell me any further." Got it! Let's get back on track and focus on getting you making stuff with React Native.

Normally we would have to go through a complicated environment install and configuration process. What a pain! That's just going to get in the way of helping you write your first React Native code. So I'll toss some resources toward the end of the article about how to do that. And instead we'll focus on Expo.

Expo

The smart people over at Expo have made it incredibly easy for us to start writing React Native right now in our browser.

Wait what's Expo and why should you trust it? Basically it's a set of tools to help you build React Native. I'll link you more about them later. They're used the official React Native docs too.

Lets start messing around with React Native!

The link above takes us to an Expo snack - basically a boilerplate sandbox - where we can start looking at React Native code and altering it. After opening the link you'll want to observe the project directory on the left hand column. This shows us the basic project structure of our React Native project

We have:

1. The root Project folder.
2. The assets folder where things like png images can live.
3. The components folder where the building blocks of our project live.
4. App.js is the main "brain file" of your React Native app - it's where we're going to focus on so go ahead and click on it and have it open.
5. package.json holds your dependencies (for our purposes we can ignore this).

Diving into the code

Now that you're looking inside of the App.js file take a look at the code. We have some imports for things we need at the top such as React, some components known as Text, View, and a Stylesheet. We have a components being imported called AssetExample and Card. We have our default function App. Inside of App we use our components we just mentioned. And below all this we have our styles which all come from a StyleSheet.

Let's break down what these mean and how it might differ from what you're used to if you're familiar with React.

1. Our App() function is the main brain that represents our App. Everything lives inside of it.
2. React Native doesn't have the same elements used in web development like <Div> and <Span>. Instead we use Core Components. These are things like <Text> and <Image>. Earlier we talked about how React Native is truly native and communicates with the native APIs of either Android or iOS. These core components handle those communications so either platform can display the correct native API despite whatever differences they have on either platform.
3. We don't have to just use Core Components. We can also build and use our own. In this example we see AssetExample is being used. It's imported from './components/AssetExample'.
4. Last we have our styles. We don't use CSS in React Native. Instead we use JSX. Getting started, you won't have to worry about specifying pixels anymore for things like padding. React Native is smart and helps us with sizing across different devices. Your styling could look a tad bit different on different devices depending on each devices pixel density.

That's really the core stuff you need to know about the project. Let's try updating it with a new React Native component - the <FlatList> and some styling changes.

Using a <FlatList>

A <FlatList> is a bit of a more complicated Core Component. It displays a list of items based on a data set you feed into it. We're going to display a few of my favorite foods using a <FlatList>. First off, we'll throw in a data variable called favoriteFoods - which is an array of objects that have an id and a title.

Next, the we need to make the component that represents the individual items that the <FlatList> will display. We'll call it FoodItem. Inside of it is a <View> with a nested <Text> component. We can see that the <Text> will display the "title" passed into it by the <FlatList>.

We can then add the actual <FlatList> inside of our App now. Let's drop it below our <Card> component. The <FlatList> take in a parameter for data (our variable favoriteFoods), a renderItem (which takes an item from our favoriteFoods to render into the list), and a keyExtractor (this is just a necessary piece we should include).

We will then throw in some styling for item and title so that everything looks very pretty.

Here's the final product

That's really it. You've now been messing around with React Native. Pretty simple to get going, right? I'm proud of you.

Where to go from here

So now what? Well you should keep writing more React Native code. Try to ship something. Keep the scope really small and don't go feature crazy. You can do that for the second thing you ship. Don't fall for a million tutorial traps either. You should spend more time writing code, googling around, and reading actual documentation.

Seriously reading the documentation is great. The people who made it are way smarter than me. This post was just to get your feet wet and show you this is something you can definitely do. So here's all the resources - including the ones I mentioned earlier that I would link later in the article. Take the time to read them and they will open up your eyes to the different tools React Native makes available to you.

Resources

The docs are your new best friend.
React Native Docs - Getting Started
You should use Expo for experimentation and quick building.
Get Started with Expo
The React Native CLI is more advanced but at some point you'll have to tackle it instead of just using expo for new projects.
React Native Docs - Setting up the development environment
You can also use an opinionated CLI like Ignite which helps with boilerplate and getting your project setup.
Ignite Repo with instructions

Comments

[sanderdebr]

Cool! Do you think React Native will stay popular in the coming 5 years? I'm doubting what to learn for native app dev.

[Tim Jung 👽]

Yes I do. Not only will it likely grow in popularity - the core fundamental JavaScript skills you develop will remain relevant.

Additionally - 5 years is a long time. 2 years ago I didn't know React Native and did Angular. 4 years ago I was an Android developer. You'll likely pivot to other things but don't let what might happen in 5 years freeze you from picking something and shipping things.

[sanderdebr]

Thanks! I think I'm going to learn it :-)

[Yaşar Anıl Sansak]

Very well written article. Good job! 👏

[Jeroen Nederhoed]

Thank you for sharing, Tim! React Native is on my schedule to master in the next few months. This was the perfect introduction!