Build Mobile Apps With React Native and Expo
React Native is a mobile app development framework that allows you to build and deploy native mobile apps to both iOS and Android devices. As web developers, leveraging the existing popularity of React can benefit many people who have no experience building mobile apps. Developers only have to maintain one codebase and can quickly get started using existing JavaScript and CSS knowledge. Expo is a framework on top of React Native, which provides even more tools and services that make your development experience similar to the experience of creating web applications.
In this series, we’ll learn how to use tools within the React Native ecosystem to build robust and maintainable mobile apps. We’ll create a simple clone of the Twitter mobile app, along with a Laravel API backend that powers it.
Series episodes
Introduction (3)
Demo and Installation
7m 21sStart building a Twitter clone by exploring a demo and installing Expo. Get your project running smoothly on simulators and physical devices with ease.
React Native Components Overview
20m 15sGet hands-on with key React Native components like View, Text, Button, and FlatList. Learn how to use them effectively to build engaging mobile apps.
React Navigation
19m 17sExplore React Navigation to define mobile app screens. Learn how to use Stack, Tab, and Drawer Navigators for smooth, intuitive navigation in your React apps.
Twitter Clone Screens (5)
Setup Screens for Twitter Clone
18m 54sBuild your Twitter clone by setting up screens with React Navigation. Learn to use Stack, Tab, and Drawer navigators for smooth, authentic app navigation.
Style the Home Screen
25m 53sStyle your React Native home screen with TouchableOpacity and Expo Vector Icons. Learn to create an engaging tweet list with smooth, interactive design techniques.
Style the Single Tweet Screen
15m 34sStyle your app’s single tweet screen with clean, engaging design techniques. Follow along to create a polished, user-friendly interface step-by-step on Laracasts!
Style the Profile Screen
17m 11sStyle your app’s profile screen with a FlatList and a custom header to showcase user details. Follow along for a clean, engaging UI design on Laracasts!
Style the New Tweet Screen
12m 12sStyle the new tweet screen and build a dynamic character counter component to enhance your app’s user experience. Learn step-by-step with Laracasts!
Communication with the Backend (7)
Fetch a List of Tweets From the Backend
19m 42sBuild a Laravel API to serve tweets: create Tweet model, migrations, factories, then use axios to fetch and display them.
Pull to Refresh
6m 2sLearn how to implement Pull-to-Refresh in mobile apps to quickly refresh the current screen with a smooth, user-friendly interaction.
Infinite Scroll
10m 51sImplement infinite scrolling for your tweet list to load more posts on demand, improve performance, and reduce memory usage in mobile apps.
Pull Data for Single Tweet Screen
14m 31sBuild an API endpoint to fetch single-tweet data and wire it into the frontend to populate your tweet detail screen—step-by-step guidance.
Add Tweet Endpoint
16m 35sAdd a 'create tweet' API endpoint, wire it to the frontend, and make new tweets appear instantly on the tweet list.
User Profile Endpoint
15m 11sCreate a user profile API endpoint and connect it to your React Native app, following a step-by-step guide to fetch and display profile data.
User Profile Tweets Endpoint
21m 57sAdd an endpoint to fetch a user's tweets, wire it to the profile screen, and refactor shared tweet presentation.
Authentication (4)
Client Authentication Setup
24m 37sBuild client authentication: set up auth screens, create a global User state with React Context, and prepare the initial login screen.
Server Setup and Communication
28m 13sSet up Laravel Sanctum token auth for React Native, persist tokens with Expo SecureStore, and load correct screens on launch.
Styling the Auth Screens
10m 52sStyle Login and Register screens for a polished, user-friendly auth experience with practical tips to improve UI and UX.
Register Screen
11m 48sAdd user registration by creating a backend endpoint and connecting it to your mobile app. Complete your authentication setup with this easy guide! (157 characters)
Additional Features (3)
Show Following Tweets
17m 18sFilter tweets to show only those from followed users by adding Laravel logic, using factories for data, and updating your app’s front-end display. (157 characters)
How to Follow/Unfollow Users
18m 56sEnable users to follow and unfollow others by adding Laravel model logic, API endpoints, and mobile app integration in this step-by-step tutorial. (157 characters)
Delete Tweets
16m 44sAdd tweet deletion to your app with a sleek slide-out menu and backend endpoint. Learn how to seamlessly integrate this feature step-by-step! (156 characters)
Wrapping Up (2)
Refactoring Routes
20m 18sRefactor your backend routes using resourceful controllers for cleaner, organized code that’s easier to maintain and scale. Learn best practices here! (156 characters)
Conclusion
4m 7sWrap up the series with a clear review of the app you built, key lessons learned, and a concise guide to deploying to mobile app stores.




