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 homebrew, a package manager for Mac system, by copying the command from the website and pasting it in the terminal to complete the setup, enabling future package installs.

Install node.js with nvm via homebrew to manage node versions for react native and other libraries, including setting up lts and switching versions.

Set up the development environment for React Native and use simulators to test apps on desktop, then choose Expo or React Native CLI quick start guides on react native.dev.

Set up the Android development environment for React Native by installing watchman, the Java Development Kit via Zulu open sdk, Android Studio, Android SDK, and configuring Android home.

Set up the iOS environment using a macOS system, since iOS cannot be configured on Windows. If you’re on Windows, run a macOS VM to install and work with iOS.

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.

Install and manage cocoa pods on macOS for React Native, using sudo and gem, including uninstalling existing pods, updating to match Ruby, and preparing for project setup.

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.

Install Xcode from the Mac App Store and verify version 10 or newer, then open Xcode, accept agreements, install command line tools, and set up a simulator for React Native.

Learn to configure Xcode simulators for React Native by adding iOS 16 alongside iOS 13, downloading and deleting simulators, and opening the devices and simulators window to run tests.

Learn to run Android emulator using Android Studio's virtual device manager, create a Pixel device with the S SDK, start the emulator, and test your app on Android and iOS.

learn to create a React Native project from the command line with npx react native init on your desktop, name the app, and install dependencies, including cocoapods.

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.

Open the created React Native project in Visual Studio Code and inspect its folder structure. Review Android and iOS folders, node modules, and key files like app.tsx and index.js.

Install essential React Native extensions in Visual Studio Code to speed up development, including Es7 React Redux snippets and React Native Tools for debugging and command integration.

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.

Install and use ESLint as a VS Code extension to automatically detect and fix JavaScript issues, following React Native community rules, including camel case and no unused vars.

Learn practical debugging in React Native by using console.log in the Metro terminal, implementing a hello world app, and understanding components, view, text, and app entry point in app.js.

Debug your React Native app with Chrome by using dev tools, setting breakpoints, reloading, and inspecting console logs to track issues and verify code flow.

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.

Register for the tmdb api, obtain an api key, verify email, and test endpoints with Postman to fetch json data, images, and movie details for a mobile app.

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.

Fetch popular movies from the API using axios in a React Native app, including installation, import, and an async get request. Extract response.data and results to display movie names.

retrieve a movie from a service, handle it as an async promise, and render its original title using React Native state to update the interface with language and release date.

Learn how to use useEffect to manage side effects, fetch data, and control state updates in React Native, preventing infinite loops and improving performance with devtools.

In React Native, catch API errors, set error state, and display a red error message to users when the server fails, with guidance on reloading during development.

Refactor by creating a services folder, exporting API methods, and centralizing the API URL and key to fetch popular, upcoming, and TV data.

Create a home page component for a React Native app, with sliders for popular, TV shows, family, and documentaries. Refactor code from app.js into home.js and wire it into app.

Create a latest movies image slider with the react native image slider box library. Build an images array from upcoming movie poster paths and prefix with the base image URL.

Learn to style a React Native image slider with a separate style sheet, configure slider container styles, and use device dimensions for responsive height.

Learn to build a horizontal movie carousel on the home page using the flat list in React Native, wiring data from a popular movies service and rendering titles.

Create a reusable list component in React Native by passing title and content props, using a pure component, and rendering dynamic movie lists with a flat list and styling.

Create a card component to display movie posters in a list using image uri sources, make each card clickable with touchable opacity, and navigate to details.

Use an inline if to display a placeholder image from assets in a React Native card when poster path is undefined, and show the movie title as fallback.

Learn to implement type checking in React Native apps using prop-types for props validation. Define prop types and attach them to components to catch errors during debugging.

Learn to implement a scroll view in React Native to enable scrolling on the home screen when displaying multiple views such as documents, movies, and family movies.

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.

Add a loading spinner with React Native's activity indicator, import it, and toggle between the scroll view and indicator using a loaded state that becomes true after data loads.

Create a reusable error component in React Native that displays two customizable error messages when data loads incorrectly, using prop types and default props for robust handling.

Install and configure the React Native Navigation library to enable screen-to-screen navigation in a React Native CLI project, installing dependencies like gesture handler, reanimated, screens, and safe area context.

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.

Learn to add a movie detail screen to a React Native app by wiring a detail component to the stack navigator and passing navigation through home, list, and card.

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.

Learn how to pass a clicked movie's data from the home card to a movie detail screen using React Navigation, including how to read route parameters in the detail component.

learn how to create a movie detail service to fetch detailed data by movie id, manage loading state, and navigate by id for efficient data handling.

Render the movie title with a text component, using font size 24 and bold styling, centered in a scroll view, and map genres with genre.id as keys to display names.

Implement a five-star rating in React Native using the React Native Star Rating component, map the movie vote average to stars, and address font awesome and vector icon dependencies.

Install and link the React Native vector icons library to display icons for the star rating, then restart and test on iOS or Android.

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.

Learn to play a video in a modal in React Native using the React Native Video Controls library, including installing react-native-video and react-native-video-controls.

Refactor a video component in React Native to host a video player, pass onclose props, and manage modal closing, full-screen orientation, and end-of-video behavior.

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 home nav bar with logo and search button, using a main prop to switch from detail nav; define prop types, props, and style with a React Native StyleSheet.

Refactor a React Native app by extracting navigation into a main navigation component, turning it into a pure component, and simplifying the stack navigator with header mode to control headers.

learn to build a search service for movies and TV shows using the API's search endpoints, passing API key, language, page, and user query to obtain results.

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.

Build a search form in React Native using a text input, placeholder text, and a submit button with touchable opacity, and manage input state with useState and styling.

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.

Merge movie and TV search results into one list by using Promise.all and spread operators to combine two arrays, then present mixed movie and TV results with movies first.

Export a colors object from a dedicated theme file and replace hardcoded colors in the navbar and play button with colors.white and colors.primary to enable configurable theming.

Fix styling issues by adjusting padding and text spacing for lists and titles. Update navigation icon colors to light gray for clarity and consistency across views.