Full Stack React Native with Hooks: From Beginner to Expert

Select a text editor for React Native development, comparing WebStorm and Visual Studio Code, then download and install on Mac, and learn keyboard shortcuts like Command+P for installation tasks.

Install Xcode and expo on Mac, using the terminal commands provided. Create your project, run npm start, and launch the iOS simulator from the local host to load it.

Install Xcode from the Mac App Store and set up Homebrew, node, npm, and watchman to run React Native, then create and run a cli project in the iOS simulator.

Install android studio on mac, install the java development kit, set environment variables, and download sdk platform 28 with google APIs to run a react native project on android emulator.

Install React Native on Windows using Chocolatey and PowerShell, set up Node and JDK, configure Android Studio and SDK, then create and run a React Native project on Android emulator.

Create your first React Native project, set up a directory, initialize the project, run npm start, open in Xcode, and test on iPhone X through iPhone 5 and Android emulator.

Run the app in an emulator, convert a class component to a functional component, use React and React Native libraries with platform detection, text and view components, style sheets.

Explore the React Native view component, flex layout, and the style prop to control sizing and colors. See how nested views divide space within a parent container.

Use the React Native text component to render hello world and center it with justifyContent center. Introduce a string message prop with a default value.

Learn how to use the touchable opacity component in React Native to turn text into a button, handle on press, and trigger an alert modal.

Explore the text input component, its common uses in authentication forms and search, and learn to wire state, value props, and simple styling in a React Native app.

Explore using React Native style sheet components with StyleSheet.create, convert inline styles to a centralized styles object, and apply container and input styles with blue background and white border.

Design a custom modal for a React Native app with screen featuring confirm, approve, and input buttons, including a yes or no confirmation and an input modal that collects information.

Create and run a React Native alert box project by initializing the app, starting the server, and launching on iOS and Android emulators via Xcode and Android Studio.

Implement global values by creating a global styles file, defining default text and colors, and standard button types for confirmation, approved, and input in the React Native project.

Develop a versatile React Native button component using TouchableOpacity, props, and prop types, with global styles and multiple button types and sizes for a polished UI.

Create and style a modal component in React Native, using a style sheet and global styles to render a white, centered modal with borders and shadow.

build and configure a mymodal component in react native using the modal, text input, and conditional rendering to support confirmation and input prompts, with props for visibility, title, and message.

Configure and use a modal in a React Native class component, manage visibility with state, and pass title, message, and button props to trigger a confirmation action.

Learn to complete a MyModal in a React Native app by styling modal text, configuring approved and input models, and adjusting button dimensions for a responsive UI.

Explore React Native lifecycle methods from initialization through mounting and updating, including constructor, render, componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, and componentDidUpdate.

Learn how to use React Native lifecycle methods and run a cross‑platform project by launching iOS and Android emulators to get the app up and running.

Create a React Native class button component using TouchableOpacity and Text with inline styling and an onPress prop, then integrate it into the app and explore lifecycle methods.

Explore react native lifecycle methods—from constructor and getDerivedStateFromProps to render, componentDidMount, shouldComponentUpdate, componentDidUpdate, and componentWillUnmount—through hands-on debugging and binding with arrow functions.

Learn how react navigation implements bottom tab, header tab, and draw navigation using create bottom tab navigator, stack navigator, and create draw navigation, with home, profile, and post screens.

Learn to implement React Navigation in a React Native project using stack navigation for screen transitions, a drawer navigation header, and bottom tab navigation for the home and profile screens.

Set up a React Native project with React Navigation, install matching React and React Native versions, and build four screens—home, detail, profile, and settings—as functional components, preparing for routing.

Implement react navigation by wiring bottom tab, stack, and drawer navigators with home, detail, profile, and settings screens. Configure header options and a drawer width of 0.83 of the screen.

Learn to set up React Navigation on an Android emulator with Android Studio, update main activity imports, link in the terminal, and run the app on the emulator.

Create a reusable menu button component for react navigation, replacing the drawer toggle and wiring it to the navigation prop to open the drawer with a menu icon.

Create and style a menu drawer component in a React Native app, wiring nav links to home and settings screens with a responsive layout and touchable links.

Add a stack button in a React Native app using touchable components, navigate from home to details with navigation props, and configure a back action via header left.

Explore react navigation concepts, including tab navigation options, default options, swipe and lazy loading, and using built-in navigation props and functions like navigate and toggle drawer.