React Native Full Course 2025 | Become a React Native Pro in 4 Hours

Key Concepts

React Native, Expo, AppRide, Cross-Platform Development, Native Components (View, Text, TextInput, ScrollView), Expo Router, File-Based Routing, Root Layout, Stack Navigation, Tab Navigation, Vector Icons, Full-Stack Development, Backend as a Service, Authentication (OAuth), Relational Databases, AppRite SDK, Environment Variables, Route Guards, Keyboard Avoiding View, React Native Paper, Stylesheet, Context API, Providers, Hooks, Database Collections, Database Documents, Database Attributes, Permissions, Real-time Subscriptions, Gesture Handling, Swipeable Components, State Management, Asynchronous Functions, Error Handling, UI Styling, Data Fetching, Data Sorting, Data Filtering, Data Mapping, Component Composition.

React Native Crash Course 2025: Building a Habit Tracker App

Introduction

The video introduces a React Native crash course for 2025, aiming to guide beginners through building a full-stack habit tracker app using React Native, Expo, and AppRide. The course covers UI creation, screen management, state management, backend connectivity, and mobile experience development.

React Native Fundamentals

React Native enables cross-platform app development using JavaScript and React. It allows access to native device features and uses a single codebase for iOS and Android.

Core React Native Components:

• View: A container similar to a div in HTML, used for layout.
• Text: Displays text, similar to a p tag in HTML.
• TextInput: Accepts text input from users, tailored for developer experience.
• ScrollView: Creates scrollable areas when content exceeds screen size.

Expo Framework

Expo simplifies React Native development by providing tools, libraries, and services. It allows instant app preview using the Expo Go app, access to device features, and a fast refresh development environment. Expo is suitable for rapid prototyping and cross-platform app building.

Project Setup

The video demonstrates setting up a React Native project using Expo:

1. Creating the App: Using the command npx create-expo-app . to create a new Expo app in the current directory.
2. Running the App: Using npm run web, npm run ios, or npm run android to run the app on different platforms.
3. Resetting the Project: Using npm run reset project to remove boilerplate code and start with a clean slate.

Expo Router and Navigation

Expo Router facilitates file-based routing. The app directory contains files and folders that define app screens.

• index.tsx: The entry point of the app.
• _layout.tsx (Root Layout): Defines shared UI elements across all routes.
• Creating New Routes: Adding new .tsx files in the app directory automatically creates new screens.
• Navigation: Using the Link component from expo-router to navigate between screens.
• Styling: Applying styles using inline styles or the StyleSheet object from React Native.

Tab Navigation

Tab navigation is implemented using the tabs folder.

1. Creating a Tabs Folder: Creating a folder with parentheses (tabs) to group screens.
2. Adding Screens: Moving existing screens into the tabs folder.
3. Creating a Layout: Adding a _layout.tsx file inside the tabs folder to define the tab navigator.
4. Using the Tabs Component: Importing the Tabs component from expo-router and using Tabs.Screen to define each tab.
5. Customizing Tabs: Using the screenOptions prop to customize tab bar appearance, icons, and colors.
6. Vector Icons: Using the expo-vector-icons library to add icons to the tab bar.

Full-Stack Integration with AppRide

The video integrates the React Native app with AppRide for backend services.

1. Setting up AppRide: Creating an account on AppRide and creating a new project.
2. Installing AppRide SDK: Installing the react-native-appwrite and react-native-url-polyfill packages using npx expo install.
3. Configuring AppRide: Creating an appwrite.ts file to configure the AppRide client.
4. Environment Variables: Using .env files to store API keys and project IDs securely.
5. Creating a Platform: Adding a React Native platform in AppRide settings.
6. Initializing Services: Initializing the account and databases services from AppRide.

Authentication Flow

The video implements an authentication flow using AppRide.

1. Creating an Auth Screen: Creating an auth.tsx file for the sign-in/sign-up screen.
2. Keyboard Avoiding View: Using the KeyboardAvoidingView component to prevent the keyboard from overlapping the form.
3. React Native Paper Components: Using TextInput and Button components from React Native Paper for styling.
4. State Management: Using useState to manage input values and track whether the user is signing in or signing up.
5. Auth Context: Creating an authContext.tsx file to manage authentication state using React's Context API.
6. Auth Provider: Creating an AuthProvider component to wrap the app and provide authentication context.
7. UseAuth Hook: Creating a useAuth hook to access authentication functions and user data.
8. Route Guard: Creating a RouteGuard component to protect routes based on authentication status.
9. Sign-up and Sign-in Functions: Implementing signUp and signIn functions using AppRide's account service.
10. Error Handling: Displaying error messages using the useTheme hook from React Native Paper.

Database Setup

The video sets up a relational database in AppRide.

1. Creating a Database: Creating a new database in AppRide called habitsDB.
2. Creating Collections: Creating two collections: habits and habitCompletions.
3. Defining Attributes: Defining attributes for each collection, such as userId, title, description, streakCount, lastCompleted, createdAt for the habits collection, and habitId, userId, completedAt for the habitCompletions collection.
4. Setting Permissions: Configuring permissions for each collection to control user access.

Adding Habits

The video implements the functionality to add new habits.

1. Creating Add Habit Screen: Creating an addHabit.tsx file for the add habit screen.
2. UI Components: Using TextInput and Button components from React Native Paper.
3. Segmented Buttons: Using segmented buttons to select the frequency of the habit.
4. State Management: Using useState to manage input values and the selected frequency.
5. Handle Submit Function: Implementing a handleSubmit function to create a new habit in the habits collection using AppRide's databases service.
6. Error Handling: Displaying error messages using the useTheme hook from React Native Paper.

Displaying Habits

The video implements the functionality to display habits on the today's habits screen.

1. Fetching Habits: Creating a fetchHabits function to retrieve habits from the habits collection using AppRide's databases service.
2. State Management: Using useState to store the list of habits.
3. UseEffect Hook: Using the useEffect hook to fetch habits when the component mounts.
4. Mapping Habits: Mapping through the list of habits to display each habit in a card.
5. UI Components: Using Surface, Text, and MaterialCommunityIcons components to style the habit cards.
6. Empty State: Displaying a message when there are no habits.
7. ScrollView: Using the ScrollView component to make the list of habits scrollable.

Real-time Updates

The video implements real-time updates using AppRide's client.subscribe function.

1. Subscribing to Events: Subscribing to create, update, and delete events on the habits collection.
2. Fetching Habits on Event: Fetching the list of habits whenever a new event occurs.
3. Cleaning up Subscription: Unsubscribing from the event when the component unmounts to prevent memory leaks.

Gesture Handling and Swipeable Actions

The video implements swipeable actions using the react-native-gesture-handler library.

1. Installing Gesture Handler: Installing the react-native-gesture-handler package using npx expo install.
2. Gesture Handler Root View: Wrapping the app with the GestureHandlerRootView component in the _layout.tsx file.
3. Swipeable Component: Wrapping each habit card with the Swipeable component.
4. Refs: Using useRef to create a list of refs for each swipeable component.
5. Render Left Actions and Render Right Actions: Implementing renderLeftActions and renderRightActions functions to render the actions that appear when the user swipes left or right.
6. OnSwipeableOpen Prop: Using the onSwipeableOpen prop to detect when the user swipes left or right.

Completing Habits

The video implements the functionality to complete habits.

1. Creating Habit Completions Collection: Creating a habitCompletions collection to store completed habits.
2. Handle Complete Habit Function: Implementing a handleCompleteHabit function to create a new document in the habitCompletions collection and update the streakCount and lastCompleted attributes in the habits collection.
3. Preventing Multiple Completions: Preventing the user from completing the same habit multiple times in the same day.
4. Fetching Today's Completions: Creating a fetchTodayCompletions function to retrieve the habits that were completed today.
5. Subscribing to Completions Events: Subscribing to create events on the habitCompletions collection.
6. Styling Completed Habits: Changing the opacity of the habit card to indicate that it has been completed.

Ranking Habits

The video implements the functionality to rank habits based on their streak.

1. Get Streak Data Function: Creating a getStreakData function to calculate the streak, best streak, and total completions for a given habit.
2. Habit Streaks Array: Creating a habitStreaks array by mapping through the list of habits and calling the getStreakData function for each habit.
3. Sorting Habits: Sorting the habitStreaks array based on the best streak.
4. Displaying Ranked Habits: Displaying the top three ranked habits in a table.
5. Styling Ranked Habits: Styling the ranked habits using CSS.

Conclusion

The video concludes by summarizing the key concepts covered in the crash course and encouraging viewers to explore the code repository for best practices and further learning. It also promotes the instructor's React course and encourages viewers to enroll.