React Native Food App

Create a reusable home header component in a React Native food app, separating the home page and implementing a row layout with margins and an asset image.

Develop an asset image component in React Native, wired to a data prop and styled with width, height, radius, and resize mode, for use in the home header location text.

Access the user location context and use an asynchronous reverse geocode function with latitude and longitude in a use effect to update address from the first result or a default.

Create a time of day function using date.getHours to return sun, noon, or moon emojis and render it with useState in the app header.

Create a scroll view under a stationary header to display a category list that receives data via props. Use a flat list and category item component with selected state.

Learn to implement a handleSelection function in a React Native food app that toggles item selection, updates category and value state, and applies dynamic border and visual feedback on press.

Correct the selected value state to get the right id, then use location district and category to fetch nearby food from the rest api and prep data for nearby restaurant.

Create a restaurant choices list component in React Native, sourcing data from UI data choices list, rendering a vertical flat list with selectable items that highlight the selected restaurant.

Create a reusable home heading component for the React Native food app that renders heading text with a grid icon in a row and an on press to see all.

Develop a nearby restaurants component using a horizontal flat list fed by the restaurants data, rendering each item with a store component and a text title.

Create a new store component in the components folder for the React Native food app, accepting item and onPress props, wrapped in TouchableOpacity and rendering a network image.

Learn to build a store component in a React Native food app by styling a heading, laying out delivery time and a rating widget, and integrating the stock rating library.

Create and wire a divider component in a React Native food app, styling a gray line with opacity and margins on the page between the restaurant list and the heading.

Create a new foods list component in a React Native food app, render a flat list with imported data, and use a render item function to display each food item.

Build a foods component in React Native that takes item and on press props, renders a touchable ripple card with a network image and title, and shows delivery time.

Create a new fastest near you component, copy everything from the new foods list, rename the home title to fastest near you, and wire data, prioritizing the food page.

Build a food navigator using a native stack navigator to manage the food page and the order page, passing data via use route and initial params.

Learn how to pass data between screens in a React Native stack navigator using route parameters and initial parameters, including extracting the item with useRoute and route.params.

Focus on the food page by managing multiple state variables with useState and useContext, including booleans, arrays, and integers for total price, count, and a preference.

this lecture guides building a react native food app screen with a styled image header and two icon buttons for back and share, using color constants and responsive sizing.

Create a restaurant button in a React Native food app using a touchable opacity with absolute bottom-right positioning, a primary border, and rounded styling to open the restaurant or store.

Change buttons to the primary color for visibility; build a container with a row showing item title and price, compute total price from count, and display description and tags.

Explore implementing a tags FlatList in React Native by wiring data to a FlatList, configuring keyExtractor, enabling horizontal scrolling, and styling tag wrappers and text with colors.primary and border radius.

Build a React Native UI for a food app by rendering an additives section with a title text and a flat list of additives, styled with flex direction and margins.

Create a bounce checkbox component in a React Native food app, display item price with a dollar sign, and style the checkbox with primary color, size, border, and text styles.

Implement a preferences text input in a React Native food app, using a styled input field with a placeholder for instructions and real-time state updates via onChangeText.

Implement a quantity counter in row layout for a React Native food app lecture, using a counter component with increment and decrement logic that enforces a minimum of one.

Develop a React Native cart and orders interface by building a suspended, absolute-positioned view and a responsive cart row with proper flex layouts, widths, and a touchable press handler.

Style the cart button with a 99 border radius, center-aligned content, and a colors.primary background, featuring a white plus icon sized 24.

Style the cart and orders UI in a React Native food app with a primary background button, 30px border radius, centered layout, and a centered count display.

Close the current view and create a new view with left and top margins, then save to render the component. Handle the item price and navigate to the orders page.

Create a handle additives function to add or remove an additive in the state, updating the additives list. Trigger price updates using the additives list with use effect.

Create a const calculatePrice function to sum additive prices using parseFloat, trigger via useEffect on additives, and update the total price.

Create a cut item and an order item, name it Hindu Press, implement a handle press, and design a cart object with product ID, additives, quantity, and total price.

Create an order item object with title, description, image url, restaurant id, quantity, additives, instructions mapped to preference, and price; send to the order page via route params.

Set up a restaurant page in a React Native food app by adding a tab view, creating the restaurant page component, and wiring navigation from nearby restaurants to that page.

Extend a React Native tab view by adding a third restaurant route and create a restaurant component connected to navigation, passing the item as a route parameter.

Copy the back and share buttons and their styles into the restaurant page, then add a rating overlay over the image with a 50px height and rounded corners.

Build a restaurant page row featuring a rating stars component and a navigation button, styled with inner rating and rating button styles in a React Native app.

Create a restaurant rating page in React Native food app by adding a screen in app.js, wiring navigation, and using Google API for distance, time, and price, prioritizing design.

Create a restaurant page in a React Native app, display the restaurant title and details, and calculate distance and time to the user's location using Google APIs.

Learn to calculate distance and time in a React Native food app, handle API key requirements, and wire menu and directions pages via a tab view.

Wrap the app with a restaurant context and use the useContext hook to set and pass the selected restaurant object to the tab view.

Learn to display a Google map in a React Native food app by extracting restaurant coordinates, creating a Google Map View, and rendering markers and directions.

adjust the map for a react native food app by setting full width, halved height, removing margins and borders, and fetch directions using start and destination coordinates in useeffect.

Import marker from React Native Maps and render a current location marker and a restaurant marker using coordinates and encoded polylines. Display polylines from state with a configurable stroke color.

Display the address next to a directions button in a styled flex row with margins. Open the native maps on iOS and Android using coordinates via a touchable press.

Build a menu page with a two-column flatlist showing a restaurant’s foods, wired to restaurant context and navigation, using a food tile component and a styled wrapper.

Demonstrates building a food tile with a row layout using flexDirection, a network image from item.image URL, title, rating, and price, plus styling like background color and border radius.

Create a React Native food tile displaying an image, tags, and a price in a row, with a FlatList of tags and a price badge that navigates to details.

Explore styling a food tile in React Native by applying a left offset, light background, and a small shadow using a spread operator and predefined constants.

Create a login status function with async storage to detect a token, update the login context in app.js, and conditionally show the profile or redirect to login.

Export the back button and profile button from the components index to fix navigation, then wire sign up and login screens in app.js so the profile page requires login.

Hook the cut count context into the cart, initialize its value to zero, and render a dynamic badge on the bottom tab using use context.

Explore building a category food component in a React Native app, pass an item, import the component from all components, and enable navigation to a full page on press.

Rectify the category food component in the React Native food app by correcting image handling from source to data and reusing the component across screens with rest api integration.