Explore core React Native components, styling, and state management to build a goal-tracking app. Create a beginner-friendly demo that adds and removes goals using a modal overlay and tappable items.

Explore core React Native components like View and Text, using functional components and hooks, not classes, to build UIs. Style with a JavaScript StyleSheet, translating to native Android and iOS.

Explore core React Native components by using Text for display and View as a container, learn nesting rules and necessary imports, and preview platform-specific button styling with a title prop.

Explore styling in React Native with inline style objects and StyleSheet.create, applying the style prop to text and views, using margins, padding, and borders, with emphasis on reusable styles.

Explore building real layouts in React Native by separating input and list into two views, using a text input and add-goal button, and applying flexbox styling to allocate space.

Explore how React Native flexbox powers layout by using CSS-like properties to position elements in containers, controlling space with flex-direction, justify-content, and align-items for column or row layouts.

Learn to use flexbox in React Native by setting row direction, applying input container styles, and using justify content to space elements, with a text input at 80% width.

Discover how flexbox powers layout in React Native using an Expo app, mastering flex direction, main and cross axes, and how justifyContent with space between, alignItems, and flex distribute space.

Improve the app layout by adjusting padding, centering the input and button, and using flex values to allocate one quarter to the input and three quarters to the goals list.

Learn to handle user interactions in React Native by wiring text input and button events with onChangeText and onPress, and managing input state with useState to add goals.

Manage a dynamic list of course goals in a React Native demo app by using state, updating based on previous state, and rendering with map and unique keys.

Style React Native list items across iOS and Android using a style sheet and wrappers; learn to wrap text in a view to enable consistent rounded corners, padding, and colors.

Learn to make content scrollable in React Native by wrapping a list with ScrollView, controlling height with an outer container, and configuring bouncing and platform-specific props.

Optimize long dynamic lists in React Native by replacing ScrollView with FlatList, enabling lazy rendering and efficient data handling with data, renderItem, and keyExtractor.

Split large React Native components into smaller pieces by creating a components folder and adding goal item and goal input components. Move styles to the goal item component.

Learn to use props in React Native to pass text data to a goal item, import View and Text from React Native, and reproduce the UI with a custom component.

Learn to extract and implement a GoalInput component in React Native, manage input state with useState, lift state via an onAddGoal prop, and bind the TextInput for two-way updates.

Wrap list items in the Pressable component to enable taps, replace legacy Touchable components with Pressable, and pass a deleteGoalHandler via onDeleteItem to trigger item deletion.

Delete items by id in a React Native app using Array.filter on the goals state, and pass the id via bind to the onDeleteItem handler and id prop.

Enhance cross-platform feedback in react native by styling a pressable component: use android_ripple for android, and the style prop as a function to adjust opacity when pressed on iOS.

Open a modal to add a new goal with a button, manage visibility via state, and use the built-in React Native modal with a slide animation.

Style the modal overlay by restructuring the goal input component to close the modal on add or cancel, placing add and cancel buttons in a row beneath the text input.

Close the modal by wiring the add goal and cancel buttons to endaddgoalhandler, updating the app's visibility state to hide the modal after adding a goal or canceling.

Learn how to add an image in React Native using the image component, import from React Native, and link with a require path to assets/images/goal.png placed above the text input.

apply finishing touches to a React Native app by customizing button colors with hex codes, styling text inputs, and setting a global background via expo app.json, plus status bar tweaks.

Explore building a basic React Native app with built-in core components, styling via style sheets, and stateful interactions using onpress, highlighting iOS vs Android behavior and flat list use.

Explore how to debug React Native apps by interpreting error messages, using DevTools and Expo enhancements, and fixing issues in the UI you built.

Learn to read error messages, identify the image source prop issue in React Native, use stack traces to locate the failing GoalInput within App, and consult official documentation.

Log to the console to gain insights into your app's flow. Print values and track execution by adding console log statements in functions and components, with outputs in your terminal.

Debug javascript remotely in react native with expo using terminal shortcuts (a android, i ios, r reload, m dev menu) and inspect network requests and console logs in chrome devtools.

Explore using the React devtools with React Native to inspect the component tree, view props and state, simulate changes, and weigh remote debugging performance considerations.

Explore debugging tools and the official reactnative.dev guides to deepen your understanding of workflows and how to solve errors in React Native apps.

Immerse yourself in React Native fundamentals by building a complete demo app, a number guessing game, using gradients, background images, core components, styling, navigation, and reusable components.

Initialize a brand new Expo project to build a two-screen number guessing game in React Native. Validate 1–99 input, reset, start, log guesses, and end with a game over screen.

Create and organize screens and components folders in a React Native app, building StartGameScreen, GameScreen, and GameOverScreen, and implementing a custom input and button layout.

Create a custom PrimaryButton using react-native View and Text, accept the label via children, export it, integrate into StartGameScreen and App.js, then preview with expo.

Style the input area with a StyleSheet using flex, padding, marginTop, and rounded corners. Implement Android elevation and iOS shadow properties for a cross-platform look, with a plum background.

Style the number input in React Native with height 50, font size 32, yellow bottom border, and bold centered text; limit input to two digits using maxlength={2} with a value.

Configure the text input field by choosing a cross-platform number pad keyboard, adjusting auto capitalization and auto correction, and exploring keyboard type options for iOS and Android.

Turn a view into a button with Pressable and onPress, then style using a two-container approach for a polished look and add Android ripple plus iOS pressed state.

Center the text input in React Native by aligning items, and place the two buttons in a row using separate containers with flex one to equalize their sizes.

Wrap the start screen in a root view and set a shared background color with flex: 1 for a yellow full-screen backdrop. Next, switch to a gradient.

Use expo linear gradient to render a full-screen gradient by installing expo-linear-gradient, importing LinearGradient, replacing the view, and configuring the colors prop with an array of colors.

Apply a background image behind the user interface with React Native's image background component, overlay the gradient, and ensure the image uses resizeMode cover to fit the screen.

Manage user input with useState in React Native, binding TextInput and handling onChangeText; validate nonempty values within 1–99, show alerts, and navigate to the game screen.

Parse the entered string with parseInt, validate with isNaN and a 1–99 range, then show alert 'invalid number' with 'okay' button and reset the input; on success, log 'valid number'.

Switch between start and game screens programmatically in a React Native app using useState to track user input, pass callbacks to StartGameScreen, and render GameScreen when a number is picked.

Build the game screen for a number guessing app in React Native, displaying the opponent's guess, providing higher or lower feedback, and logging rounds with a safe area view.

Learn to respect device screen restrictions using React Native's SafeAreaView by wrapping app content, accommodating notches and status bars with automatic insets and appropriate padding.

Create a reusable title component in React Native to render configurable game screen titles with bold yellow text, centered alignment, and a border with padding across screens, using Title.js.

Manage colors globally in a React Native app by creating a colors constants file with shades like primary500 and accent500, applying them across components for single-point updates.

Learn to generate random numbers between a min and max in a React Native game, excluding a chosen number, and display the device's guess with a reusable number container.

Develop a number-guessing game in React Native by adding plus and minus buttons, wiring onPress handlers, validating hints, and passing userNumber from App.js to GameScreen with alerts for misdirection.

Check game over by comparing the current guess to userNumber inside useEffect, triggering onGameOver to switch to the game over screen, with careful dependency handling.

Improve the game screen visuals by adding a title above the input, wrapping content in a reusable Card, and introducing an instruction text component with cohesive styling.

Position two buttons side by side by switching the container to row and merging styles via style prop. Learn to simulate cascading styles and override defaults with style arrays in React Native.

Learn to upgrade button icons in a React Native app by using expo vector icons, specifically Ionicons md-remove and md-add, with size 24 and color white, and bring own fonts.

Load custom fonts in a React Native app using expo-font and the useFonts hook, initialize them in the app, and show a splash screen with expo-app-loading until fonts are ready.

Design a React Native game over screen with a title, a circle image from assets, and a short summary showing how many rounds were needed to guess the number Y.

Learn to use and style nested text in React Native by wrapping segments in extra text components, applying reusable styles, and adjusting font, weight, and color.

Pass the rounds number, user number, and the on start new game handler to the game over screen, and implement logic to reset game state and start a fresh game.

Log game rounds by maintaining guessRounds initialized with initialGuess and updating it with each newRndNumber, then display the log by mapping rounds to text with unique keys.

Render a FlatList by supplying the data prop from guessRounds and renderItem. Use itemData for the value and keyExtractor for a unique key when items are numbers.

Define and style a GuessLogItem component in React Native, showing round number and guess with a bordered, rounded, colored row, and render it in a scrollable list.

Wrap the FlatList in a container to constrain height and enable scrolling, then compute rounds from guessRounds length and pass it via onGameOver to update the game over screen.

Fine-tune your React Native game by practicing core components, styling, and custom UI components, while learning state, useEffect, and screen navigation, and explore adaptive layouts for portrait and landscape.

Learn to build adaptive React Native interfaces that run on iOS and Android, with platform-specific code and responsive layouts that adjust to different device sizes and orientations.

Use max width and percentage values to create responsive widths in React Native, align items center with flexbox, and apply min and max width (and height) for flexible layouts.

Discover how the react-native dimensions API powers responsive designs by using window width and height to adjust font size, padding, and margins for smaller devices.

Use the Dimensions API to size images by device width, avoiding hard-coded values and aligning width, height, and border radius to fit small and large screens.

Explore how the dimensions API and Expo app.json control screen orientation in a React Native app. Identify issues with rotation, portrait locking, and Android and iOS quirks.

Learn to dynamically adjust layout for orientation changes in React Native using the dimensions API and the useWindowDimensions hook, implementing responsive margins for portrait and landscape on iOS and Android.

Wrap the start screen content in a KeyboardAvoidingView and enclose it in a ScrollView to move inputs above the iOS keyboard, using a screen style to preserve layout.

Learn how to adapt a React Native app for landscape mode using useWindowDimensions and the dimensions API to render width-based responsive layouts that rearrange the number container and buttons.

Use the useWindowDimensions hook and the dimensions API to adapt the game over image to width, height, and orientation, and merge dynamic styles within a scroll view.

Learn to write platform-specific React Native UI using the platform API, platform select, and platform-specific files to tailor Android and iOS styles and colors in one codebase.

Control the status bar appearance in expo apps by importing StatusBar from expo-status-bar and rendering it in the app with a light or dark style.

Explore how to improve navigation between screens in React Native with smoother transitions, forward and backward movement, and animations. Learn stack navigation, drawers, and tabs through small dummy apps.

Explore navigation in React Native by moving between screens with forward and back, tapping to switch views, and combining patterns while building a meals app with dummy data and models.

Build a categories screen in a React Native app using dummy data, render a grid with FlatList, and use a reusable CategoryGridTile component for future navigation.

Learn to display items in a two-column grid using FlatList, style grid tiles with shadows, pressable feedback, platform-specific tweaks, and dynamic background colors from category data.

Learn to implement navigation in a React Native app using React Navigation, wrap the app in a NavigationContainer, and set up a native stack navigator with screens for smooth transitions.

Implement navigation between the meals categories screen and the meals overview screen in React Native using React Navigation, with onPress handlers triggering navigation.

Learn how useNavigation provides access to the navigation object in any component, compare native stack and stack, and understand the navigate method's role.

Pass data between screens by sending categoryId via navigation to the meals overview screen, then extract it from route params or useRoute to load relevant meals.

Extract the category id, build displayedMeals by filtering meals whose categoryIds include it with indexOf, and display them in a Flatlist using a MealItem component, paving the way for navigation.

Learn to build a pressable meal item in React Native by loading web images with a URI, styling with StyleSheet, and displaying duration, complexity, and affordability.

Explore how to customize React Navigation headers and backgrounds by adjusting title, header style, header tint color, and content style using default and screen options.

Learn how to set navigation options dynamically in React Navigation using a function or setOptions, leveraging route and navigation props, useEffect, and useLayoutEffect to update titles.

Learn how to add and configure a meal detail screen in a React Native app, register it in the navigator, and pass the selected meal ID via navigation params.

Build the meal detail screen by displaying an image, the meal title, a reusable MealDetails component with duration, complexity, and affordability from selected meal, and lists for ingredients and steps.

Finish the meal detail screen by building reusable subtitle and list components, applying a React Native StyleSheet-driven layout with scrollable content, themed colors, and responsive image and title styling.

Add interactive header buttons in a React Navigation meal detail screen by configuring header options, using header right, and wiring on press with useLayoutEffect.

Create a reusable icon button component using React Native's Pressable and Ionicons, add it to the header with setOptions, and implement configurable icon, color, press feedback, and Android ripple.

Learn how to add a drawer navigator to a React Native app, configure createDrawerNavigator with welcome and user screens, wrap with NavigationContainer, and use a side drawer for navigation.

Configure the drawer navigator with options, customize headerStyle and headerTintColor, set drawerLabel and drawerIcon, and apply drawerActiveBackgroundColor and drawerStyle via screenOptions.

Learn to implement bottom tabs in a React Native app using the bottom tab navigator, including icons, active tint color, and per-screen styling for iOS and Android.

Learn how to nest navigators in React Navigation by combining a drawer navigator with a stack navigator, add a favorites screen, customize headers, and style with sceneContainerStyle.

Fine-tune the drawer navigator by setting a brown background, customizing active and inactive item colors, and adding screen-specific icons using Ionicons for categories and favorites.

Master core React and React Native concepts, styling, and navigation with React Navigation. Configure Stack, Drawer, and Tabs navigators, pass and extract params, and nest navigators with dynamic headers.

Learn to manage app-wide state in a React Native app by implementing a cross-screen favorites feature using React Context or Redux.

Build an app-wide state with React context by creating a favorites context and a favoritesContextProvider. Wrap the app with the provider in App.js to share favorite IDs.

Manage app-wide state with context using useState to track favorite meal IDs and addFavorite and removeFavorite functions, then expose them via a context provider.

Teach students how to use the created favorites context with useContext in the meal detail screen to toggle a meal's favorite status, updating the star icon and syncing across screens.

Extract the meals list into a reusable component, use the context API to obtain favorite IDs, filter the raw data by those IDs, and render favorites on the favorites screen.

Learn to set up Redux Toolkit and React Redux, install dependencies, create a configured store with reducers, and wrap your app with the Redux provider to manage global state.

Create a favorites slice with Redux Toolkit, defining initial state and reducers addFavorite and removeFavorite, using action payloads to update an ids array, and wiring the reducer into the store.

Learn to manage favorites with redux by using useSelector to read state.favoritemeals.ids and useDispatch to dispatch add favorite and remove favorite actions from the meal detail screen.

Use react-redux's useSelector to read favorite meal IDs from redux state in the FavoritesScreen, replacing context, and enable cross-platform favorites on iOS and Android.

Explore building a favorites feature in a React Native app, using the Context API or Redux Toolkit, and learn to view and toggle favorites across screens.

Build an offline expense tracker by registering, adding, viewing, editing, and deleting expenses across recent and all screens, while managing local and app-wide state with an in-memory data store.

Set up a new expo managed React Native app, create three screens for all expenses, manage expense, and recent expenses, and configure navigation with React Navigation native and bottom tabs.

Configure a navigation system using NavigationContainer with a native stack and a bottom tab navigator, nesting an ExpensesOverview to switch between recent and all expenses, plus a ManageExpense screen.

Style and configure React Native navigators by adding global colors, toggling headers to avoid duplication, and styling the bottom tabs and headers with a shared color palette.

Create a reusable expenses output with a summary and a list, using a shared Expenses Output component split into Expenses Summary and Expenses List, optimized with FlatList for performance.

Model expenses as objects with description, date, and amount; implement total calculation with reduce in ExpensesSummary; pass periodName to ExpensesOutput for AllExpenses and RecentExpenses, and add dummy data.

Create dummy expenses array with id, title, description, amount, and date in a React Native app, and feed it to the expenses summary component for total and last 7 days.

Forward expenses as a prop to the expenses list component and render them with a flatlist, using render expense item to display item.description and a key extractor based on id.

Style and layout the expenses summary with a React Native StyleSheet, creating container, period, and sum styles, applying padding, colors, border radius, and row layout in the expenses screens.

Provide an expense item component in React Native, wrapped in a pressable to open a manage expense overlay for editing or deleting, displaying description, amount, and date.

Learn how to format dates in a React Native expense app by creating a date util with getFormattedDate, correcting getMonth off by one, and ensuring amounts display with two decimals.

Leverage a header plus button to open the manage expense screen and make each expense item pressable, using a reusable IconButton component with Ionicons and header tint color.

Navigate to the manage expense screen by tapping an item using React Navigation's navigate method with useNavigation, and open it from header plus button using a screen options function.

Style the expense management screen in React Native by configuring header colors, modal presentation on iOS, and dynamic titles reflecting add or edit expense, using screen options for consistent defaults.

Learn to support adding and editing expenses in manageexpense by passing an expenseId via route params, deriving isEditing, and dynamically setting the screen title with setOptions using layout effect.

Implement a delete button on the manage expense screen in React Native, using a conditional trash icon button, global styles, and a styled container to handle editing mode and layout.

Create a reusable custom button component in React Native. Use View, Pressable, and Text with onPress and children; enable flat mode and provide press feedback on the manage expense screen.

Close the modal programmatically by calling goBack on cancel, add/update, or delete, then switch from dummy data to app-wide state using context or Redux for expense management.

Explore building an expenses context with the React context API and useReducer, defining add, delete, and update actions, and wiring up an expenses context provider for immutable state management.

Learn to expose expenses data and actions via ExpensesContextProvider and consume them with useContext in AllExpenses and RecentExpenses, including last seven days filtering with getDateMinusDays.

Trigger delete expense via the expenses context and confirm handler, and update the total automatically while adding or updating expenses according to mode using dummy data.

Apply finishing touches to a React Native expense app by conditionally rendering expense lists or fallback text, styling info text, and configuring the status bar for a polished UI.

Explore adding or editing expenses screens by handling input with TextInput, configuring validation, and showing inline feedback. Embrace a component-based approach to split the UI into reusable input components.

Develop a custom input component for a multi-field expense form by creating ExpenseForm and Input modules, adding labeled text inputs, and forwarding a textInputConfig to configure TextInput.

Configure a custom input component in an expense form, wiring amount, date, and description inputs via JSX and text input props, including placeholder, maxLength, onChangeText, and keyboard type decimal pad.

Explore configuring React Native text inputs by enabling multiline input, selecting keyboard options, and tuning autoCorrect and autoCapitalize to balance accuracy and user experience.

Style inputs in a React Native app by defining inputContainer, label, and input styles with margins, padding, rounded borders, and textAlignVertical top for multiline inputs.

Configure the expense form layout by placing date and amount in a row using flex direction, stack the description below, and add top margin and title with configurable input styles.

Consolidate input state into a single inputValues object in React Native. Use a generic inputChangedHandler with an inputIdentifier and bind for two-way updates of amount, date, and description.

Manage form state and submission inside the ExpenseForm component, wire onSubmit and onCancel props, reuse a custom Button with shared styles, and handle editing with submitButtonLabel and isEditing.

Collect entered expense values, convert amount to a number and date string to a date object, and pass expenseData to the app context via onSubmit and confirmHandler.

Fetch the selected expense by ID to prefill the form with its values. Use a default values prop, convert amount to string, and format date with toISOString.

Add validation on form submission to verify amount, date, and description using helper constants; provide feedback directly in the UI rather than relying on alerts.

Provide visual validation feedback in React Native by highlighting invalid inputs and showing a dynamic error message. Track inputs as objects with value and Is Valid properties for validity updates.

Define a React Native error text style and global error color, then apply conditional styles to labels and inputs when a field is invalid.

Build and validate forms in React Native with pre-filled or empty inputs, split into reusable custom input components configured by text input props, and learn styling for backend integration.

Set up a Firebase backend, send HTTP requests to a REST API, and store, fetch, update, and delete data while managing loading and error states in a React Native app.

Use Firebase real-time database as a dummy backend, leveraging its REST API to store, fetch, update, and delete data with test mode for unauthenticated access.

Install Axios in your React Native project to send HTTP requests. Use Axios for saving, updating, fetching, and deleting expenses, and integrate with Firebase for backend communication.

Use an axios-based http.js helper to post new expenses to a firebase backend, storing description, amount, and date offline and in the expenses node via a .json URL.

Fetch expenses from the backend in a React Native app using Axios GET, centralize BACKEND_URL, and convert Firebase data into an array with id, amount, date, and description using async/await.

Transform fetched expenses into usable data with a shared expenses context. Update the context via a set expenses method and a set reducer to refresh the interface instantly.

Refine expenses by reversing the fetched expenses to keep the original add order, and rely on Firebase-generated IDs from the post response for correct update and delete operations.

Learn to update and delete expenses on Firebase with updateExpense and deleteExpense, using axios put and delete, targeting a specific expense by id and applying optimistic updating.

Build a loading overlay in React Native using ActivityIndicator to show spinners while data fetches. Manage isFetching and isSubmitting to display the overlay during fetch, add, update, or delete actions.

Handle request failures gracefully by introducing an error overlay, managing error state with try-catch, and presenting clear messages and recovery options during data fetches and updates.

Learn to send HTTP requests from your components using a library or fetch, handle loading and errors, transform responses, and communicate with a backend like Firebase.