How to Create an Expo App with React-Native Firebase
Vložit
- čas přidán 19. 06. 2024
- A tutorial on how to create an Expo app using the Firebase SDK 🔥.
Follow along the tutorial with this boilerplate: github.com/friyiajr/WalkHeroS...
Check out the documentation: rnfirebase.io/
Get help with your Expo project on the public Expo Discord: chat.expo.dev/
Follow me on Twitter 🐦: / wa2goose
Subscribe to my Insta 📷 my handle is: dan.rnlab
-------------------------
00:00 Introduction
02:18 Demo of Finished App
04:28 Firebase Console Setup
06:20 Install Firebase SDK in an Expo Project
08:48 Login and Registration
12:22 Save a Workout
13:37 Query for the Feed
15:42 Build the Leaderboard
20:51 Conclusion - Věda a technologie
Loving these videos! So great to see new creators pop up making modern Expo and RN tutorials
Thanks, it means a lot 🙂! Happy you enjoyed this
This is awesome, thanks Dan! I got it to work only after a few hours cos I made a very silly mistake of sending the wrong format of the credentials to firebase authentication, should have been more careful when I code! Thanks again and keep it coming!
Thanks for the clear explanation, good luck!
thanks man. I've been looking for something like this for a quite a long time. I used it and it's awsome. keep up the good work. love.
Thanks for the kind words 🙂 happy to help!!!
Life saver !!! was about to eject expo in a couple of minutes to setup firebase haha! good looking out
Happy to help 🙂
i find this channel and it's like finding a treasure! thanks Dan for this amazing videos god bless
Thanks for the kind words 😀 ! Excited to bring more videos !
Thanks Dan! Awesome tutorial
Glad you enjoyed it! 🙂
Great video! The only one I found on the subject so far with code that actually works. Thanks!
Happy to help!!!
who does this leaderboard works out? When you restart by pushing the 'Go' Button, does the counted steps from earlier start at zero or does the counting just continious?
You helped me solve in minutes a problem had had plagued me for days. Thank you, sir!
Happy to help 🙏😀
Thanks this was super helpful keep it up
Happy to help 🙂
You're the best, keep going!
Thanks! 😄
Liked before even watched. Great video. Maybe idea for the future decoupling firebase calls maybe even with redux :) Thanks for video..
Happy you enjoyed it 👍
@@DanRNLab enjoyed and learned 🙂 I was struggling with expo and fb because I was missing that “static” config. Do you have some pattern that you use to decouple firebase calls out of tsx and make it reusable?
I saw you mentioned Redux. For anything that doesn’t require a listener you can probably just throw it in a Thunk. For the queries that require listeners you would have to do some research there. In RTK there is a listener middleware which might be a good place for the listener calls. I haven’t used that before though so I can’t say too much about it
Thanks dan! Is the plugin configuration you did mandatory??? I didn't get it.
Nice tutorial. Simple and clean but I would expect you not to skip the screen designs. While I was writing the code, I looked at the states already written, the design is done.
Hey Dan, are these steps similar if we wanted to use Firestore instead of Realtime?
who does this leaderboard works out? When you restart by pushing the 'Go' Button, does the counted steps from earlier start at zero or does the counting just continious?
I I followed all the steps ( but I am on o Andoird). I am stucked on this error message:
ERROR Error logging screen event: [Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app().
By chance do you have an hint? :) Thanks
I have this error too, no clue what to do
Any solutions?
add me to this list
Very useful video!!! I would just like to know if you chose your bundle ID arbitrarily, because I can't find it anywhere in my Expo project. Thanks for the great tutorial!
Hey, I just picked one I thought best suited my project. You make them up yourself
hi i am currently stucked in this process. i am using the expo (tabs) navigation folder with a _layout.js where i defined the files in the bottom tab. however when users login details are correct i am useing router.replace. is this good or bad?
Hi, I need help. I have an existing Firebase Expo app with Firebase authentication already implemented as webapp.
I want to add push notification functionality using expo-notifications without creating a separate Android project.
How do I go about it thanks
great tutorial, thanks! I'm curious, do you record the screen first, and then do the voice over after? Or do you talk and code simultanenously?
I record first then do the voiceover after. Doing them both at the same time makes it easier to make typing errors. I found trying to do both at the same time slows me down a lot and I can’t fit as much in the tutorial.
Hey Dan, I got one more questions regarding the setup: Is the expo-modules-autolinking package necessary? I didn’t add it and seems to work fine without it. Thanks again for the great tutorial!:)
On my end it was, without adding this I wasn’t able to run prebuild.
Not sure if this helps, but npx expo-doctor told me that it was already installed with a different dependency, so I should remove it. Maybe that's why it was fine for you?
thanks
Great video🙌🙌🙌🙌
Thanks for the kind words 😀!!!
@@DanRNLab you are welcome. it straight forward and precise to the point. I’m your new subscriber now.
hey mr. , I'm meeting this problem "Cannot find name 'db'." , how to solve it?
How'd you get the iOS emulator on the right?
Hey man, thanks for the video. Had no idea it was actually possible to run @react-native-firebase alongside Expo. Question though, since we're not using the Expo Go app anymore in this workflow, do I need to run anything extra when installing a new package? Let's say I `npm install` a random RN Calendar component, do I need to run `prebuild` again before running `npx expo run:ios` ?
I think run:iOS does prebuild before compiling.
@@DanRNLab Thank you! And btw, should we be adding the ios/android folders to .gitignore?
I am getting this warning when running expo-doctor, do i have to fix anything? "The package "expo-modules-autolinking" should not be installed directly in your project. It is a dependency of other Expo packages and should be installed automatically."
Just curious which do you think is less buggy (at least for adding Google/FB Authentication)...
ExpoGo + Firebase JS SDK vs Expo Custom Dev Build + ReactNative Firebase ???
I would say go with React-Native Firebase and Expo Custom dev build. You get extra benefits too like all the native mobile functionality it provides. The JS SDK doesn’t give you that
Where did u get that bundle ID from? or you just made it up? Thanks for the video.
When you do prebuild you can set it to whatever you want.
Awesome tutorial! Why are you prebuilding instead of using a dev client?
I used prebuild because it kept things more focused on Firebase. I didn’t want to pull the viewer away into the EAS Build process and distract from the Expo + Firebase work.
@@DanRNLab Would appreciate a video on dev client! Been struggling with it for a while
Hi Dan, just a quick question cuz am using vanilla JavaScript. What is the equivalence of using FirebaseAuthTypes .UserCredentials in JavaScript and not Typescript because I discovered that the user is not logging in.
Hey, I don’t think there is an equivalent in JS unfortunately. The structure of the object should be the same though regardless of JS or TS
@@DanRNLab Alright, thank you sir
great job, can you please make a video how did you created the walk hero sample ?
Do you mean the step counter library? If so I already have a video for that
How to build an Expo Library using Native Modules
czcams.com/video/ZNE7Of3TZAY/video.html
Great i will watch it thank you so much dear
Hey Dan, Great tutorial. However when I try implement the Firebase auth I can't run the simulation or app on my phone and get the error: "Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist." I believe this is to do with the Firebase module. It recommends to use the developer build of my app but, i'm wondering if i could get this to work without using the dev build. Any suggestions ?
I am using windows, so wasn't able to run : " npx expo run:ios " incase that makes the difference, i was using " expo start" and the app. I could run the Prebuild successfully.
I don’t have a windows machine so I can’t really diagnose this. I recommend asking on the Expo discord: discord.com/invite/expo
@@DanRNLab thanks for the reply!
Also another question, what is the essence of doing db().ref('.....) what is it for? is that sending the data in the form to the database e.g name, etc, is it the name from the state? - [name, setName]... If yes, totalScore was not initialized as a state in the app. Please clarify. Thanks
Ref represents the path to a given object or primitive in the database. If it doesn’t exist yet in the db then Firebase creates that ref for you
@@DanRNLab Thank you
When i run the npx expo prebuild command, it onlly build for Android and not for IOS, how can i fix this ?
There may be issues with your Xcode setup. I would start debugging there
i think when run prebuild command in windows it only build for android not for ios .For ios we have to require a mac. correct if I am wrong...
For iOS your require a Mac or you can use the cloud EAS service provided by Expo
@@DanRNLab thankyou sir for your reply
Hello Dan, How to use ImageNotification (FCM) with eas build ?
Hey I have a tutorial about Push Notifications in general. Not sure if that helps: czcams.com/video/s8OKmkyclEg/video.htmlsi=wYbZA7teANt4v7XO
will u please have a tutorial with firebase dynamic links and analytics please?
Sadly, Dynamic Links are being discontinued by Google 😔
firebase.google.com/support/dynamic-links-faq
You did not mention how to install expo, i feel even thats' a problem, they have ben changing alot of things, local cli global cli and what not.
helo dan, after week of trying, researching and even trying different versions of this damn package, i am frustrated and helpless. i still have an error: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app)., js engine: hermes on each app's launch. any help please?
If you are still having issues at this point I recommend trying the Expo team’s discord. It’s really active and lots of people ask questions there discord.com/invite/expo
thanks a lot@@DanRNLab
Hey I'm a complete noob...if I do this, can I still test my app using ExpoGo on IOS? (I do not have any MACos machine only windows)
thx liked and subscribed
Thanks for the like and sub 🙂. You can’t use Expo Go anymore if you go this route. You _should_ be able to use EAS Build though to create a custom client for your app though. I think that can be installed on your iPhone and it behaves in a similar way to Expo Go.
@@DanRNLab wow thanks so much! I really appreciate you replying. I will look into this. Great channel btw I'm going to go ahead and check out some other videos & try to learn
hi man, How to get the ID project.
It should be available in the Firebase console for your project
How can i find my expo app? - - Android package name
If you’ve run prebuild already it will be in your app level build.gradle file
did not work for me :)
Sir and I have one request.. it's only one I'm thinking to ask you when I was watching this series.. can you do a bbc iplayer radio app wheel (like channel selection wheel) project so that when we spin a wheel with our thumb.. the channel has to slide... I watched other vedios regarding this..but the way u explain everything... Is quite understable compare to everyone else.. so I'm requesting you to make a small vedio about this project please...sir...this is my only request... ❤️Thank you sir...
I'm also attaching the vedios for your reference
czcams.com/video/8TqKIsQJxLQ/video.html
czcams.com/video/zF9rmPH00AA/video.html
hi !! good tuto, it helps me a lot ..
but i got this error:
Could not set unknown property 'classifier' for task ':expo-sample-pedometer:androidSourcesJar' of type org.gradle.api.tasks.bundling.Jar.
Bro f'd up my whole project...ERROR in ./node_modules/@react-native-firebase/app/lib/internal/SharedEventEmitter.js:18
Module not found: Can't resolve 'react-native/Libraries/vendor/emitter/EventEmitter'
16 | */
17 |
I haven’t seen this error before. Might be best to see if you can get some help in the Expo Discord Server:
discord.com/invite/4gtbPAdpaE