Your First React Native App

A walkthrough of building a simple React Native app with a simple login screen

Matthew Brown
Oct 28 · 6 min read
Image for post
Image for post
Made by the author in Canva

Are you interested in learning to build mobile apps with React Native? Already mastered the web and looking to expand into the mobile apps space? If so then this is the article you are looking for! We will be walking through setting up a simple React Native app with user authentication.

Why React Native?

There are many options for building mobile applications. The benefits of React Native are that you can build a single code base and have an app that runs in both iOS and Android. Another benefit is if you or the development team you work on already has React expertise those skills will transfer to React Native development.

React Native doesn’t just run as a web app in a WebView. It actually runs as a native app and behaves as such. You have the option of using Expo or running bare with React Native. Expo provides some handy tools for building and publishing your app that makes distributing to QA and end-users easier.

However, keep in mind Expo does have some limitations. For example, an app I worked on recently needed to use Auth0, and to use the SSO redirect I had to eject from Expo and run bare to get that working properly. So keep that in mind if you are using Expo for a project. Luckily it is easy to eject at any time.

Create the app

We are going to build a very simple React Native app. Our example will have an authentication screen where a user can log in to an existing account.

Run the following command in a terminal to generate the app so we can start development.

npx react-native init ReactNativeIntro
Image for post
Image for post
Screenshot by the author

This generates an empty project so we are ready to get started. You can now open the project in XCode or Android Studio to run it on a simulator or your own device.

Note: For XCode open ios/ReactNativeIntro.xcworkspace to run the project.

Image for post
Image for post
Screenshot by the author

UI Kitten

To give our app a nice look and provide a color theme and some common components we will install UI Kitten. UI Kitten is a React Native UI library that comes with themes and many UI components. Check out the documentation here.

Image for post
Image for post
Screenshot by the author

To install UI Kitten in our project run the following commands in a terminal within the project directory.

npm i @ui-kitten/components @eva-design/eva react-native-svg// extra step for non-Expo environment - link for iOS
cd ios && pod install

Back in our app code, we will create a component for our home screen. Create a new file Home.js and fill it with the following contents.

And then we will update App.js with the following.

In the entry point for the app, we provide the UI theme we want to use. UI Kitten provides a theme called Eva which we are using in the example. They also offer a Material theme. With UI Kitten you can also configure colors for the theme, but for this example, we will roll with the defaults.

Image for post
Image for post
Screenshot by the author

Mock API

Our app will need to call an API to handle when the user logs in. For this demonstration, we are going to build a mock NodeJS API to accomplish this. Keep in mind this example is in no way intended to be production-ready. We are intentionally keeping this simple for this demonstration.

The idea is that we call the mock API. It checks the user’s login to make sure it is valid. If it is valid then it provides a JWT which the UI will store and provide in a header for all the other API calls in the user’s session.

Let’s create a new NodeJS project and install the dependencies we’ll need to add what we need to the mock API. Run this command in a terminal to get us started.

mkdir auth-mock-api
cd auth-mock-api/
npm init -y
npm install --save express body-parser jsonwebtoken

Create a file named index.js and add the following code.

That should be all we need for the mock login API. Note rather than a database of users we’ve just created a JavaScript object with a few example users. Keep in mind production you’d want to keep your JWT secret in a config file. Also, you would want to hash any passwords you store rather than have them in plain text as we do in the example.

With all that in place, we can run our mock API with the following command in a terminal.

node index.js

Login UI

With our mock API in place, we are now ready to build out the login UI for our app.

First, we will need to create an AuthContext to share the authentication status throughout the app.

Screenshot by the author

We also need to add the AuthContext to App.js. We’ll also create a state variable to hold the access token. If it exists we know the user is logged in. On the flip side if it is missing then we know the user needs to login before continuing into the app.

We will still need to add the login and logout to App.js, but first, we need to create those components.

Next, create a new component. We will call the file Login.js.

Image for post
Image for post
Screenshot by the author

Pretty standard for our login screen. We have inputs for the user’s username and password. We submit those values to our mock API and if we get an access token back in return we set it in AuthContext . If it fails we display the server error message to the user.

We also need a Logout component.

Image for post
Image for post
Screenshot by the author

And then back in App.js we just need to tie it all together.

And that does it. We’ve put the finishing touches on our first React Native app. We can admire our handy work in the screen capture below.

Image for post
Image for post
Screen capture by the author

That does it for our intro to React Native! Be on the lookout for more React Native content coming soon. Thanks for reading!

Medium's largest active publication, followed by +734K people. Follow to join our community.

Matthew Brown

Written by

I am a software architect and lead developer. My passions include software development, anything technology related, and cars.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Matthew Brown

Written by

I am a software architect and lead developer. My passions include software development, anything technology related, and cars.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store