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
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.
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.
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.
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.
npm init -y
npm install --save express body-parser jsonwebtoken
Create a file named index.js and add the following code.
With all that in place, we can run our mock API with the following command in a terminal.
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.
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.
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
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.
That does it for our intro to React Native! Be on the lookout for more React Native content coming soon. Thanks for reading!