Build a React Native App with Firebase Auth & Chat #1 - Create App
Vložit
- čas přidán 2. 06. 2024
- Hello everyone 👋, today we are going to start building an Expo Router app with tailwindcss, and we will build a realtime chat system with firebase authentication. You will learn a lot in this series, we are going to use tailwindcss, lottie animations, responsiveness, firebase auth, firebase firestore, expo router and so much more.
🚀 Source Code: links.codewithnomi.com/fireba...
Add TailwindCSS in React Native: • Add Tailwind CSS In Yo...
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 ...
CZcams Clone App: • 🔴 CZcams 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...
#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
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
reanimated 3.0
react native reanimated
react native firebase auth
firebase auth in react native
realtime chat in react native
firebase authentication
react native firebase chat
animations
Amazing, following through and looking forward to the next part on firebase.
Can you please create notification using expo notification using firebase
wow what a great app lots of love sir
Thank you sir
sir it great
me ny ap ki vidoes sy rect native ki hn
kindlyy CLI me chat chat krwa dy or jaldi update kr dy
Lot a love for your lectures nice teaching method
awesome
Thanks
does expo router is used in real projects?
why is there a tsconfig.json file? why dont i have it when i create a new project?
hey can u make video on expo file system
I feel like they need to tell you in the Nativewind v4 documentation, that there are all these extra steps you need to do to get Nativewind v4 to actually start working. Its not very clear.
Step 1. npm install nativewind
Step 2. npm install --dev tailwindcss@3.3.2
Step 3. npx tailwindcss init
Step 4. Add config files for tailwindconfig and Babel
tailwind config file
content: [
'./App.{js,jsx,ts,tsx}',
'./app/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
Babel config file
plugins: [
'expo-router/babel',
'nativewind/babel',
],
Step 5. Restart your server, and clear cache. - npx expo start -c
Step 6. Start using tailwind.
Sir, can you tell me, how to create iphone simulator like you
Why do most CZcamsrs choose to create videos using Expo? Is it because it's easier to use?
flutter❤
What macbook are you using ? If it is macbook air ., then is it enough to run both emulators and video editing ?
Please reply., thank you
I'm using m2 pro, but you can get any m1 macbook and it can handle emulators and video editing.
Ok is the emulator from Xcode, do you need Xcode when you use expo with react native
@@codewithnomi when you say m1 ., are you adressing m1 air (16gb) ? Brother
what is this phone emulation program?
Iphone simulator from xcode
SETTING UP NATIVEWIND
Step 1. npm install nativewind
Step 2. npm install --dev tailwindcss@3.3.2
Step 3. npx tailwindcss init
Step 4. Add config files for tailwindconfig and Babel
tailwind config file
content: [
'./App.{js,jsx,ts,tsx}',
'./app/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
Babel config file
plugins: [
'expo-router/babel',
'nativewind/babel',
],
Step 5. Restart your server, and clear cache. - npx expo start -c
Step 6. Start using tailwind.
Please push notifications.
Sure, will do in future