React Native Masterclass

learn to download node.js (lts) on macOS or Windows, install it, and verify the installation by running node -v in a new terminal.

Download Visual Studio Code on macOS or Windows from code.visualstudio.com, then install extensions like Es7 plus React Redux and React Native Snippets and React Native Tools.

Discover git, a distributed version control system with commits and branches, and GitHub for repositories and collaboration on React Native projects. Install git, verify git version, and sign up.

Install Expo and Expo CLI, verify Node, install Expo globally with sudo, create a new project with Expo init, then start with npm start to run on Android and iOS.

Learn to download and install Android Studio on Windows, set up the Android Emulator via the Virtual Device Manager, and test your React Native app on a virtual Android device.

Install android studio on mac, set up the android emulator, and test your react native app on a virtual device. Mac supports android and ios development.

Download and install Xcode on macOS, set up the iOS simulator, and run a React Native app from an expo project on the simulator.

Set up a basic React Native app with expo init, choose a blank app and JavaScript, and run on Android and iOS simulators via the package.json commands.

Master React Native styling by contrasting it with web CSS and using the built-in stylesheet API and style components for scoped, flexbox-based, dynamic, and themed UI.

Build a basic React Native app that displays a heading and a flat list of mock data using FlatList, with items rendered by name and a key extractor using id.

Build an iOS-friendly todo app in React Native using safe area view, a text input, and a button, and manage state with useState to add new todos to the list.

Adjusts to-do app styling by setting the input to 90% and clearing it after adding, while adding edit and delete icons with expo vector icons in a flex row.

Delete a todo item in the list in React Native Masterclass using an on press handler and a lambda that filters the previous state by id to remove the item.

Master React Native by building a cross-platform to-do app that adds, edits, and deletes items, toggling between text and input modes while updating state and UI in real time.

Import the status bar from React Native and set the top margin to status bar current height to place content below notches, ensuring text is visible on Android emulators.

Set up Expo CLI, create a new Expo project, install core dependencies for navigation and state management, and design wireframes with Figma to guide the app.

Design the master project UI for a React Native app, detailing sign-up, login, artist and art pages, bidding and buying, profile updates, and a navigation menu with Figma resources.

Set up a React Native project with Expo for an art gallery app, run on Android or iOS simulators, and update app.js to display art gallery while connecting via Expo.

Explore building a React Native home page layout with a gradient image background, asset management, Expo Google Fonts (Poppins), and gradient buttons.

Fix a font not found error by loading Poppins 500 medium font, handling loaded versus error states, and returning early if loading fails so the font is used when loaded.

Explore the difference between style sheet and styled components in React Native, learn semantic component naming, dynamic styling with props, and theming with CSS-like styling for native components.

Split code into screens and components, create a home screen and style file, install react-navigation native stack, and configure a navigation container and stack navigator for multiple screens.

Summarizes react native masterclass app: a navigation template with one screen split into components, header options set to an empty title and transparent, and plans for typescript, redux, and testing.

Add TypeScript to a React Native project by installing dependencies, extending tsconfig, and converting components to tsx for ready TypeScript development.

Split the home screen into modular components by creating a home screen components folder, extracting a container, and building a screen title component with its style.

Learn to add Redux to a React Native project using Redux Toolkit, set up auth state authenticated, user type, and username across screens with a configured store.

Set up the testing environment by installing jest, expo, and testing library, configuring package scripts, and building a custom render wrapper with redux and navigation providers.

Learn to write tests for home page components in React Native, adding test IDs and validating image container, intro text, login, screen title, and sign up button through unit tests.

Create a sign up page in a React Native app, following the Figma design, with form components, validation, styling, Google and Apple sign up, and tests for the components.

Create a sign up screen and component structure with header, form inputs, checkbox, submit button, and Google/Apple auth buttons, using styled-components/native and React Navigation.

Add Clerk authentication to the Expo app by creating a Clerk app, copying the publishable key, configuring .env and app.config.js, installing @clerk/clerk-expo, and wrapping the app with ClerkProvider.

Configure firebase for a React Native project by creating a firebase project, installing firebase, and setting up a Firestore database with a users collection.

Create a header component for the sign up screen in a React Native app using vector icons, styled wrappers, and a centered title.

Build a sign-up form in React Native with Redux-powered auth types (email, Google, Apple) and style it using styled-components, including focus borders, error text, and a gradient button.

Create a form component with inputs and a create account button, wiring up state, focus handling, and password visibility. Sign up flows connect to Firebase Firestore and Redux for authentication.

Refine the password input, add a terms checkbox, and implement a gradient create account button, plus a six-digit verification code input with auto-focus and backspace handling for clerk signup.

Implement sign up with email and password by validating email, full name, and password, enforcing privacy policy, and handling email verification with Clerk and Firebase user records.

Guard optional signup state by destructuring set active from use sign up, returning early if undefined, then copy native event type by importing from React Native using a TypeScript trick.

Create a redux-backed profile screen to display the signed-in user's email and full name using a safe area view and useSelector, wired into app.js to avoid errors.

Create a wrapper and button components for Google and Apple authentication in a React Native app, and build a use warm up browser hook to speed up Android browser sessions.

Implement Google sign up in a React Native app using Expo web browser, Google authentication flow, Firestore user data, Redux dispatch, and navigation to profile.

Implement an Apple sign-up button, start the OAuth flow with Expo web browser and Clerk, store the new user in Firebase Firestore, and navigate to the profile.

Learn to build a login link in a React Native masterclass, styling a login component with wrappers and a purple sign in link that navigates to the sign in page.

Fix Android notch handling by importing status bar from React Native (not Expo) and using Safe Area View with paddingTop equal to statusBar.currentHeight (pixels), preserving iOS behavior.

Write tests for your sign up screen components to ensure code behaves as expected, catch bugs early, and support refactoring, documentation, collaboration, and long-term maintenance.

Learn to write unit tests for a header component in a React Native masterclass, including wiring a navigation prop, testing back button behavior, and handling font loading with mocks.

Add tests for the login link component, validating navigation prop handling with optional chaining and navigation to sign in screen, and verify fonts: Poppins 300 light and Poppins 400 irregular.

Learn to write and run unit tests for a React Native form component, including test IDs and input validation for email, full name, and password.

In this part of the React Native Masterclass, test the form component end-to-end: fill fields, accept policy, sign up, and navigate to profile, with error and policy alerts.

Write unit tests for the GoogleAuthBtn component in a React Native app, including mocks for Firebase Firestore and alerts, and verify the sign-in flow and error handling.

Remove use navigation and switch to testing utils with navigation and redux wrapper to fix failing renders; require actual react-redux and ensure use dispatch updates, then the test passes.

Learn how to write and mock tests for the AppleAuthBtn component in a React Native masterclass, covering start auth flow, sign up, and error handling.

Create the sign in screen and its component structure in a React Native masterclass. Set up screens, styles, and navigation while building header, form, sign up link, and auth buttons.

Create a header component for the sign in screen, mirroring the sign up header, and wire the login button to navigate to sign in using use navigation.

Create and style a sign in form component in React Native using styled components, including inputs with focus state, a password wrapper, and a sign in button.

Build a sign-in form component with email and password inputs, validation, and a password visibility toggle. Implement the sign-in flow using Redux, Firebase Firestore, and navigation to the profile screen.

Learn to implement a sign-in with Google button in a React Native app, including wrapper styles, the Google auth flow, and storing user data with Redux and Firebase.

Add an Apple authentication button to the React Native sign-in screen. Reuse the existing auth button, switch the type to Apple, and preview the sign-in flow.

Master React Native testing by validating the header component of the sign-in screen: render header with navigation, simulate back button presses, handle font loading, and verify conditional rendering.

Develop and validate the sign in form component with tests, covering invalid email, short password, and successful sign in with navigation and alerts, using test IDs and mocks.

Write and run unit tests for the Apple auth button in a React Native app, mocking auth flows, Firestore data, and navigation to verify success and failure scenarios.

Create and run unit tests for the sign up link component in a React Native app, using render, fireEvent, and navigation mocks to verify text, navigation behavior, and font styles.

Add firebase storage and firestore fields for user profiles, wire Redux to handle bio, Twitter, Instagram, and website, and extend auth flows with profile data.

Rewrite tests to align with current code in the React Native Masterclass, updating Expo fonts, Firebase mocks, and Google auth components, and ensure robust handling of font loading and navigation.

Design and implement the profile screen using styled-components in React Native. Configure container, form wrapper, and two toggle options to switch between view and edit modes with dynamic active states.

Create and style a profile screen header using styled-components/native, including an arrow back icon, a menu icon, and testable icon wrappers, with navigation back support and responsive layout.

Create a profile preview component for the profile screen in a React Native masterclass, featuring a circular avatar, Firebase image fetch, and social media links.

In the React Native Masterclass, style the profile form for editing user data by building an Edit Profile Form with styled components, image upload, text inputs, and a save button.

Create an edit profile form component in React Native, with image upload and social fields, using Expo Image Picker, Firebase, and Redux; part 1 covers imports and state.

Build an edit profile flow in React Native that handles image uploads, validates username and bio, updates user data in Firebase, and dispatches changes to Redux.

Write and run header component tests, render the header with back and menu icons, verify navigation back, toggle the menu open and close, and mock fonts and assets.

Master the profile preview component tests in React Native by validating styling, test IDs, and default profile image, with mocks for expo fonts and firebase storage.

Install react-navigation drawer and react-native reanimated, configure babel, and build a right-side drawer wrapper for the profile screen with a menu screen and drawer content.

Create a React Native side menu component with a styled menu screen, icons, and clickable links, including a logout flow with Clerk auth and Redux resets.

Learn to write and adjust tests for a React Native side menu and header, including mocking fonts and auth, and validating navigation and menu item behavior.

Create a My art screen to display art you created and sold, with a publish form for name, description, and price, and implement fonts, dropdowns, and styled components for navigation.

Create a header component for the art screen using styled components and React Native vector icons, including an arrow back and a menu icon, with navigation through a drawer.

Build a React Native art component to display published and sold artworks using a horizontal scrollable image list, sold overlays, and Quest Real fonts, preparing for a future publish form.

Build an art form screen in a React Native masterclass, implementing styled components for wrappers, image input, labels, text inputs, a publish button, and Poppins fonts with expo image picker.

Build an art upload form in React Native with image input, Firebase storage upload, and a publish flow for name, description, price, and license type.

Fetch art images from Firebase storage in a React Native app using Firestore queries and download URLs, and filter by creator to show owned versus sold art.

Write and test the MyArt component using mocked Firestore and storage, verify font loading, image rendering, sold overlays, and error handling across fetch cycles.

In this React Native Masterclass, learn to write tests for an art form component, cover image upload, input handling, and submission validation with mocked image picker and Firestore.

Create a header for the gallery screen using a styled header component, icon wrappers, back navigation, and a drawer menu, with test IDs and Poppins font setup.

Build an AR component for art using styled-components, fetch art data from Firestore, and load images from Storage to render featured and sold art with overlays.

Build a gallery screen and integrate it into a drawer navigation in a React Native app, styling with native style components, fonts, and a scrollable horizontal image gallery.

Practice building and testing header component in a React Native gallery screen by writing tests with testing utils, mocking expo fonts, and validating header rendering, back navigation, and menu toggle.

Test the art component in a React Native project by wiring navigation, test IDs, image URLs, and mocking Firebase. Verify sold and featured art states and font loading errors.

Create an art screen in a React Native masterclass project, wiring a drawer navigator, styled container, expo fonts, and firebase data fetch to display art details and image URL.

Build and style the art screen header in React Native by creating Art Screen Components, using styled components, and wiring back navigation and a drawer menu with Poppins fonts.

Create a details component for art data using styled components in React Native, displaying image, name, price, description, and creator, with a gradient buy button shown only to non-owners.

Develop and run header component tests for a React Native app, validating back navigation, menu icon toggle, and font load failure using test IDs, mocks, and fire events.

In the React Native Masterclass, this lecture teaches details component tests, using mock data and fonts to verify render and buy button behavior based on the current owner.