The Complete React Native + Hooks Course

Explore how to build a React component in React Native by importing libraries, defining a function that returns JSX, styling with StyleSheet, and exporting for reuse.

Import the new component, wire it into the stack navigator, and set the initial route to display it on the screen. Adjust the font size to control its on-screen appearance.

Review common questions about React Native code, covering primitive elements (text, view, image), JSX basics, React Navigation, and styling with StyleSheet.create and inline styles.

Master the rules of jsx in react native, composing elements like html and wrapping content with view. Use props and curly braces to render variables.

Identify and fix a common JSX return error by ensuring multi-line JSX opens on the same line as return or is wrapped in parentheses, preventing undefined returns.

Practice jsx in a React Native exercise by rendering two text elements with font sizes 45 and 20, printing a name from a JavaScript variable, using a styles object.

Learn to build a React Native component by returning JSX inside a single View with two Text elements, interpolating a name variable, and applying font size styles.

Create a React Native list screen by wiring a ListScreen component into the app navigator, set as the initial route, and use JSX with View, Text, and StyleSheet.

Create a list from an array of records using the FlatList in React Native. Pass the data prop and a renderItem function to render each element with built-in performance optimizations.

Render a flat list by importing FlatList, passing a friends array to data, and using renderItem with item.name to display each name, noting the virtualized list missing keys warning.

Learn why the key property matters in React Native lists, enabling the framework to map data objects to on-screen elements and delete only the removed item, improving update performance.

Explore two ways to assign a unique string key prop in React Native. Use a key extractor with friend.name to derive keys when the function runs.

Explore extending a FlatList with vertical spacing and an optional horizontal layout, wiring up text styles, and hiding the scroll indicator to create clean horizontal lists on iOS and Android.

Restore the FlatList to vertical scrolling, add an age property to each friend in the array, and print each friend's age from the FlatList.

Restore vertical scrolling in React Native list by removing the horizontal prop and showsHorizontalScrollIndicator, then add an age property to each friend and render item.age alongside item.name with Age label.

Explore button types in React Native, including the simple button primitive and the customizable TouchableOpacity, and learn to navigate between home, list, and component screens using press events.

Display a home screen button that navigates to the component screen, using a React Native button with a title and onPress to log presses in the terminal.

Explore how to use TouchableOpacity in React Native to trigger onPress events, provide tap feedback, and contain arbitrary elements—contrast with a styled Button and plan navigation.

Navigate between screens using a stack navigator by accessing the navigation prop and calling navigate with route names, wiring buttons and touchable opacity to predefined routes.

Master navigating between screens by wiring onPress to props.navigation.navigate('list') in React Native, using both TouchableOpacity and Button. Then apply destructuring to pull navigation from props for cleaner, shorter calls.

Build a reusable image list by creating ImageScreen and ImageDetail components, passing props to customize each card, and wire up App.js to navigate from the home screen.

Hook the image screen to the navigator and add a go to image demo button on the home screen, updating the navigate call to Image for seamless navigation.

Create a reusable ImageDetail component in React Native, organize with Screens and Components folders, import it into ImageScreen, and render four ImageDetail instances to demonstrate repetition and upcoming props usage.

Learn how to pass props from a parent to a child in React Native, customizing image detail components with a title prop for forest, beach, and mountain.

Learn to render an image in a React Native image detail component by passing an asset path via a prop from the assets directory using the image source with require.

Add an image source prop to image components and render images with props.imageSource in React Native. Build reusable image details and pass different assets through the prop.

Pass a new prop from the ImageScreen to the ImageDetail, simulate a one-to-ten score for each image, and print it inside the detail’s text element.

Pass a new score prop from the image screen to the image detail, use curly brace expressions to assign scores like 9, 7, and 10, and access them with props.score.

Explore how state tracks changing data inside a component, updating the UI as counters, user input, or fetched blog posts evolve from initial values like 0 or empty string.

Launch a practical state demo by building a simple counter screen in React Native, wiring boilerplate, imports, and a navigator, then add a counter demo button on the home screen.

Learn to implement a counter using React state with useState in a function component, updating via setCounter and attaching on press handlers.

Explore how state initializes in a React component using useState, updates via setter functions, and triggers re-renders, highlighting functional versus class components and state persistence across instances.

Builds an interactive color demo in React Native by tapping Add Color to generate random RGB color boxes, managed with state as an array of color strings.

Create a color screen with a 100x100 view that displays a generated rgb color. Implement a random rgb helper, manage the color in state, and update it on button press.

Introduce a colors state with useState on a color screen, and on button press append a random color using a spread array to a new colors array, triggering a re-render.

Render a dynamic color list in React Native using FlatList by mapping a colors array through renderItem, supplying a keyExtractor, and updating state to re-render and scroll.

Control red, green, and blue with three button sets to build an rgb string that colors a square, while managing three pieces of state.

Create a reusable color counter component in React Native, render it three times with red, blue, and green via props, and explore where to place state for the square screen.

Coordinate shared color state by storing red, green, and blue values in the parent SquareScreen. Pass values via props for reading and callbacks for updating.

Initialize red, green, and blue state values in SquareScreen and pass onIncrease and onDecrease callbacks to ColorCounter so it updates red, green, and blue via setRed, setGreen, and setBlue.

Hook up red, blue, and green state counters with onIncrease and onDecrease, then render a 150x150 view whose rgb background updates from state.

Learn to validate and clamp color state changes between 0 and 255 using a set color function for red, green, and blue, improving readability and maintainability.

Refactor the setColor function into a switch with red, green, and blue cases for clearer logic, add a default case, and update setBlue and setGreen to use setColor.

Explore using a reducer to manage related color state (red, green, blue) in React Native, replacing direct state mutations and returning a new state object for the SquareScreen component.

Refactor the SquareScreen component to use useReducer instead of useState, consolidating red, green, and blue into a state object and implementing a reducer that updates color via an action object.

Launch state management with the useReducer hook, using dispatch to update red, green, and blue colors; learn reducer patterns, action objects, and how state changes trigger re-renders.

Add validation in the reducer to keep red, green, and blue within 0–255 by returning the state when invalid. Refactor to a ternary and ensure dispatch returns state, triggering re-render.

Follow the community convention for reducer actions by using a type and payload to describe changes, update dispatch calls, and adjust reducers accordingly, while noting conventions are optional.

Refactor the CounterScreen to manage state with useReducer, replacing useState, and practice reducer-based state management within a simple React Native hooks exercise.

Refactor the React Native counter from useState to useReducer, define a count state and reducer, and dispatch increment or decrement actions with an optional payload.

Explore managing text input state in React Native by building a live name entry screen that displays the user's input character by character as they type.

Show a text input inside a React Native component and apply styling with a style object to add margin and a border, so the input appears on Android and iOS.

Master two important text input props in React Native: autoCapitalize set to none and autoCorrect set to false, preventing iOS capitalization and unwanted edits for emails and usernames.

Learn to manage text input with state by storing the current text in the parent, passing a value prop, and using an on change text callback to update state.

Use useState to create a name state initialized to an empty string, pass name to the text input's value, and update it with setName via onChangeText.

Add password validation to text screen by changing the label to 'Enter Password' and conditionally rendering an error with a JSX ternary until the input is longer than five characters.

Follow the exercise solution to update the top label to enter password, rename the state to password, and use a JSX ternary to show a length error under four characters.

Explore layout in React Native by mastering the box object model, the flex box system, and the position property, including margins, borders, padding, and intrinsic height and width.

Explore the box object model to position a single element, using padding, border, and margin; apply side-specific and shortcut properties to control spacing, borders, and layout.

Learn the flex box system to control how child elements align inside a single parent view. Set align items to stretch by default, flex-start, center, or flex-end for horizontal layouts.

Explore how flex direction switches children from vertical column to horizontal row, and how align-items shifts with it, including default stretch and options like center, flex-start, and flex-end.

Learn how flexDirection and justifyContent, similar to alignItems, control vertical or horizontal placement of children in a parent view, using options like center, flex-start, flex-end, space-between, and space-around.

Master how flex values allocate space among children in a React Native layout by applying flex on children, setting flex direction, and using align items, justify content, and align self.

Learn how alignSelf overrides a parent's alignItems in React Native flexbox, applying center, flex-start, or flex-end to individual children while adjusting parent alignment.

Explore how the position property works in React Native, using absolute to overlay elements, which ignores siblings while obeying the parent's flexbox rules, including align items of center and stretch.

Explore how top, bottom, left, and right add spacing after layout, shifting elements by 10 units. These properties can cause overlap or escape from a parent's bounds.

Learn how to make a child fill its parent using position absolute with top, bottom, left, and right set to zero, and use the React Native absolute fill object shortcut.

Explore how box model rules, position, and flexbox work together to render elements in React Native, applying border, margin, and padding first, then positioning with top, left, right, bottom.

Practice the layout system by building a three-element left-to-right arrangement, moving a green element to the next line, then apply two techniques—flexbox and margins or padding—while updating view styles.

Replace the three text elements with three views and define styles viewOneStyle, viewTwoStyle, and viewThreeStyle under a parentStyle, then set flexDirection to row and justifyContent to space-between.

Build a restaurant search app in React Native with a top search bar and horizontally scrolling cheap to expensive categories, tapping a restaurant shows a detail page with images.

Build a React Native app from scratch with Expo, then explore the Yelp API to search restaurants, including creating a Yelp app and obtaining the client ID and API key.

Learn to query the Yelp API with a GET request, supplying a search term and location or coordinates, and optionally adjust the result limit to fetch ratings, reviews, and photos.

Master React navigation by using stack, bottom tab, and drawer navigators to move between a search results list and a details screen, including installation and back navigation.

Set up a react navigation stack and app container to render a search screen by default, with a header titled 'business search'. Create a placeholder search screen component for routing.

Design reusable components for the search screen by extracting a restaurant list and a search bar, preparing to fetch data with the Yelp API and handle state and events.

Begin building the search bar by placing a text input and an icon inside a gray rounded container, applying a hex or rgb background, and adding it to the screen.

Show a magnifying glass icon in the search bar using expo vector icons. Import the feather library, render it as a React component, and set the name prop to 'Search' with a size of 30.

Add a text input beside the icon with a search placeholder, align them on a row, and apply flex:1 with a visible border to reveal the input extents.

Enhance the search input styling by using a style object for the icon, increasing its font size and alignSelf, adding horizontal margins, removing borders, and enlarging the input font size.

Learn to manage state across a search screen by using a state variable, passing term and onTermChange to a SearchBar to drive a TextInput.

Demonstrate detecting editing completion by wiring on end editing and on term submit callbacks in the search bar, then trigger a Yelp API search from the search screen.

Configure a pre-configured Axios instance for the Yelp API with a base URL and bearer authorization, enabling reusable network requests. Compare fetch and Axios to decide which to use.

Configure an Axios Yelp instance and implement searchApi to fetch businesses on term submit, updating state with response.data.businesses for display. Use parans to set limit 50 and location San Jose.

Master graceful error handling in a React Native app by wrapping the API request in try/catch, adding errorMessage state, and showing a user-friendly 'something went wrong' notice.

Trigger an initial Yelp API search on startup using a predefined term such as pasta, then avoid repeatedly calling the API on each render to prevent an infinite loop.

Learn to use the useEffect and useState hooks to call searchApi only once on initial render, with an empty dependency array and a default pasta search term.

Extracts Yelp API logic from the search screen into a custom hook stored in a hooks directory as use results.js, encapsulating useEffect, useState, and API calls for reusable search results.

Build a reusable ResultsList component in React Native to display Yelp API results in three identically structured lists, each with a configurable header via a title prop and horizontal scrolling.

Group Yelp results by price using a filter function in the search screen, then pass three price-specific lists (one, two, three dollar signs) to separate results list components.

Implement a horizontal FlatList to render a scrollable list in React Native, using data from results, a keyExtractor that returns result.id, and a renderItem that displays item.name.