Complete React Native App Developer Course 2024

Download Visual Studio Code and Node.js, then create a new Expo app with npx create-expo-app and start it to view on your phone with Expo Go.

Learn to use an Android simulator with Android Studio to test your React Native app by creating a device with the Play Store and running Expo.

Begin your React Native journey by building a dice-rolling app with Expo and a guided VS Code setup, then run it on Android.

Explore the app.js file in React Native, including imports, Expo status bar, style sheet, text, and view, and how export default function app renders the centered container with styles.

Import components and images, set up the assets folder, rename files to lowercase png, and integrate react and react native. Use pressable dice with require paths in app.js.

Learn to implement dice rolling logic in a React Native app by using useState, computing a random number from 1 to 6, and wiring roll functions for two dice.

Build a React Native layout using views, images, and pressables, apply styles to containers and dice, and implement on press actions for rolling dice.

Explore practical React Native styling by building a professional app appearance using StyleSheet, margins, padding, alignment, flex direction, background color, border radius, and elevation.

Create a simple calculator app to practice inputs and buttons, using a new expo app and running on android with expo start, including reloads when needed.

Learn to add imports for React and React Native, include useState and Pressable, and initialize state variables displayValue, operator, and firstValue for a calculator app.

Develop calculator functionality by implementing handle number input, handle operator input, and handle equal to perform addition, subtraction, multiplication, and division, while enabling clear resets and display updates.

Create a calculator container in React Native by building nested views, applying flex styles, and rendering display text and a multi-button layout.

Create numeric and operator buttons in a React Native calculator app, wiring pressables to number and operator handlers, styling both standard and operator buttons for a cohesive layout.

Add the final calculator buttons in a React Native app, wiring on press handlers for zero, plus, equals, and clear, with styles for button and text.

Develop and apply a complete calculator style system in a React Native app by defining row and button styles, sizing, colors, and elevation to deliver a polished, functional UI.

Review the completed calculator app, demonstrating division, multiplication, addition, and subtraction, with a clear output and professional styling using Pressable buttons.

Create a navigation app with two buttons for the contact us and cart pages, and structure the project with home, contact, and cart screens plus a separate styles file.

Learn to set up stack navigation in a React Native app by importing navigation modules, creating a native stack navigator, and wiring Cart, Contact, and Home screens.

Configure a stack navigator in app.js by wrapping the app in a navigation container, set the initial route to home, and add three screens—home, cart, and contact—with header styling.

Build the home screen of a React Native app using view, text, and pressable components. Wire navigation to contact and cart screens with React Navigation Core.

Create a contact screen in a React Native app, wire navigation to home and cart via pressable elements and navigation, and fix import and style issues.

Create and navigate the cart screen in a React Native app, adding pressable buttons to go home or contact us and wiring navigation with styles.

Style the React Native app by editing styles.js with flex layouts, center alignment, borders, colors, margins, padding, and widths; verify navigation to contact us and the cart.

Explore how to implement a simple navigation app with a home page, contact us, and cart pages, using a stack navigator inside a navigation container.

Build a local save app in React Native with data insertion and persistence across restarts using Expo. Run on Android and verify the saved data loads after reopening.

Create the app components, install async storage and linear gradient, and set up necessary imports (SafeArea, TextInput, Pressable) for a React Native local storage workflow.

Create local storage functionality in a React Native app by building save and view functions that use AsyncStorage to store and retrieve a local data item, with alerts.

Build a React Native interface that uses local storage with async storage, featuring a safe area view, a gradient header, a text input, and save/show value actions.

Apply and refine styling for the React Native app, centering content and text, configuring font sizes, colors, margins, and button styles for a cohesive UI.

Review how a save app persists data across sessions using async storage with setItem and getItem. Learn to use getAllKeys to view all stored keys and apply linear gradient colors.

Learn to build a cloud storage app using Expo and Firebase, including creating, updating, getting data, and deleting data, and setting up a React Native project from scratch.

Configure Firebase imports for a React Native app, initialize the Firebase app with your keys, and export the real time database for use in app.js.

Create, read, update, and delete cloud data in a React Native app using Firebase, with functions targeting users/username and on value reads.

Build the cloud storage app structure with views and inputs. Add placeholders for username and email, on change handlers, and pressable actions for create, update, read data, and delete data.

Apply and refine the app's style by configuring header text size, color, alignment, input text size and margins, and button styles including color, size, border radius, and bold text.

Review how the cloud storage app uses a username as the key to create, update, get data, and delete data in the cloud, with real-time database checks and notifications.

Learn to build a simple login app in react native using email and password, persist user sessions with async storage, and set up firebase authentication with expo.

Create and configure the Firebase API config file, enable email/password authentication, and initialize the app with the Firebase config, async storage, and React Native persistence for secure login.

Set up app.js to render the main screen by importing app main, initializing the app, and exporting the app component, then create the app main login file.

Add all imports to the main app.js, including react native components (text, view, button, text input, activity indicator, pressable) and firebase config, and use useEffect and useState to manage sign-in.

Add login check using useEffect to monitor the user state; initialize user, email, and password with useState; log that the user is logged in and update the user when present.

Implement login, create user, and logout handlers using sign in with email and password, updating the user state with user credentials and handling errors with console logs.

Build the login screen in a React Native app with conditional rendering for logged-out and logged-in states, including email and password inputs, login and create user actions, and user details.

Enhance the React Native app with a style sheet that sets text color, alignment, padding, and styles for buttons, inputs, and the header in green.

Review the login app by creating a user, signing in with email and password, and staying logged in via a Firebase authentication token, then log out and log back in.

Create a simple expo-based react native app that shows a notification on button press and returns data from the notification, after installing expo notifications.

Create imports in app.js for a React Native app, including Pressable, Button, Expo notifications, and hooks: useEffect, useState, and useRef, while using LogBox to ignore notification warnings.

Set up and test sending and receiving notifications in a React Native app using Expo notifications, including a notification handler, a listener, and a scheduled alert with a 3-second trigger.

Design the app structure in React Native by laying out views, text, and a button to send a notification, styling header and data text, and wiring a schedule notification handler.

Style the react native app by adding a blue header with bold 30 px font and a data text with 20 px margins and 15 px font size.

Review the expo-based notifications app by testing the send notifications button, viewing the pop-up, scrolling to view it, and relaunching the app after closing.

Learn how to implement push notification permissions in a React Native app, including async registration, token handling, and Android and iOS variations for publishing.

Launch a simple camera app with Expo, learn to capture photos and flip images after capture, and set up the Expo Camera library and permissions to run on a device.

Import required react native components and expo camera, then create state for has permissions, camera, image, and type to prepare for camera access.

Implement camera functionality in a React Native app by wiring useEffect to request camera permissions and creating a take picture function that captures and stores the image URI.

Build app structure by adding a camera container with views, text, and buttons, plus a flip camera and take picture function with a 1 to 1 ratio and image uri.

Style the camera screen in a React Native app by updating container margins, centering the camera area, enforcing a 1:1 aspect ratio, and fixing the take picture async typo.

Review the camera app, fix minor bugs, and ensure proper async syntax to enable photo capture. Test on a real device since the emulator lacks a camera.