The complete React Native course ( 4th Edition )

Learn how React Native uses modules and components, focusing on core elements like view and text. Set up the app entry in app.js and preview basic styling with the stylesheet.

Master the basics of React Native views and text, using view as a container and text to render content, and style with inline styles or StyleSheet and flex layouts.

Explore how flex layouts organize React Native views with flex direction, justify content, and align items, controlling row or column arrangements and space distribution.

Build and import components in a React Native project, manage state with useState, and pass props such as name of app to render dynamic content.

Explore the Pressable component in React Native to handle touch input with onPress, onPressIn, onPressOut, and long press, including style arrays and Android ripple effects.

Build and style a text input component in React Native, manage its value with useState, and update it via onChangeText for Android and iOS.

Explore text input props in React Native, including multiline, max length, placeholder, and iOS and Android differences. Handle blur and change, toggle editability, set keyboard type for numbers and emails.

Learn to use the React Native button component, handle onPress, and update a names list with state. Map names to display them with keys and styles, prep for scroll view.

Wrap content in a scroll view to enable scrolling of lists or sections, and explore on content size changes, on scroll, and momentum events across iOS and Android.

Discover how the native React Native activity indicator works as a loader, adjustable by size and color, with the animating prop controlling visibility during asynchronous requests.

Create and display images in React Native using local assets with Image, explore resizeMode options, load remote images via uri, and use ImageBackground for text over a pattern-like backdrop.

Learn how to build and control modals in React Native, managing visibility with state, triggering open/close actions, and applying fade or slide animations on iOS and Android.

This lecture demonstrates using the dimensions API to read width and height from window (Android and iOS), explains window vs screen, and shows conditional styling and useWindowDimensions as an alternative.

Configure orientation in an Expo app via app.json, choosing portrait, landscape, or default, then reload. Use the use window dimensions hook to detect orientation and adapt layouts.

Learn to use the use window dimensions hook in React Native to read width and height, detect portrait or landscape, and apply responsive styling.

Learn to use window dimensions to adapt a React Native layout, adding a scroll view with multiple boxes and conditionally placing a button for portrait and landscape orientations.

Learn how to implement Expo's status bar in a React Native app, switch between light and dark styles, and ensure bottom spacing by setting the main container flex to 1.

Explore the platform api to detect Android or iOS, use the select option for platform-specific styling, and build platform-specific components for seamless cross-platform behavior.

Master rendering dynamic lists with the FlatList component in React Native, covering data, renderItem, and keyExtractor. Create a sample user list to practice item rendering and smooth scrolling.

Build a simple React Native app with expo: add names to a scrollable list, validate input, determine the loser via a modal, and reset the app.

Learn to implement a full-screen background pattern with image background, import assets, and add a top icon using expo vector icons, while organizing styles in a constants file.

Create a main React Native component with a controlled text input and state, using a defaults object, exploring useReducer and context API alongside Redux, with native button and alert handling.

Create a reusable button component in React Native using a Pressable, with props for title and onPress, and dynamic back color, pressed color, and optional custom styles.

Add names to the list in a React Native app by building a handle state function that updates the names array, clears the input, and displays the JSON state.

Create a validate handler in a React Native app to catch empty input and duplicates. Return error messages, alert users, and append valid names to the list for display.

Render a dynamic names list with a FlatList, handle empty state, render items by item and index, enable removal via onPress, and manage state with styling for a fixed height.

Build a get result button in a React Native app, generate a random name from a names list, and display it in a modal after verifying two names.

Finishing the app demonstrates implementing a modal view with centered styling, a reset app function, and React Native styles, then testing the build on iOS and Android.

Learn how to set up navigation in a React Native app using React Navigation, exploring stack, native stack, drawer, and tab navigators, and starting with installation in an Expo project.

Install the native stack navigator and wrap the app in a navigation container. Register home and users screens on the stack and set the initial route name.

Pass props and navigate across screens in a React Native app using stack navigators, navigation props, and the useNavigation hook. Explore params, go back actions, and route references.

Learn to navigate between home and users and pass params like id and code name; use route props or the use route hook in a stack navigator.

Master header customization in React Native by using screen options and dynamic titles with setOptions, useLayoutEffect, and navigation, and styling header background, tint, and typography across all routes.

Learn to customize the header bar in React Native by replacing the default title with a reusable logo title component, handling cross-platform alignment with native stack navigator.

Learn to customize header buttons in React Native by using components as left and right header elements, manage back button visibility, and navigate between screens with the navigation prop.

Learn to set up and customize a drawer navigator in React Native, including installing dependencies, passing initial params, and styling the header and drawer with active and inactive colors.

Enhance expo drawer navigation with react native vector icons, including ionic icons and font awesome, and control the drawer with toggle actions and the use drawer status hook.

Explore building a bottom tab navigation in React Native using React Navigation's bottom tab navigator, configure screens like home and users, customize header and tab colors, and add Ionicons.

Learn to nest and mix stack, tab, and drawer navigators in a React Native app, building a home drawer, a users stack, and a posts tab with articles and feeds.

Learn form handling and validation in React Native by building a new project, creating a form component, and implementing validation with Formik and Yup, while comparing manual approaches.

Create a React Native form from scratch with a wrapper view and inputs for email and password, enabling schema validation. Style with StyleSheet and use formic for onchange and onblur.

Learn to control a form in React Native with the formic library: install, wrap the app, manage initial values, handle change, blur, and submit, and validate with Yup showing errors.

Learn how to create and apply a yup-based validation schema for a form using formik, validating email and password with custom messages, and wire the schema into formik.

Learn to build a reusable input field component for React Native forms using Formik, including a custom input, field integration, validation, error handling, and styling.

Learn how to implement a robust multi-line input in React Native using props, min height, and padding to align iOS and Android, with platform-aware keyboard avoidance.

Wrap the form in a keyboard avoiding view with an inner scroll view to handle keyboard on iOS and Android, using platform checks to apply padding or position as needed.

Explore using the context API and Redux to manage local state in a React Native app, with drawer navigation and screens like home and create user form.

Build a centralized store with the context API and Redux. Create a store context and provider, then useContext to share the app name across screens.

Explore how the context provider manages state in a React Native app, expose a change app name function, and reflect updates across components including home via a button.

Add users through a form, store them in a context state, and display them on the home screen with a flatlist, then navigate back.

Learn to set up Redux for scalable apps with Redux Toolkit and React-Redux, create and configure a store with reducers and slices, and replace context API with a provider.

Dispatch actions with redux to update the app name and add users, using useSelector and useDispatch, reducers, and payloads, and learn about extra reducers for async data.

Learn to implement async thunks with Redux Toolkit, using extra reducers and the thunk API to fetch posts from JSON placeholder via Axios, handling pending, fulfilled, and rejected states.

Dispatch redux actions with useDispatch to fetch posts, then render them in a flat list showing title and body, while an activity indicator signals loading.

Explore how Expo provides built-in features for React Native and how to find, install, and use third-party libraries for fonts, location, and camera via the Expo SDK reference.

Explore the Expo battery library from the Expo SDK, install it, and use hooks like use battery level and use low power mode, with Android testing and iOS simulator limitations.

Explore how to monitor device battery status in expo with use power state, battery level, and low power mode, including on-demand checks, subscriptions, and cross-platform nuances.

Install and import the Expo device module, then access constants like OS name, version, model, and manufacturer to tailor behavior for Android or iOS and distinguish emulators from real devices.

Learn to use a checkbox in React Native via Expo, import the Expo checkbox, manage state with useState, and handle value changes to reflect the checked status and color styling.

Learn to implement a picker for selecting options in React Native, using a third party picker with Expo support, manage country state, and handle Android vs iOS styling.

Master how to create gradients in React Native using expo linear gradient, apply them as backgrounds or inside buttons, tune with start and end props, and prepare for font integration.

Install expo font to use custom fonts without native setup, register fonts in app.json via a config plugin, and note font paths, such as Imperial Script in assets/fonts.

Install and configure Expo splash screen to keep the app on the splash screen while fonts load. Use useFonts to detect loaded or error, then SplashScreen.hideAsync to reveal the app.

Learn how to request location permissions on android and ios using expo location. Install and configure expo location, and fetch the user’s current position with a button.

Learn how to implement the location package in a React Native app using expo location, request foreground permission, and display the user's latitude and longitude in a view.

Configure and connect Firebase in a React Native Expo project, using a template and npm start, then sign in and sign out with email and password on iOS and Android.

Create a Firebase project in the console with a Google account. Install Firebase software development kit, enable Expo integration, register a web app for api keys, and initialize with config.

Enable Firebase authentication with email and password, implement sign up and sign in flow in a React Native app using modular Firebase auth, navigation, and AsyncStorage for persistence.

Learn how to implement authentication persistence in React Native using Async Storage, troubleshoot common setup issues, and ensure reliable sign-in and user registration across iOS and Android.

Learn to sign in users with Firebase Auth in React Native by using signInWithEmailAndPassword, monitor auth state with onAuthStateChanged, and conditionally render navigation options.

Learn to implement sign-out in a React Native app by building a custom drawer in React Navigation, wiring a Firebase auth sign-out, and handling auth state changes.

Start building a tiny React Native event app with Firebase sign in, storing notes and events via context and Firestore, and adding an infinite scroll and splash screen.

Set up Firebase for a React Native Expo app by enabling email/password authentication and Firestore, configuring web app credentials, installing Firebase and Async Storage, and initializing Auth and DB.

Create an app context provider using useReducer to manage user state, sign in, and navigation flow in React Native, with Firebase session checks and a root navigator.

Build a route navigator that uses Firebase onAuthStateChanged to manage the user in an app context, showing a loading indicator while deciding between an auth stack and the main stack.

Build a single authentication form for sign up and sign in in React Native, managing email and password state, and applying a gradient layout with styled inputs.

Develop a toggleable authentication form in React Native, with a sign up / sign in button, on press handling, Firebase authentication, and a plan for a reusable button.

Sign up users with Firebase authentication by validating email and password, creating the user via auth, and storing the uid and email in a Firestore users collection.

Implement sign in for users in a React Native app using email and password with Firebase, show toasts for alerts, and persist sessions for seamless sign-in.

Install and configure a React Native toasts library with Expo, wrap the app with a provider, and trigger toast.show for welcome, sign-in, sign-up, and Firebase errors.

Develop a reusable React Native button component in a utils directory, with customizable text, onPress handling, and light and purple styles, to support login and sign-up screens.

Build and wire the app stack and drawer in React Native, creating home, event, create event, and edit event screens for logged-in navigation.

Create a sign out button in a custom drawer, wiring navigator props and user context to sign out with Firebase auth and return to the sign up screen.

Style headers, stacks, and the drawer with purple and khaki, apply Pacifico font size 20, and define inactive/active tint colors for a cohesive navigation UI.

Create a bottom floating add event button on the home screen with a plus icon. Navigate to the create event screen on press and prepare inputs for Firestore.

Builds a create event form in React Native, featuring a reusable input component, a Formik integration, and a Yup validation schema, with Firebase submission.

Create a custom input component in React Native with Formik, wiring Field to a named input and handling onChange, onBlur, value, errors, and touched, including a multi-line description.

Finish the create event form by adding date, time, and priority fields, implementing form validation, a submit button with loading state, and Firebase submission for the complete React Native course.

Post events to Firebase from a React Native app by creating an events collection with server timestamp and owner id. Load the home feed with context and infinite scrolling.

Learn to fetch and display user-specific home events from Firebase using a context API, implement pull-to-refresh and infinite scroll, and manage data with useEffect and useReducer.

Learn to manage home events data with useReducer in a React Native app, dispatch actions with payloads from Firebase, maintain an events state, and render them in a flat list.

Create an event card component for the FlatList, pass item data, and navigate on press, with a gradient container and a priority tag.

Finish the event card by styling the item view with padding and a purple header border, and enable navigation on press using the item id or the full item.

Refresh the feed by pulling down to trigger onRefresh, fetch the latest list of five posts from home events via an async call, and update the refreshing state.

Enable infinite scrolling in a react native flat list by using onEndReached and threshold to load more posts, show a loading footer, and update data from firebase.

Fetch an event by ID from params in a React Native Firebase app when the event screen is focused; show a loading indicator, store the event, and render its name.

Finish the events page by building a header, body, and footer that display event, date, time, and a priority tag, with responsive styling and navigation to edit event.

Build an edit events screen in a React Native app by populating the form from route props, reusing the create form, and updating Firestore with a dedicated update function.

Explore publishing and building React Native apps with Expo's cloud iOS service, comparing free and paid plans, building for iOS and Android, and preparing projects for production and publishing.

Learn to configure app.json for expo builds by setting the app name, version, and iOS and Android properties, plus icons and splash screens.

Explore how Expo handles app icons and splash screens by editing app.json and assets, exporting icon, adaptive icon, and splash PNGs via Figma template, and testing across Android and iOS.

Create an Expo account, log in to EAS, and configure your project with eas.json for iOS and Android builds. Then choose to build installers for testing or app store submissions.

Learn to generate Android APK and iOS installers using Expo EAS, configure build profiles, manage app IDs, sign keys, and distribute via QR codes.

Generate an iOS installer with eas, preview and build for iOS simulator, download and install on device, then outline production submission steps for Google and Apple.