React Native Masterclass: Build Real Apps (iOS & Android)

Set up the React Native development environment by following the official docs, installing Android Studio or Xcode, and prepare your editor for testing on simulators.

Set up the React Native environment, create a new application with the recommended version, and practice debugging a 0.69 bug by searching errors and checking GitHub issues.

Open the project in Visual Studio Code and explore the default React Native app code, including Android and iOS folders, Node modules, package.json, and essential config files.

Open iOS project workspace in Xcode, run the app on an iOS simulator, and watch the metro bundler convert JavaScript to native code in React Native.

Open Android Studio, select the Android folder of your project, and run the project on an emulator. If a bundle not found error appears, start metro in a separate terminal.

Open the terminal, navigate to the project directory, and run npm run android or npm run ios to build and load the React Native project on Android and iOS simulators.

Learn how JSX merges UI markup with JavaScript logic in a single React Native file, including import/export, the main app component, and onScroll logging.

Create and export two React Native components, chair and table, and learn default and named exports, import them, and wrap the app in a safe area view for proper placement.

Compare functional and class components in React Native and understand rendering through the render method. Learn about pure components, memorization, and when to use state with hooks.

Explain state as data driving rendering in functional and class components. Use useState to toggle a size with on press, updating font size between 14 and 24 in components.

Learn about component lifecycles, from class component patterns to using useEffect in functional components to emulate mount, update, and unmount with dependency arrays.

Discover how to use and destructure props in a React Native component, and apply conditional styling based on a theme prop. See how props enable dynamic text and behavior.

Discover styling in React Native by converting inline styles to a StyleSheet, using StyleSheet.create for efficiency, and applying camelCase properties with point-based numbers; separate long styles for maintainability.

Identify reusable components early by breaking screens into small, separate parts such as headers, inputs, carousels, and bottom bars, and pass data via props to optimize React Native app development.

Structure a React Native project with clear directories: crc source, screens, authenticated app content, and a unified components folder, plus assets, navigation, and optional redux.

Build the splash screen in a React Native app by organizing a splash directory, importing and styling an asset, setting width and height, and centering text before authentication.

Build a reusable React Native button component, compare Pressable and TouchableOpacity, and implement onPress with a dynamic title via props and basic styling.

Centralize color values in a single colors module under utils to avoid hardcoding and speed up updates while using a colors object for blue, white, orange, and gray variants.

Identify reusable components for sign up and sign in screens, including a shared header, input pattern, and checkbox, and export the assets as pngs for the two screens.

Build the sign up header for authentication in a React Native app, create a sign up screen component, handle back press, and style a horizontal header with image and title.

Build a reusable React Native input component with a labeled container, text input, optional icon, styling, placeholders, and a signup demo with name, email, and password.

Learn to implement a password input with an eye toggle in React Native by adding an isPassword prop, managing a visibility state, and switching icons between open and closed eye.

Build a reusable React Native checkbox component with checked and unchecked states, a touchable toggle that shows a check image when checked, and an agree to terms and privacy label.

Learn how to customize a reusable button component by adding a style prop for the container, setting margins and spacing, and applying the new style to flexible layouts.

Build a reusable separator component in React Native with a text prop and two lines, styled in light gray, to divide sections across screens.

Discover how React.memo memoizes components to prevent unnecessary re-renders by comparing next and current props, boosting performance in React Native apps with button and checkbox examples.

Create a Google login component in a React Native app, combining UI and native authentication logic, and configure a Google sign-in library with installation and platform-specific steps.

Learn to implement Google login in a React Native app for iOS and Android, handle the sign-in flow and backend validation, and fix small-screen layouts with a scrollable container.

Store client ids as environment variables using React Native Config to access them in the app, then keep secrets out of git history.

Build and wire a sign-up footer in a React Native screen, adding clickable text with onPress, styling for visibility, and a placeholder navigation action.

Copy the sign-up screen to build a reusable sign-in screen, renaming components, adjusting the header and form, and removing unnecessary checkbox to create an organized, ready-to-use sign-in interface.

Learn to create a public GitHub repository and initialize git in your project, track changes, ignore node_modules and sensitive files, and push code so multiple developers can collaborate.

Stage changes with git add, then commit with a descriptive message. Push to origin on GitHub, with master or main as the default branch, and optionally create a new branch.

Learn to manage code with a git branching system, creating feature and section branches for authentication screens, pushing changes, and opening pull requests for code review.

Explore React navigation in a React Native app with stack and tab navigators, manage screen history, and implement an authentication flow that renders screens based on sign-in state.

Install react navigation native and its dependencies, wrap the app in a navigation container, and set up a stack navigator with splash and sign up screens, preparing color customization.

learn to customize the app navigation theme by defining color properties and a background, and pass them to the navigation container, with guidance from the themes and guides sections.

Learn to navigate between screens in a React Native app by wiring on press handlers, navigating to sign up and sign in, and handling go back and header actions.

Learn to hide the default navigation header in React Native navigation using the native stack, customize per screen options, and manage the initial route name to show different screens.

Fix safe area issues in react native with react-native-safe-area-context, wrap the app in a safe area provider, apply safe area view on screens, and set up home tab navigation.

learn to set up bottom tab navigation in react native by installing the bottom tabs package, creating a tabs component for a stack screen, and customizing headers to match design.

Learn to customize tab design in top navigator by swapping icons per route using screen options, handling focused state for active tabs, and hiding labels with a light grey border.

Build a reusable header component for the home screen in a React Native app, with configurable left and right icons for search, back, and logos, plus a search input toggle.

Learn to build a categories list in React Native using a flat list for rendering. Render each item with an image and title, using renderItem and keyExtractor, with press support.

Learn to build a two-column product list in React Native by creating a product home item component, using a flat list, and adjusting spacing and dimensions.

Filter the product list by category using a selected category state with onPress, and a useEffect to update filtered products; adjust visuals when selected and show the default popular state.

Implement keyword-based search in the React Native app by wiring an input to a keyword state, handling onChangeText, and filtering products by category and case-insensitive title matches.

Design a favorites screen using a React Native flat list, import products from data, render a favorite item with image, title, and price, and refine layout with padding and borders.

Navigate from the product list to a details screen by passing the selected product as route params, then render title, image, and details while guarding against undefined params.

Develop a responsive product details screen in React Native by using a scroll view, a main image sized to device dimensions, and styling for the title, price, and description.

Create a sticky footer in a React Native app that remains fixed at the bottom as content scrolls, with a contact seller button and a bookmark icon.

Learn to add an absolute-positioned back button over an image in a React Native carousel, and wire navigation go back while adjusting margins for a clean header.

Build an image carousel in React Native for product details, using a horizontal flat list with paging and custom pagination to track the active index via content offset and width.

Learn to implement contact seller actions in a React Native app using linking openURL for phone calls and emails with dynamic data on real devices, not simulators.

Build a profile screen in React Native featuring a header with logout, user name and email, reusable list items for settings and my listings, and a bottom new listing button.

Build a settings screen in React Native, create a help center section with external URLs redirects via the Linking API, and wire navigation using a profile stack.

Create an editable personal information section in React Native with a dedicated component, toggle editing via a button, and sync on change text to a controlled input and save action.

Create a new listing screen in a React Native app, add image upload functionality, implement navigation with back support, and connect the screen to the profile flow for listing creation.

Clean up the new listing screen, style the section title, and implement image upload with a touchable opacity plus sign, then install React Native image picker to run the app.

Use the react native image picker with launch image library, await results, update an images state with assets, and render a wrap gallery plus a plus button for uploads.

implement an image deleting option in a React Native app by overlaying a delete icon, updating the image list via filtering, and showing a loading indicator.

Explore building a form with title, price, and description inputs and a category select, using value state and prop spreading to pass extra input props.

Learn how to prevent the keyboard from covering inputs by wrapping your scroll view with a keyboard avoiding view, experimenting with height, padding, and position options for iOS and Android.

Learn to build a custom picker input in React Native by extending an existing input, handling placeholder, options, and a modal for selecting categories.

Finalize the create new listing screen by adding a submit button, adjusting margins, and using a keyboard avoiding view inside a scroll view, then prepare for backend integration.

Adapt the favorite list into the my listings UI with backend integration and conditional rendering of an icon or image, plus navigation and a go back function.