In this section, we’re going to add the UI (React Native, NativeBase components), add the Firebase OAuth functionality, and connect to Firestore.

If you pref to skip all this and just download the ready made project, visit the associated repo, which should have all the code that we’re going to write below. Adjust it as you like! = )

Before anything, let us install some dependencies. Run each of the following:

• expo install firebase
• yarn add "firebase@~9"
• expo install expo-auth-session expo-random
• yarn add "react-native-web@~0.14.1"
• expo install expo-web-browser

(Lookup each if you’re curious in seeing what each one does. The most confusing one might be expo-random, but that’s a requirement when setting up auth for an Expo project. Documentation reference. )

Ok, great. Now we’re ready to go!

Add Firebase

1. Create firebase.js file in the root directory of your app

2. Add the following to firebase.js:

   import { initializeApp } from 'firebase/app';
   import { getFirestore } from 'firebase/firestore';
   import 'firebase/auth';
   
   const firebaseConfig = {
     apiKey: process.env.FIREBASE_KEY,
     authDomain: 'pineapples.firebaseapp.com',
     databaseURL: '<https://pineapples-default-rtdb.firebaseio.com>',
     projectId: '<YOUR_PROJECT_ID>',
     storageBucket: 'pineapples.appspot.com',
   };
   
   // initialize firebase and firestore
   export const firebaseApp = initializeApp(firebaseConfig);
   export const firestore = getFirestore();
   

Clean up default NativeBase stuff + Add OAuth listener

Make your component look like this:

import React, { useState, useEffect } from "react";
import {
  Text,
  Center,
  NativeBaseProvider,
  VStack,
} from "native-base";
import * as WebBrowser from 'expo-web-browser';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

import { firebaseApp } from './firebase';

WebBrowser.maybeCompleteAuthSession();

const defaultCurrentUser = {
  uid: '',
  displayName: '',
  email: '',
};

export default function App() {
  const [currentUser, setCurrentUser = useState(defaultCurrentUser);
	const auth = getAuth(firebaseApp);

	useEffect(() => {
    // Listen for auth state changes
    onAuthStateChanged(auth, (authUser) => {
      if (authUser) {
        const { uid, displayName, email } = authUser;
        const shapedUser = { uid, displayName, email };

        setCurrentUser(shapedUser);
      } else {
        setCurrentUser(defaultCurrentUser);
      }
    });
  }, []);

  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <VStack alignItems="center">
          <Text>Hello world</Text>
        </VStack>
      </Center>
    </NativeBaseProvider>
  );
};

http://localhost:19006/