Build your first app with React Native

Explore the basics of React Native, a framework for building fully native apps with JavaScript, using components, state, props, and styling.

Learn to use React Native components to build an interface with view and text, using JSX and style props, and run on device with Expo.

Explore the official react native docs to find all components with props and quick examples, copy and paste ready, and learn cross‑platform usage with OS‑independent components.

Navigate the Expo docs to confirm the correct version and use Expo components, then reference the SDK API and try a button-press image picker example.

Learn how props drive React Native components by using the image component with a source prop, applying inline styles or a style sheet to customize text color and weight.

Learn how state in React Native holds data for rendering, initialize it in the constructor, and update it through interactions to dynamically change UI elements and reflect live data.

Install Hyper to run a separate terminal for your React Native workflow, download from the link, install on Windows if needed, and learn frequently used commands in the next video.

Create your first React Native app using the command line in Hyper, exploring navigation, lists, images, texts, and views while setting up Expo.

Create and render a flat list of names using React Native's FlatList, wiring data from state, explaining key extraction for performance, and applying inline or stylesheet styling.

Explore the image component in React Native by converting data to objects with name and image, importing and rendering external images, and styling list items with height, width, and padding.

Learn how to implement pull to refresh in a React Native flatlist by adding a refresh data function, managing refreshing state, and wiring onRefresh to update the list.

Learn to install and use React Navigation to build a multi-screen app with a bottom tab navigator, two screens, and basic styling.

Combine tabs and a flat list to build a styled list view in React Native, applying inline styles and a style sheet to control layout, spacing, borders, and text appearance.

Learn how flex box arranges red, green, and blue views in a component using flex direction and justify content options—row or column, space-between, center, space-around, and space even—to craft layouts.

Build a city weather app in react native from the command line that fetches live temperatures for seven random cities and displays them in a styled flat list with conditions.

Plan and implement a simple react native app flow: select seven random cities, fetch live weather data, render temperatures with color-coded ranges, and establish a reusable folder structure.

Register for the open weather map api, obtain an api key via the confirmation email, review the docs, and read metric temperature, humidity, and weather conditions from the example response.

Install and configure the React Navigation library and set up a stack navigator with the home screen. Check package dependencies match and run the app.

Fetch city weather data from the API, using city and country, parse temperature and weather details, and display celsius temperatures for a React Native app.

Set up a cities array and a randomization function to select seven cities, fetch temperatures and weather data, and display them in a flat list with refresh support.

Develop a React Native feature that fetches temperatures for seven random cities, stores them in state, and displays them in a FlatList with pull-to-refresh and styling adjustments.

Add expo linear gradient to list items, wrap each with touchable highlights, and implement on-press feedback showing weather details such as humidity and conditions, with plans to add emoji indicator.

Create a getEmoji function in a React Native weather app to map weather types (clouds, clear, rain, snow, haze, thunderstorm, mist) to emojis beside the temperature.

Expand the CityWeather app by adding screens and a top navigator, implement a search screen with text input to query the API for matching cities, and show overlays with details.

Switch from a stack navigator to a bottom tab navigator in a React Native app, add and wire home and search screens, and quickly expand with additional screens.

Rewrite the search screen in a React Native app by introducing search state, results, and error messaging, reusing homescreen logic, and wiring API response handling for city lookups.

Add a text input and a search button to the CityWeather app, wire up onChangeText and value props to update state, and implement a city search function with styling adjustments.

Learn how to add custom fonts to a React Native app with Expo, loading fonts from assets and applying a font family like Poppins bold.

Transform the alert box into a full-screen overlay with a custom gradient, close button, and shadow, controlled by React state, positioned absolute, and dynamic text from item descriptions.

Learn how to use the inverted prop on FlatList to show older messages at the top and newest at the bottom, enabling pull to refresh in messaging apps.

Master two debugging approaches for react native errors: inspect error lines and use remote chrome dev tools; then consult docs, Stack Overflow, Expo expert forums, and GitHub issues.

learn to implement React Native stack navigation by configuring a two-screen flow, importing the navigation components, and using navigate to switch between screens.