React Native Chat App with Firebase - Firestore Course 2020

Learn to structure a react native chat app with firebase by creating reusable components, constants, image and color managers, a navigation system, and distinct screens, while scaffolding a new project.

Install the react navigation dependencies and follow the official documentation for navigation native and the navigation stack, then complete the Xcode setup.

Learn to bootstrap a React Native chat app with Firebase by setting up a source directory with four screens: sign-in, home, add group, and chat, plus boilerplate sign-in with react-navigation.

Create a main stack navigator for a React Native chat app by setting up a navigation folder, importing React Navigation components, and wiring sign-in, group, and chart screens.

Create and wire a main stack navigator in a React Native app, implement a new function for navigation, export the navigator, and confirm the test navigator saves the file.

Fix project issues by cleaning dependencies, removing unnecessary files, rebuilding in Xcode, and pushing the updated code to GitHub on a navigation branch.

Begin building the sign-in screen by creating the user interface and adding a logo. Implement reusable components for email and password to complete the authentication interface.

Implement a utility class with two functions: validate field and validate email, trimming spaces and checking length to support form validation.

Finish the utility class by saving the file and creating a colors file to organize color references. Address the note about something stuck in port.

Rename the navigation folder and make the folder name small, using modern letters to ensure consistency.

Create a constants module in a dedicated folder to manage screen dimensions, platform checks, colors, and exported constants for height and width calculations in the React Native chat app.

Create a reusable button component in React Native by implementing a functional component with props for title and onPress, including customizable styles, default values, and uppercase text.

Run the React Native chat app on simulators to test Android and native components, resolve issues that arise when implementing new features, and verify project connectivity.

Diagnose and fix navigation and stack issues in the React Native chat app, adjust layout, save files, rename components, and test the app to verify changes.

Fix ongoing React Native errors by clarifying navigation imports, avoiding problematic renames of node modules, and enforcing consistent capitalization to keep sign-in and navigation working.

Debugging a React Native chat app, this lecture demonstrates saving changes, running on the simulator, and correcting text strings by updating a strings class and using join strings.

Create an email text field component for a React Native app, style it with a StyleSheet, and export it for reuse, while validating emails on change and handling placeholders.

Push your code for the first time by setting the upstream origin, pushing the current branch, and creating a new branch.

Create a password text field component and a dismiss keyboard component to automatically hide the keyboard when tapping outside the field in a React Native chat app.

Implement a password text field component in React Native, featuring a placeholder, secure text entry, and onChange/onEndEditing handlers with responsive height and theming.

Develop a dismiss-keyboard component in a React Native chat app, creating a new file, exporting the component, and wiring on-press behavior with children as the wrapped view.

Implement the sign-in screen in a React Native app using hooks to manage email, password, and loading state, validate emails, and handle keyboard and safe area.

Fix layout issues in the React Native chat app by debugging the email and password fields, validating screen constraints, and correcting image assets export to complete the UI.

Push code from the terminal by checking status and branch, add and commit changes, set upstream origin, and switch branches, then begin integrating identifier-based authentication with firebase.

Install the firebase dependency into the React Native project, secure API keys with environment configuration, and add the required config lines to ensure the app runs with firebase.

Create a .env file to securely store Firebase keys and other secrets, enabling environment variable management for the React Native chat app with Firebase.

Push the code to validate firebase integration and resolve installation issues. Ignore sensitive firebase files with gitignore and verify the app runs.

Rename the Firebase class while safely importing or requiring Firebase, and implement Firebase authentication to ensure durable user login flows.

Implement Firebase auth on the signing screen of a React Native chat app, showing a loading indicator during sign-in and handling success with alerts, and sign-up on failure.

Fixing issues in the React Native chat app with Firestore, the lecture covers resolving unresolved Firebase dependencies and implementing a loader to show during user actions.

Finish user authentication by enabling email/password in the Firebase console, optionally adding social or phone logins, then sign in or create users and proceed to the next screens.

Push your code by committing changes, handling the ignore file, and pushing to repositories, then validate authentication and app status for the Firebase Firestore chat app.