Develop & Deploy Mobile Apps with React Native & Expo

Create your first React Native app with Expo, scaffold a project, install Node.js and Visual Studio Code, and run on phone or browser with live reload.

Explore the expo project structure, including the extra expo folder, assets, node_modules, the ags file, and app files that manage expo, react, and react native dependencies and styling.

Explore the core React Native components—Text, TextInput, View, Image, and Button—and learn how native compilation maps these elements to Android and iOS using functional components and hooks.

Explore styling in React Native by using inline style objects or a stylesheet with named aliases; learn that styles are a subset of CSS converted to native elements.

Learn to use React Native core components by wrapping text in Text, nesting within views, importing from the React Native library, and using buttons with self-closing syntax and onPress attributes.

Master how React Native styling works as a JavaScript subset of CSS, including which elements support style, applying color, margin, padding, and using reusable stylesheet objects for usability.

Build a task manager layout in React Native by creating an input, a task list, and a styled container with padding and an add task button.

learn to build responsive layouts in React Native using Flexbox by setting flex-direction, justify-content, and align-items, styling input boxes with width, padding, border, and radius.

Learn to divide vertical space with flexbox by defining a top section as 100% height and a bottom task list as six parts, using margins, borders, and color tweaks.

Create and manage a task list using useState to store a task and the tasks array, handle input, and append new tasks with the spread operator.

Bind input and button events to state in a React Native task app, map tasks with unique keys, and style the on-screen task list.

Wrap task items in a view for cross-platform consistency, define a task item style with margins, background color, and white text, and optionally add numbering.

Learn how to make content scrollable in React Native by wrapping the content in a ScrollView, applying a unique key to list items, and considering iOS properties and cross‑platform behavior.

Compare flat list and scroll view, showing that scroll view loads all items and harms performance with large lists; use flat list for lazy loading as you scroll.

Learn to implement FlatList in React Native for efficient long lists, using data, renderItem, and keyExtractor, with item id and index handling to enable lazy loading.

Break down the app into smaller components by creating a task item component as a functional React Native module, passing item and index props, and styling with StyleSheet.

Create an add task component in a React Native app, implement a text input and add task handler, pass data to the parent, and clear the input after submission.

Apply conditional rendering in React Native using a ternary operator to show or hide the task list based on its length. See how adding tasks toggles visibility and renders items.

Implement a delete task feature in a React Native and Expo app by creating a parent delete function, passing it to the child, and triggering it on press.

Send the item id through props and use the filter function to remove the matching task. Pass the id via bind or a small function to trigger deletion on press.

Enforce mandatory field validation in a React Native app by checking inputs on add task, showing alerts for empty fields, and applying the same rules to inputs, dropdowns, radio buttons.

Experiment with ripple styling for a pressed task item in a React Native app using Expo, applying Android ripple properties and inner view padding to achieve an inside, prettier interaction.

Toggle a modal popup in a React Native app to add tasks using a showModel state (default false) and an add task button; animation comes in the next video.

Implement a sliding animation for the modal popup by binding the modal's visible property to the parent, selecting the slide animation type, and previewing the result in the screen component.

Style a modal in React Native by making it full screen, placing add task and cancel task as a horizontal button group, and applying layout styles for spacing.

Refine the modal by setting the input box width to 100%, removing margins, and applying 15 padding to input containers. Implement cancel and add task button functionality.

Learn to hide a modal on cancel by implementing a hide modal handler, passing it as a prop, and triggering it after adding a task.

Add images to your React Native Expo app by importing from assets and rendering with the image tag, using a relative path and basic styling.

Learn to generate an android apk for testing and production with expo build, using preview and production builds for internal testing and Play Store deployment.

Create a new React Native app and learn navigation and API calls by copying a command, choosing a location, naming the app, pasting, and running it to generate the project.

Create and load a new React Native app with Expo, connect an Android device via USB, run npm run android to reload, and confirm the Android build completes.

Install react navigation libraries for Expo using version 6 commands, install native stack, and begin configuring navigation in your project.

Create home and dashboard components using a VS Code extension to scaffold React Native components, organize a lean app structure, and initialize navigation in the next video.

Set up React Native navigation by importing the navigator container and native stack navigator, define a home and dashboard screens in a stack, and set the initial route.

Navigate between the home and dashboard screens using the navigation object's navigate method via button presses. Learn go back, push, and routes; data passing is addressed in the next video.

Explore passing data between screens in React Native navigation by sending a parameters object with route name, then access name and department id in the destination.

Implement a go back button in a React Native and Expo app to navigate back to home or dashboard using navigation.goBack, and replace hardcoded user details with a text input.

Create text input boxes on the home screen, bind them to name and department ID state variables, and pass the entered values to the dashboard while validating non-empty fields.

Create a movie component and implement navigation to the movie screen using a button or anchor-like link. Prepare to fetch movies by name with a future API call.

Build a movie screen with a text input bound to a searchText state, a 'find movies' button, and an upcoming API fetch to display results.

Learn to write a rest api call to search movies by title with the IMDB api key, using fetch and async/await to populate a movie list state.

Loop through the movie list with a flat list for performance, binding data to the movie list state and rendering each item’s title and poster, while debugging data flow.

Show how to fetch movie data with API calls, display poster images with defined width and height in React Native and Expo, and conditionally render the list based on length.

Create an android build and generate the apk for your phone with expo, logging in, running the build from the project root, using preview mode, and monitoring progress.

Build a React Native app with Expo, obtain build link, install APK on your phone by scanning, and test in preview mode; for production release, follow the task manager steps.