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.
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?
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.
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.
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.
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.
"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.
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.
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
- The root Project folder.
- The assets folder where things like png images can live.
- The components folder where the building blocks of our project live.
- 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.
- package.json holds your dependencies (for our purposes we can ignore this).
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.
- Our App() function is the main brain that represents our App. Everything lives inside of it.
- React Native doesn't have the same elements used in web development like
<Span>. Instead we use Core Components. These are things like
<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.
- 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'.
- 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.
<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
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.
That's really it. You've now been messing around with React Native. Pretty simple to get going, right? I'm proud of you.
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.
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