React Native: Beginner Practical Guide [2023]

Explore macOS development environment setup for React Native, highlighting differences from Windows and introducing specialized tools beyond standard NodeJS to boost productivity.

Install and manage the Ruby version required by React Native on macOS using rbenv and Homebrew, then set it globally and verify with ruby --version.

Use Visual Studio Code as the primary editor for React Native development, download from code.visualstudio.com, install on mac, Windows, or Linux, and prepare for future extension installation.

Explore Visual Studio Code as a lightweight, productive code editor with extensions, and learn to download and install it on Windows and Mac for React Native projects.

Install and configure Prettier in Visual Studio Code to auto-format React Native code on save, set the default formatter, and customize tab width for consistent styling.

Learn to debug a React Native app in Visual Studio Code by attaching to the packager, using Launch.json and the React Native tools extension, with breakpoints and Chrome debugging.

Create a new React Native movies app by running npx React Native init and opening the project in VS Code. Use a function component and rename to app in index.js.

Create sliders for popular TV, popular movies, family movies, and documentaries in a React Native app, fetching filtered results with discover endpoints and gender filters from the movie database API.

Refactor a React Native home page by consolidating all movie data fetches into a single Promise.all call, using a get data function, and guard renders with data checks.

Install the stack navigation library and set up a stack navigator inside a navigation container to wire home, detail, and search screens in a React Native app.

Display movie detail screen with the image, back arrow, play button, title, genre, rating, description, release date from the movies API, and pass the clicked movie to the detail component.

Explore how to display a movie overview and release date in a React Native app, using API fields, text styling, and a date format library.

Create a reusable play button component in React Native, using Pressable for touch input and a vector icon library to trigger video playback in a movie detail screen.

Learn to implement a video player inside a modal in React Native by wiring a button to toggle modal visibility, passing handlers via props, and centering content.

Create a custom navigation bar for a React Native app using header options, including transparent headers and safe area, and pass navigation to enable back and search actions.

Create a new search screen in a React Native app, using a stateless search component with safe area view and stack navigator, and wire a button to navigate to it.

Builds a search results template in React Native by calling search movie or TV service with query and type, managing results with state, rendering multi-column cards, and navigating to detail.