🔴 Build a Realtime Chat App with Firebase | Authentication | Expo Router | React Native Projects
Вставка
- Опубліковано 17 тра 2024
- Hello everyone 👋, in this video we will build a fully functional chat app using firebase.
What You Will Learn:
- Firebase Authentication
- Firebase Messaging
- Responsiveness
- TailwindCSS (Nativewind 4)
- Lottie Animations
- Image Caching
- Cross-Platform Compatibility
🚀 Source Code: links.codewithnomi.com/fireba...
🏞️ Assets: drive.google.com/uc?export=do...
Add TailwindCSS in React Native: • Add Tailwind CSS In Yo...
Learn Expo Router: • Build complex layouts ...
Firebase Fuctions(setDoc, addDoc): firebase.google.com/docs/fire...
Firebase Queries: firebase.google.com/docs/fire...
Expo Router Authentication: docs.expo.dev/router/referenc...
Learn Expo Router: • Build complex layouts ...
Expo Router Installation: docs.expo.dev/routing/install...
Nativewind installation: www.nativewind.dev/v4/getting...
Reanimated installation: docs.swmansion.com/react-nati...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewith...
🚨 more videos on react native:
Fitness App: • 🔴 Build a Fitness App ...
Food Recipe App : • 🔴 Build Food Recipe Ap...
Movie App : • 🔴 Build Movie App Usin...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Travel App UI : • 🔴 Travel App UI | Reac...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
UA-cam Clone App: • 🔴 UA-cam Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
hashtags & keywords
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
▬▬▬▬▬▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Create App
15:03 - Authentication
28:26 - SignIn & SignUp UI
59:01 - Firebase Auth
01:30:59 - Chat List Header
01:48:31 - Fetch Users
02:05:35 - Chat Room UI
02:21:48 - Chat Room Messages
02:45:36 - Last Message
02:59:47 - Final Demo
This might be the most precise tutorial i have watched yet.. Great job!
You are the best react native developer i found in youtube. Thanks for all amazing videos 🎉
You always upload the best ReactNative tutorials very clean code no typescript and no over engineering.
Thank you 👍
This is neat, please clone more apps, I love the work you do
The best react native tutorial!
This tutorial is very useful to understand the concept of chat app functionallity. Thank You Very Much.
Thank you sir, This was huge for me
nice video. which library are You using for responsiblity for tablets?
great one
thank you
Nice work
Great !
I followed along up to the end of the Firebase Auth part 1:25.:50. However its not creating a "users" collection for me? Any guidance on this Nomi?
Nativewind allows you to use "vh" and "vw", so no need for the extra library
this works for me thanks a lot. but i've a question . for example if we want to build and deploy a real application, this firebaseConfig can be sufficient ? or if we want to use the same firebase project for different app like web and mobile, should we separate the app by using expo-prebuild and config firebase inside android and ios folder ?
i've recently got an error message in MainApplication.java or kts file
the chat, how do I so that when I create an account with one user I can add the other? because from what I see, any account I create lists all the users. I don't quite understand if there is a way for me to add a contact via email or phone number and have a conversation with the person I added
nice video i must say, can you add video and audio call functionality
i think you should at least give us the all type of assets uses in the project as free so most of the audience code along with you, By the way loved your content.
You can find the assets link in the video description 😉
thanks for this osam project brother can you make a kind of Tracker app like UBER plz with expo or CLI
Brother. What if we delete a user from the firebase console when its logged in a device. Will relaunching the app, automatically logout? The question arises because we persistent the user state in the local storage. Kindly shine light on this matter.
Bro, my project stopped working as soon as i finished the segments, and the app is not redirecting to Home. How can i fix that? tks man
can we do this in cli same ?
My tailwind css is not working please what should I do
Should both phones that have this app installed in them be connected to same network inorder for this to work ? Or any network & the distance dosen't matter ?
network & distance doesn't matter
"Hey there! Can you please create a course on building React Native apps with WooCommerce API integration? It'd be super helpful! Thanks a bunch! 🙌"
you doing great job thanks. there is some problems with VScode could you show us your extensions installations because VScode suggestion is not working with NativeWind
hi nomi, why dont you name first letter of component capital instead of changing it in code? any logic behind?
There's no logic behind it, you can use the first letter capital 😉
Thanks. How can I reach u for mentorship, because I am currently I am in a phase of learning. Or can u suggest any platform?? Specially for backend???
what do i do The following packages should be updated for best compatibility with the installed expo version:
react-native-reanimated@3.7.1 - expected version: ~3.6.2
Your project may not work correctly until you install the correct versions of the packages.
Run "npm i react-native-reanimated@3.6.2"
And restart the app.
please make an tutorial reanimated
Hi master, your tutorial helps me a lot to know more about React Native, but i have a issue when i try to make a build with expo go throws me the next error:
Task :app:createBundleReleaseJsAndAssets
Error: Unable to resolve module /home/expo/workingdir/build/node_modules/.cache/nativewind/global.css from /home/expo/workingdir/build/global.css:
None of these files exist:
* node_modules/.cache/nativewind/global.css(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css|.android.css|.native.css|.css)
* node_modules/.cache/nativewind/global.css/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css|.android.css|.native.css|.css)
> 1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
Error: Unable to resolve module /home/expo/workingdir/build/node_modules/.cache/nativewind/global.css from /home/expo/workingdir/build/global.css:
None of these files exist:
* node_modules/.cache/nativewind/global.css(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css|.android.css|.native.css|.css)
* node_modules/.cache/nativewind/global.css/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css|.android.css|.native.css|.css)
> 1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
at ModuleResolver.resolveDependency (/home/expo/workingdir/build/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
at DependencyGraph.resolveDependency (/home/expo/workingdir/build/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
at Object.resolve (/home/expo/workingdir/build/node_modules/metro/src/lib/transformHelpers.js:169:21)
at Graph._resolveDependencies (/home/expo/workingdir/build/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
at Graph._processModule (/home/expo/workingdir/build/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Graph._addDependency (/home/expo/workingdir/build/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
at async Promise.all (index 3)
at async Graph._processModule (/home/expo/workingdir/build/node_modules/metro/src/DeltaBundler/Graph.js:322:5)
at async Graph._addDependency (/home/expo/workingdir/build/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
> Task :app:createBundleReleaseJsAndAssets FAILED
> Task :react-native-reanimated:externalNativeBuildRelease
> Task :expo-modules-core:buildCMakeRelWithDebInfo[x86_64]
w: Detected multiple Kotlin daemon sessions at build/kotlin/sessions
521 actionable tasks: 521 executed
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:createBundleReleaseJsAndAssets'.
by any chance you know any solution for this.
Might be an issue with ur file path
what is the terminal you use
the terminal, it macOS
why you are using expo not cli ?
Why not?
@@tabaicanking3701 coz i am working in cli that's why 🥲 hope you'll understand 😩