tshelton41/fbappfinal

This is the final code for React Native and adding Firebase

In order for you to run this project. npm install or yarn install

Expo Firebase Doc: https://docs.expo.dev/guides/using-firebase/

Written Instructions for adding Firebase

1. You will need to first create a project inside of Google's Firebase. https://firebase.google.com/
   • Note: Do not use your school email. If you can create a Gmail account. 
   
   
2. Go to the Dashboard of your Firebase account and click the Add Project button. Follow the directions. Accept the defaults if you want you can add analytics. 
   
   
3. Next, click on the authentication button in the left-hand menu, then click on sign-in method and make sure you enable email and password.
   
   
4. Depending on the database, you want to use, click on build, and then either firestore or real-time database. We will be using firestore, so make sure you enable that and then set the permissions to test mode. 
   
   
5. Next go to this page, How to Create a React Native Project Locally, and create your local Expo project. 
   
   
6. After you create the project you will need to install the following packages. 
   1. npx expo install firebase
      

      npx expo install firebase

7. Next copy your config file from your project at firebase.google.com. Something that looks like this.
   
   

   // Import the functions you need from the SDKs you need
   import { initializeApp } from "firebase/app";
   import { getAnalytics } from "firebase/analytics";
   // TODO: Add SDKs for Firebase products that you want to use
   // https://firebase.google.com/docs/web/setup#available-libraries
   // Your web app's Firebase configuration
   // For Firebase JS SDK v7.20.0 and later, measurementId is optional
   const firebaseConfig = {
   apiKey: "",
   authDomain: "",
   databaseURL: "",
   projectId: "",
   storageBucket: "",
   messagingSenderId: "",
   appId: "",
   measurementId: ""
   };
   // Initialize Firebase
   const app = initializeApp(firebaseConfig);
   const analytics = getAnalytics(app);

8. Now create a file in the root of your project called, firebaseConfig.js
   and paste the code you copied from the firebase website into the file. 
   
   
9. Next, you need to import auth from firebase/auth
   

   import { getAuth } from "firebase/auth";

10. Now that you have auth imported, we need to export it so other components can use it. Place this at the bottom of the file under the const app.
    

    export const auth = getAuth(app);

11. Now we need to bring in Firestore. Import Firestore and make it accessible.
    

    import { getFirestore } from "firebase/firestore";
    // put the below line at the bottom of the file
    export const firestore = getFirestore(app);

12. Then run npx expo customize metro.config.js 
    

    npx expo customize metro.config.js

13. Then put this in the metro config file. 

    const { getDefaultConfig } = require('@expo/metro-config');
    const defaultConfig = getDefaultConfig(__dirname);
    defaultConfig.resolver.sourceExts.push('cjs');
    module.exports = defaultConfig;

14. Next, you can either run either of the following commands to run on a simulator.
    

    yarn ios
    yarn android
    yarn web

Adding a Navigation Stack to your project

1. Add @react-navigation/native
   

   @react-navigation/native

2. Add @react-navigation/native-stack
   

   yarn add @react-navigation/native-stack