React Native Tutorial | Travel App

Run the travel app for the first time with npm start, preview the centered App.js text, and render on iOS simulator or real device via expo, adjusting splash screens.

Load custom fonts with the useFonts hook, track fonts loaded to control splash screen visibility, and map fonts from assets/fonts to regular, medium, bold, light, and extra bold.

Learn how to import and test fonts in a React Native travel app using a callback to load fonts and apply a text style with bold, medium, and extra bold.

Set up navigation in a React Native travel app by importing and wrapping a navigation container, creating a native stack navigator, and configuring onboarding screens with header hidden.

Guides building an onboarding screen in a React Native travel app using a flat list to render slides from an assets folder image array with ids and titles.

Create an onboarding screen using a horizontal flat list of images in React Native, enabling paging, hiding the scroll indicator, and rendering slides with data, keyExtractor, and renderItem.

Create a reusable onboarding slides component in this React Native travel app, including slide and slides.style.js, then pass item data from the onboarding screen to render image and text.

Create an image style object in React Native by rendering a view container, importing the image component, setting the image source from item.image, and styling with a StyleSheet.

Apply image styling in React Native by using resize mode cover to fill the screen, and set image width and height from device dimensions sourced from constants and sizes.

Learn to stack components with absolute positioning to overlay text and buttons on sliding images for a React Native onboarding screen. Create reusable text and button components and adjust margins.

Create a reusable text component in React Native, using a JSX file and a text prop from the parent slides, with a style function that accepts family, size, and color.

Hook a reusable text component into a parent by importing it and passing text, family, size (xl), and color (white) props sourced from the onboarding item title.

Fix the warning and create reusable user interface elements for the travel app. Build a reusable text component and a button with touchable opacity and on press and text props.

Hook the reusable button into the parent view by importing it and wiring onPress, text, and a device width for a half-screen button, with a red background and white text.

Create height spacer and width spacer components in React Native, pass height and width as props, import/export via the components index, and enable navigation on button press.

Learn to manipulate reusable button properties by changing text, background color, border width, and text color, then implement navigation to the next screen and integrate with a bottom navigator.

Learn to access navigation in a child component with useNavigation, set up a bottom tab navigator, and style its tab bar with padding, height, border radius, and absolute positioning.

Create a bottom tab navigation in React Native by building a tab navigator with home, location, chart, and profile screens, set initial route and colors, and export in index.js.

Create a four-tab navigation for the travel app by importing and exporting home, location, charts, and profile screens, then configure tab bar options and icons that switch when focused.

Attach and test the bottom tab navigation in a React Native travel app, mapping screens like location, chat, and profile to icons, wiring navigation in App.js, and resolving component errors.

Wrap the home page in a safe area and create a reusable container style. Use flexbox to build rows and columns with flex direction, align items, and justify content space-between.

Create a reusable row style in React Native by turning the style into a function that accepts a justify content argument, enabling flex-start, flex-end, or space-between values.

Build a header row with a reusable text component for the user name, and add a touchable search icon button using expo vector icons to navigate to the search page.

Learn to navigate to a search page using the navigation prop and on press, create and hook up the search component to the stack navigator, then test in the simulator.

Fix color errors in the travel app by importing colors from themes and updating home.style.js, then navigate from the search page to display a country list and add a title.

Create a reusable places component for the travel app by adding a countries heading, styling text, inserting a height spacer, and building mock data to simulate the rest API.

Learn to render a horizontal virtualized list of countries from a JSON dataset in React Native, using getItemCount, getItem, renderItem, and a keyExtractor with item.id.

Create a country tile in a React Native travel app by styling a right margin, rendering item.country, and wiring import/export and home page integration with touchable opacity.

Build reusable text and image components in a React Native travel app, enabling alignment props, default values, and data passing from a list to render country tiles with network images.

Create a reusable network image component in React Native, accepting a Uri source prop and styling with width, height, radius, and cover, then export and integrate it into country component.

Hook the country tile into the virtualized list by importing the network image, passing the item, and setting width, height, and radius. Add a height spacer to refine spacing.

Navigate between screens using the use navigation hook, pass a country object as a param, and retrieve it on the details page with the use route hook.

Create a recommendations component with a heading, add a height spacer, import reusable text, and wire a feather list icon in a touchable to navigate to the recommendations page.

Implement a horizontal flat list with local recommendation data from a json file, use item.id as the key, and render each item with a simple tile.

Build a reusable tile component in a React Native travel app, using touchable opacity, an image and text from a parent item prop to display title, location, and ratings.

Create a reusable rating component in a React Native travel app using Expo vector icons for a star, rendering a rating prop, and integrating with the reusable tile.

Import places and recommendations into the home screen, wire them into the home layout after the height spacer, and add best photos and best hotels sections with navigation to details.

Create a place details page in a React Native travel app, wire navigation, pass the item id via route params, and use the useRoute hook to fetch and display data.

Build a reusable best hotels component, import styles, text, colors, and icons, add a 30 spacer and cards, and set the header to nearby hotels.

Set up a horizontal flat list to display nearby hotels, configure the data source, import sizes, hide the horizontal scroll indicator, and apply a column gap with a medium size.

Learn how to implement nearby hotels part 2 by connecting mock hotel data to a horizontal flatlist, using item id as key, rendering hotel cards, and testing in the simulator.

Build a hotel card component in React Native that renders an image, title, location, and rating, accepts item and margin props, and is pressable for use in a hotels list.

Create a hotel details page in the React Native travel app, export and import the component, hook it into the stack navigator, and enable navigation to the hotel details screen.

Rectify three warnings by refactoring the reusable tile, fix hotel card alignment, and update imports and navigation across screens like hotel list and app.js in the travel app.

Learn to build a reusable app bar in a React Native travel app by implementing a safe area, a two-icon bar (back and search), and dynamic title styling.

Render a flat list of hotel recommendations on the home page, optimize initial data load, and navigate to place details or the search page via a reusable tile.

Learn to adapt the hotel list in a travel app by updating data sources, keeping consistent keys for reusable tiles, and wiring a dedicated hotel search and navigation to details.

Set up the country details page in the React Native travel app by wrapping content in a safe area and using a scroll view to display country data and images.

Hook up the app bar in a React Native travel app by reusing an app bar, importing country data from JSON, and wiring the image URL and description view.

Build a reusable description text component in React Native, styling it with margins, padding, and font settings, and enabling line control through a prop.

Design a React Native travel app country page featuring a popular destinations heading, reusable styles, and a destinations list with feather icons to navigate to country details.

Learn to build a reusable button for a React Native travel app, customize its size and color, and wire navigation to the hotel search screen with country data.

Build a popular destinations list in a React Native travel app by creating a flat list component, handling data props, disabling nested scroll, and navigating to place details with useNavigation.

Remove the safe area to place the image at the top, adjust the layout with a row and spacers, and implement top left right props for a consistent app bar.

Build a places details page in a React Native travel app by transforming country details into place data, displaying location and popular hotels, and wiring navigation to hotel details.

Transform the hotel details page into a scrollable view, integrate the air bar, and adjust the header. Create a dedicated hotel details styles file with style definitions and color imports.

Hook an overlay on the image by creating a container, styling with padding and margins, and using absolute positioning for a title column that sits atop the image.

Build the hotel detail UI in the travel app by loading hotel data and image, displaying the title column with location and a five-star rating using a reusable text component.

Build a rating and review row in React Native by importing star rating, setting max stars to five, and using a reusable text component for review count with space between.

Build a travel app page in React Native by placing the hotel title, description, and location, and render a map with coordinates using react maps.

Build a hotel map component in a travel app using React Native Maps, rendering a map view with a marker from hotel coordinates (latitude, longitude) and styling.

Add a reviews section to the travel app by creating a header row with a list icon and a flat list of reviews, updating data to include two reviews.

Develop a reviews section with a flat list in react native, rendering a review tile from hotel details data via renderItem and keyExtractor for user names and comments.

Create a review tile in React Native for a travel app by integrating styles, rendering the user image, username, date, rating, and a short three-line review.

Create a hotel details bottom bar in the travel app with a price button and a select rooms action in a space-between row, using padding and a light white background.

Build a search page in the travel app by managing a search key and results with useState, capturing input for backend requests, and rendering a safe-area layout with search container.

Design a search container as a horizontal row with centered content, a blue bordered input with rounded corners, and bind the text input to state.

Create a styled search button for a travel app using React Native, combining touchable opacity, a feather search icon, and a centered flex layout with blue background and white icon.

Demonstrate handling an empty search in a React Native travel app by conditionally rendering an asset image when no results exist and displaying a flat list when data is present.

Render a travel app list using a flat list, configure data and key extraction, display via a reusable tile, and navigate on press to a details page with item id.

Convert a hotel list to a two-column grid of hotel cards using hotel data, then navigate to hotel details on press.

Fix the hotel search UI in a React Native travel app by adjusting grid margins, adding item separators, and implementing a top bar with filter and back navigation.

Display a map with an initial location in a React Native travel app, configure coordinates and region, style the map, and add a marker with a title.