Build Mobile Apps With React Native and Expo

Demo and Installation

Let’s get started by taking a look at a simple Twitter clone that we’ll be building throughout the series. After that, we’ll install Expo and get the default project running on your local simulators as well as any physical devices you may have.

React Native Components Overview

Next up, we’ll play around with some of the common components available in React Native. We take a look at View, Text, Button, TouchableOpacity, Pressable, FlatList components and get familiar with how to use them in a project.

React Navigation

Moving on, we take a look at the popular React Navigation library to define the screens in our mobile app. We take a look at Stack Navigators, Tab Navigators, and Drawer Navigators in the process.

Setup Screens for Twitter Clone

Let’s begin working on our Twitter clone app and start off by laying out our screens using React Navigation. Most of the functionality will be using a Stack Navigator, but we’ll also make use of the Tab Navigator and Drawer Navigator as seen on the official Twitter mobile app.

Style the Home Screen

In this lesson, we’ll practice styling in React Native by styling the Home page that contains our list of tweets. We’ll make use of the TouchableOpacity component as well as the Expo Vector Icons set.

Style the Single Tweet Screen

Let’s continue by styling the second screen of our app: the single tweet screen.

Style the Profile Screen

Let’s continue by styling the third screen of our app: the profile screen. We’ll make use of a FlatList that has a header component for the user’s profile details.

Style the New Tweet Screen

Next, we’ll style the fourth screen of our app: the new tweet screen. We’ll also build a “character counter” component that displays how many characters are left for the tweet they are currently typing.

Fetch a List of Tweets From the Backend

Let’s now begin the backend Laravel API portion of our application, and set up the Tweet model. We’ll add the necessary migrations and factories to set up our fake test data. For the frontend, we’ll install the popular axios library to make AJAX calls to our backend and populate the list of tweets on the main screen.

Pull to Refresh

Next, we’ll implement “Pull to Refresh,” which is a very popular pattern in mobile apps that allows you to refresh the current screen that you are on.

Infinite Scroll

Let’s next implement infinite scrolling for our list of tweets, which allows the user to keep scrolling and receive more tweets from the server. You’ll see this pattern in many mobile apps, so we don’t have to load large amounts of data into memory at once.

Pull Data for Single Tweet Screen

In this episode, we’ll make an API endpoint for pulling data for single tweets. In the frontend, we make use of this endpoint to populate the data for the single tweet screen.

Add Tweet Endpoint

Let’s now add an endpoint that allows users to create new tweets. We’ll wire it up to the frontend and also make sure that the new tweet shows once we return back to the tweet list screen.

User Profile Endpoint

Next, we’ll add an endpoint that allows us to pull user profile information. Just like the other screens, we’ll wire it up to our frontend React Native application.

User Profile Tweets Endpoint

Next, we’ll add an endpoint that allows us to pull a particular user’s tweets. We wire it up to the user profile screen and also make a small refactor that allows us to share some presentation logic with the tweets on the Home screen.

Client Authentication Setup

Let’s move on to the authentication portion of the application, including setting up screens and global state using React Context. We’ll create the global User object that we can share across all screens, and will prepare create the initial login screen.

Server Setup and Communication

On the server, let’s make use of Laravel Sanctum which allows users to login with tokens. We’ll wire this up to our React Native app and persist the token using Expo’s SecureStore. Finally, we ensure that the correct set of screens are loaded when the app is initially launched.

Styling the Auth Screens

Let’s now spend some time styling our Login and Register screens for a nicer user experience.

Register Screen

To finish up the authentication portion of this project, we need to add the ability for users to register for the application. We’ll create an endpoint on the backend and wire it up to our mobile app.

Show Following Tweets

Now that our authentication is in place, we can update the list of tweets to only display tweets from the people we follow. We implement the following logic in Laravel, make use of factories to generate dummy data, and then update the front-end to show the correct information.

How to Follow/Unfollow Users

Let’s next add the ability for users to follow and unfollow other users. We’ll start in Laravel, where we implement this logic in the User model. We’ll then add our API endpoints and then wire everything up in the mobile app.

Delete Tweets

Moving on, we’ll add the ability for users to delete their tweets. We start off by making use of a third-party library that gives us a slide-out menu from the bottom of the screen. We then add the delete tweet endpoint on the back-end and wire everything up on our mobile app.

Refactoring Routes

So far, most of our backend code is written in the routes file. In this episode, we’ll refactor our routes to make use of resourceful controllers for better code organization and future maintainability.

Conclusion

Thanks for making it this far! In this final video, we’ll review what we’ve learned and the app we built throughout the series. We also briefly discuss the process of deploying your application to the mobile app stores. Thanks for coming along and watching!