Getting Started With React Native (+ Native Base!)

In 2019, 53% of web traffic worldwide came from mobile users compared to 56.7% coming from desktop users. This pairs with the fact that, thanks to smartphones, online connectivity is increasing in populations with emerging economies, according to Pew Research Center.

It’s clear that not only optimizing web applications for mobile, but knowing how to build mobile applications, is a necessary tool for any developer. So I finally decided to learn React Native and use the technology to build a simple news application.

This is just a guide to getting started but in a future blog, I’ll show you how to continue building your news app! Here’s the final repo:

What is React Native (and how does it compare to React?)?

React Native is an open-source framework for building mobile applications. It uses native components, instead of web components, but it still requires some knowledge of React, like JSX, components, state, and props.

I paired it with Native Base, which provides cross-platform UI components for React Native. To set up, I learned that I had to first update my computer after months of dismissing the little Catalina 10.15.6 reminder, but 45 minutes later I was ready to get started.

How To Set Up Your Development Environment:

It’s a lot faster to use Expo CLI to get started. If you’re familiar with Create-React-App, Expo is the React Native version.

Expo allows you to develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. It comes with a lot of features, which will enable you to access the camera, use location features, setup notifications, and more, rather than having to build those from scratch. You also get to run the Expo client on your mobile device so you can run your projects while you’re developing them.

# install expo
npm install --global expo-cli
# create a new project
expo init news-app

To install Native Base:yarn add native-base --save

To install Expo fonts: expo install expo-font

Alternatively, you can use React Native’s built-in CLI. React Native CLI does require a Mac for iOS development, as it requires Xcode. For Android development, you can use Android Studio on most operating systems.

When you build an app using React Native CLI, it’s considered a ‘pure’ React Native app. It doesn’t come with a lot of the features that Expo does and you’ll need separate build chains for iOS and Android. But some third-party packages require React Native CLI so it’s good to know!

#initialize new project
react-native init news-app
#change to your project's directory
cd news-app

To install Native Base: npm install native-base --save

To install peer dependencies: npm install native-base --save

Getting Started With Native Base Components

Now, you’re all set to begin coding! Native Base has some great components, like stylized headers, footers, tabs, and lists. Here’s what I came up with:

I started with a <Header> component to display the app name, Info Riot. Then I used the <Tabs> component to separate the news feed into a Top Headlines tab and a U.S. Politics tab. I used the <List> component to create a list of news items. And then I finished the screen with a <Footer> component.

Currently, everything above is dummy data, but eventually I want to use the NewsAPI to feed real data into the app.

To look at the tabs more in-depth, you can view my news app on Github here. The tab screen is stored in a screens folder within an src folder and the individual tabs are stored in a folder within that one called tabs.

Getting Started With Styling

React Native also has Stylesheets, which are similar to CSS stylesheets. Stylesheets are stored outside of the render function. They are defined using the create() method.

const styles = StyleSheet.create({
   container: {
     backgroundColor: "#FFF"
    },
   mb: {
     marginTop: 10,
     marginBottom: 15,
    },
   top: {
     textDecorationLine: 'underline',
    }
  });

Above, I’ve set the backgroundColor of a container to white (#FFF). To use that background color, I head to the container component and:

<Container style={styles.container}>
Here you have a container with a white background!
</Container>

I’ll be continuing to build this news app, and sharing breakdowns of all the features as I go, but for now the first screen is complete.