React Native Expo Firebase Tutorial

React Native Expo Firebase Tutorial guide to become a coding wizard and launch your first mobile app! Please comment down below if you have any questions or what you would like to see next!
Source Code: github.com/and...
Firebase https: //firebase.google.com/
Expo Templates: docs.expo.dev/...
Timestamps:
0:23 Initial App Setup
1:16 Firebase Authentication
3:31 Setting up Tabs
3:57 Firestore Database
5:22 Storage
6:42 Functions
7:55 Conclusion
Welcome to the ultimate beginner's guide for integrating Firebase with your Expo React Native app! In this comprehensive tutorial, we'll walk you through setting up and utilizing Firebase's powerful suite of tools to supercharge your mobile app development.
What You'll Learn:
1. Firebase Authentication: Securely manage user sign-ins and registrations with Firebase Auth.
2. Firebase Firestore Database: Store and sync data in real-time with Cloud Firestore.
3. Firebase Storage: Manage and serve user-generated content like images and videos using Firebase Storage.
4. Firebase Functions: Extend your app's capabilities with serverless functions using Firebase Cloud Functions.
Tech Stack:
React Native Expo: A framework for building cross-platform native apps using React and JavaScript.
Firebase: A platform developed by Google for creating mobile and web applications.
Key Sections:
Setting Up Firebase: Step-by-step instructions to create and configure your Firebase project.
Integrating Firebase with Expo: Learn how to connect your Expo project with Firebase seamlessly.
Implementing Authentication: Code examples and explanations for adding user authentication to your app.
Using Firestore: Understand how to create, read, update, and delete data in Firestore. CRUD operations.
Handling Storage: Techniques for uploading and retrieving files from Firebase Storage.
Deploying Functions: How to write and deploy cloud functions to enhance your app's backend.
Why Watch This Tutorial?
Beginner-Friendly: No prior experience with Firebase or Expo required!
Step-by-Step Guidance: Follow along with detailed explanations and code snippets.
Practical Examples: Real-world use cases to help you understand and implement Firebase features.
Interactive Learning: Pause, rewind, and replay as needed to master each concept.
By the end of this tutorial, you'll have a fully functional mobile app integrated with Firebase, ready to handle authentication, database operations, file storage, and cloud functions. Whether you're building your first app or looking to enhance your development skills, this guide has everything you need to get started.
Don't forget to like, subscribe, and hit the notification bell to stay updated with more tutorials!

[@dantebuilds]

bro top 5 tutorials of all time, reminds me of the old days watching thenewboston tutorials. You guys both make learning fun and that's rare man, don't stop posting ur gonna blow up very very soon.

[@ffkraemer]

Very good, dude, thank you so much!

[@andrewheimdev]

No probem! Thank you for watching

[@px8]

ur narration is beautiful =))

[@syedZain4401]

thank you so much!

[@mdkvaofficial]

Amazing Buddy...
Love from Pakistan...

[@andrewheimdev]

Thanks! Appreciate it! :)

[@CodingAndPizza]

Maan! thank youuu

[@andrewheimdev]

Thank you for watching!

[@minimatifarm]

Thanks man

[@andrewheimdev]

Are you looking for any specific information for the multi step form? (ex. username, first name, last name, location, profile image) or are you asking for SMS Multi-factor Authentication?

[@thabomashiyane689]

great !! video man, I appreciate it. Could you do a tutorial where you incorporate use Session and wrap the entire app

[@andrewheimdev]

Thanks! Appreciate your appreciation. What would you need to use useSession for?

[@thabomashiyane689]

@@andrewheimdev I want to wrap my auth session in my entire app, for example the user signs in then he/she will be able submit or post something on my app under the sign in email or credentials.

[@andrewheimdev]

I see what you are saying. I don't use useSession. But for your use case I would just use auth().currentUser so something like this:
import auth from '@react-native-firebase/auth';
useEffect(() => {
console.log('auth', auth().currentUser)
}, [])
You then have access to all the user info provided.
Also I found this stack overflow: stackoverflow.com/questions/57776847/how-to-manage-user-session-in-react-native
if you want to manage userSession using a different storage method.

[@GuillaumeHuchet]

Hey thank you so much, this is truly amazing! A couple days ago I did it and it worked perfectly, but today when I tried to do it again from scratch I keep getting the following issue in the terminal:
ERROR Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
(for information I updated today to macOS Sequoia 15.1 Developer Beta it might be that? but unsure tbh)
Otherwise, thanks a lot, you've been very helpful with those tutorials :)

[@andrewheimdev]

Yeah not sure exactly whats up! Thanks for the comment! :)

[@student2k185]

Great video and thanks for timestamp its very helpful. Is there a particular guide that helped you understand the firebase topics to create this app?

[@andrewheimdev]

Thanks. Simon Grimm has a good youtube video on authentication. Then for the rest I would say just the firebase docs, google, and chatGPT/copilot!

[@student2k185]

@@andrewheimdev Hello Andrew, In firebase config we have the persistence which I think should keep the user logged in even after closing the app and reopening it. But since we are using expo emulator I how can I test that it works? I tried to login and close the app and open again but it takes me back to login screen instead of just keeping me logged in.

[@andrewheimdev]

@@student2k185 Hmmm I usually use an IOS simulator when I'm testing, and it seemed to work for me. What simulator are you using? Expo Go?
And you can build and test the app on a physical device as well. Just would have to setup your phone with xcode for ios or android studio for android.

[@서민기-i6r]

thanks bro. Would be great if you later deal with firebase push notification later!

[@andrewheimdev]

Great idea! I will try and get that in a future video.

[@JosePedro-ry8su]

You are hilarious! Great tutorial, really loved and appreciated it, wishing you the best of the best!

[@abiodunomonijo]

I fell in love with your narration style. Well done.

[@rachanapatil1475]

Hey @andree heim, for me sign out is not working, it is not redirecting to home page with you code, can you please help

[@Manojkumar-fq2vu]

This is really a good repo . I have star it ⭐⭐⭐⭐

[@andrewheimdev]

Thanks for the star :)

[@cl4rk_sh]

Life saver

[@andrewheimdev]

Thanks!

[@abhinavchaudhary11]

hey! how to activate firestore persistence on expo app?

[@moyeon07]

What if I choose Android instead of web app? Do I still need to create firebase config file?? Plz make a video on this too

[@andrewheimdev]

It will be more complicated with android setup. You'll have a google-services.json file that will have all of your config for firebase inside of it that you will place in your app. Then you'll need to add some plugins to your gradle file to get everything going. And the syntax will be different as well... So a bit different than this video.
My next video was setting up google sign in for ios and android. So it will touch on this.
Any specific items you are trying to implement?

[@moyeon07]

@@andrewheimdev I'm completely new to this, I'm making a project on a cafeteria app using react-native expo n firebase
Ryt now I'm doing the authentication of sign-up n even tho I set the plugins when I click on sign-up the details don't come I keep getting log error: auth doesn't exist tho it is still there

[@andrewheimdev]

@@moyeon07 Hmmm yeah really can't tell you exactly what is going on without looking at it more. One thing you can try is using "npx expo prebuild" docs.expo.dev/workflow/prebuild/
Every time you install a new package you have to rebuild your app.
Also The example in this video uses the firebase javascript web app instead of android, but it works totally fine with android.
Just depends on what type of authentication you are trying to do. If it's just email/password you are fine. If it involves sign in with google, it will take a few more steps.

[@Hjjayk]

Why did u select add firebase to webapp when you are creating a mobile app?

[@iarlasb]

if you picked 'ios' or 'android' it would give you stuff formatted for swift (what *native* ios apps are written in) or kotlin (what native android apps are written in). react native uses web-focused languages but compiles to these languages so you have native apps at the end

[@soretii_11]

can you make a video on firebase authentication using OTP verification with phone number

[@andrewheimdev]

Yes! I'm currently working on that now!

[@andrewheimdev]

I just made and posted the firebase authentication using OTP verification with phone number! Let me know what you think of it!

[@RefinedLuxe]

can you make a real tutorial not a walk through please

[@andrewheimdev]

Yeah what do you mean by a real tutorial? Walking through each line of code, or typing everything instead of copy pasting it?

[@tonytony-fc6gq]

SENIOR DEV- chatgpt 🤣🤣🤣🤣🤣🤣🤣🤣🤣