Code With Nomi
Code With Nomi
  • 86
  • 1 700 581
🔴 Build a Wallpaper App in Expo Router | React Native Projects | React Native Tutorial | Expo SDK 50
Hello everyone 👋, in this video we will build a fully functional Wallpaper App using Expo Router v3.
What You Will Learn:
- React Native
- Expo Router v3
- React Native Reanimated
- Responsive UI
- Masonry Layout
- Pixabay API Integration
- Linear Gradients
- Expo Vector Icons
- Bottom Sheet Modal
- Image Caching
- Downloading Content
- Sharing Content
- Toast Messages
- Cross-Platform Compatibility (iOS, Android, Web)
🚀 Source Code: links.codewithnomi.com/wallpaper-app
✨ If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi
🏞️ Assets: drive.google.com/file/d/1PYCGsXo_H6jqa0P2P4UcEKag7r4gJS_q/view?usp=sharing
Learn Expo Router: czcams.com/video/jJl-DZ3d8k8/video.html
Pixabay API: pixabay.com/api/docs
Expo Router Installation: docs.expo.dev/routing/installation
Reanimated installation: docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started
🚨 more videos on react native:
Firebase Auth & Chat: czcams.com/video/wncM96HYcxw/video.html
Fitness App: czcams.com/video/asMSo4DLq6s/video.html
Food Recipe App : czcams.com/video/cdnneQjsoT0/video.html
Movie App : czcams.com/video/Q1xQuCpYIFE/video.html
Onboarding UI with Lottie Animations: czcams.com/video/4-GKgqIUBNo/video.html
AI Voice Assistant with ChatGPT & DALL-E : czcams.com/video/nf3t5p2a5Dg/video.html
Travel App UI : czcams.com/video/vV9zIDgT4Ik/video.html
Weather App : czcams.com/video/953vyZMO4cM/video.html
Coffee App UI : czcams.com/video/mhyuMy4aI-M/video.html
Food Delivery App : czcams.com/video/v-zxqkz1T8E/video.html
CZcams Clone App: czcams.com/video/AVovt3gFmsg/video.html
Login | SignUp UI : czcams.com/video/RhF4iUCiwSs/video.html
Fast Food App : czcams.com/video/x5hX06YdRvI/video.html
App Store UI : czcams.com/video/Wp6JtHj4lyM/video.html
Fruit Shop UI : czcams.com/video/UwW__s37agw/video.html
Firebase Authentication React Native: czcams.com/video/idPGWpVLHP0/video.html
Food Delivery App : czcams.com/play/PLKWMD009Q4qReQz5FOcvBik9WBJanJVZd.html
Learn React Native: czcams.com/play/PLKWMD009Q4qTGuqXxRq51f8OoDaIoJ1yo.html
Learn Reactjs: czcams.com/play/PLKWMD009Q4qT1UgUrphG9ArfZblaL3fc5.html
hashtags & keywords
#expo #reactnative #javascript #tailwindcss #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 - Project Demo
07:00 - Create App
10:00 - Welcome Screen UI
30:07 - Home Screen
59:06 - Fetching Images
01:12:40 - Masonry Layout
01:27:40 - Search Bar Implementation
01:36:57 - Category Implementation
01:42:25 - Filters Modal
02:47:00 - Pagination
02:58:52 - Image Modal Screen
03:25:35 - Toast
03:35:54 - Final Demo
zhlédnutí: 15 189

Video

🔴 Build a Realtime Chat App with Firebase | Authentication | Expo Router | React Native Projects
zhlédnutí 24KPřed 3 měsíci
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/firebase-auth-chat 🏞️ Assets: drive.google.com/uc?export=download&id=1TaX_J1I6sPus6r7n0d...
Build a React Native App with Firebase Auth & Chat #9 - Last Message & Time
zhlédnutí 1,2KPřed 3 měsíci
Hello everyone 👋, in this video we will show the last message from each user in the chat list and time of the message. We will also fix some of the keyboard issues in the chat room. So by the end of this video you will be able to create professional apps with expo router and firebse. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source C...
Build a React Native App with Firebase Auth & Chat #8 - Send & Receive Messages
zhlédnutí 755Před 3 měsíci
Hello everyone 👋, in this video we will implement sending and receiving messages in a chat room using firebase firestore. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Firebase Fuctions(setDoc, addDoc): firebase.google.com/docs/firestore/manage-data/add-data#set_a_document Firebase Q...
Build a React Native App with Firebase Auth & Chat #7 - Chat Room UI
zhlédnutí 782Před 3 měsíci
Hello everyone 👋, in this video we are going to design the chat room screen and we will also learn a way to fix the keyboard view. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Firebase Fuctions(setDoc, addDoc): firebase.google.com/docs/firestore/manage-data/add-data#set_a_document F...
Build a React Native App with Firebase Auth & Chat #6 - Fetch Users
zhlédnutí 738Před 3 měsíci
Hello everyone 👋, in this video we are going to design our chat list UI and we will also fetch the user list from firebase to show in that chat list. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Firebase Fuctions(setDoc, addDoc): firebase.google.com/docs/firestore/manage-data/add-da...
Build a React Native App with Firebase Auth & Chat #5 - Chat List Header
zhlédnutí 821Před 3 měsíci
Hello everyone 👋, in this video we are going add a custom header in our chat list screen where we will add the user profile image and on that profile image we will also add a context menu to give user an option to visit his profile or sign out. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-aut...
Build a React Native App with Firebase Auth & Chat #4 - Firebase Authentication
zhlédnutí 2KPřed 3 měsíci
Hello everyone 👋, in this video we are going to implement firebase authentication, we will add sign In, sign up and sign out. We will also learn how firebase will persist user in local storage. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Firebase Fuctions(setDoc, addDoc): firebase....
Build a React Native App with Firebase Auth & Chat #3 - SignIn & SignUp UI
zhlédnutí 1,9KPřed 3 měsíci
Hello everyone 👋, in this video we are going design the SignIn and SignUp screens using tailwindcss, vector icons and lottie animations. we will also make our UI responsive so that it looks good on all the devices. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Expo Router Authenticat...
Build a React Native App with Firebase Auth & Chat #2 - Setup Authentication
zhlédnutí 2KPřed 3 měsíci
Hello everyone 👋, in this video we are going to setup an authentication system in expo router. If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/codewithnomi 🚀 Source Code: links.codewithnomi.com/firebase-auth-chat Expo Router Authentication: docs.expo.dev/router/reference/authentication/ Learn Expo Router: czcams.com/video/jJl-DZ3d8k8/video.html Expo Rout...
Build a React Native App with Firebase Auth & Chat #1 - Create App
zhlédnutí 5KPřed 3 měsíci
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/firebase-auth-chat Add Tai...
Drawer Navigation in Expo Router v2 | Expo SDK 49 | React Native Tutorial
zhlédnutí 4,9KPřed 4 měsíci
Drawer Navigation in Expo Router v2 | Expo SDK 49 | React Native Tutorial
Lottie Animations in React Native | React Native Tutorial
zhlédnutí 8KPřed 4 měsíci
Lottie Animations in React Native | React Native Tutorial
🔴 Build a Fitness App in React Native (Expo Router, TailwindCSS, Reanimated, Rapid API, Caching)
zhlédnutí 16KPřed 5 měsíci
🔴 Build a Fitness App in React Native (Expo Router, TailwindCSS, Reanimated, Rapid API, Caching)
Build a Fitness App in React Native (Expo Router) #5 - Exercise Details & Animations
zhlédnutí 2KPřed 5 měsíci
Build a Fitness App in React Native (Expo Router) #5 - Exercise Details & Animations
Build a Fitness App in React Native (Expo Router) #4 - Exercises Screen
zhlédnutí 2,4KPřed 6 měsíci
Build a Fitness App in React Native (Expo Router) #4 - Exercises Screen
Build a Fitness App in React Native (Expo Router) #3 - Home Screen
zhlédnutí 2,7KPřed 6 měsíci
Build a Fitness App in React Native (Expo Router) #3 - Home Screen
Build a Fitness App in React Native (Expo Router) #2 - Image Carousel with Parallax Scrolling
zhlédnutí 3,3KPřed 6 měsíci
Build a Fitness App in React Native (Expo Router) #2 - Image Carousel with Parallax Scrolling
Build a Fitness App in React Native (Expo Router) #1 - Intro & Setup
zhlédnutí 12KPřed 6 měsíci
Build a Fitness App in React Native (Expo Router) #1 - Intro & Setup
Build complex layouts with Expo Router v2 and Expo SDK 49 | File Based Routing | React Native
zhlédnutí 17KPřed 7 měsíci
Build complex layouts with Expo Router v2 and Expo SDK 49 | File Based Routing | React Native
React Native Dark Theme | React Native Tutorial | Beginners
zhlédnutí 12KPřed 7 měsíci
React Native Dark Theme | React Native Tutorial | Beginners
🔴 Login & SignUp UI in React Native Reanimated | React Native Projects | Beginners Tutorial
zhlédnutí 39KPřed 8 měsíci
🔴 Login & SignUp UI in React Native Reanimated | React Native Projects | Beginners Tutorial
🔴 Build Food Recipe App in React Native Reanimated | React Native Projects | Beginner | Tutorial
zhlédnutí 64KPřed 8 měsíci
🔴 Build Food Recipe App in React Native Reanimated | React Native Projects | Beginner | Tutorial
Responsive Design in React Native | Responsive UI | React Native Tutorial
zhlédnutí 18KPřed 9 měsíci
Responsive Design in React Native | Responsive UI | React Native Tutorial
🔴 Travel App UI | React Native Tutorial | React Native Projects
zhlédnutí 21KPřed 9 měsíci
🔴 Travel App UI | React Native Tutorial | React Native Projects
🔴 Onboarding UI with Lottie Animations | React Native Tutorial
zhlédnutí 29KPřed 10 měsíci
🔴 Onboarding UI with Lottie Animations | React Native Tutorial
🔴 Build a React Native Voice Assistant App with ChatGPT & DALL-E | AI Image Creation
zhlédnutí 48KPřed 10 měsíci
🔴 Build a React Native Voice Assistant App with ChatGPT & DALL-E | AI Image Creation
Add Tailwind CSS In Your React Native App
zhlédnutí 38KPřed 11 měsíci
Add Tailwind CSS In Your React Native App
🔴 Build Movie App Using React Native | React Native Projects | Beginners
zhlédnutí 90KPřed 11 měsíci
🔴 Build Movie App Using React Native | React Native Projects | Beginners
🔴 Build Food Delivery App Using React Native And Sanity | React Native Projects | Beginners
zhlédnutí 36KPřed rokem
🔴 Build Food Delivery App Using React Native And Sanity | React Native Projects | Beginners

Komentáře

  • @c.sta2071
    @c.sta2071 Před 8 hodinami

    New subscriber 🎉

  • @vishwavishwa456
    @vishwavishwa456 Před 19 hodinami

    React native+ native wind>>>>>>>>flutter

  • @ridamnibjia
    @ridamnibjia Před 22 hodinami

    if you're using the nativewind css and opening the app in web then in the App.js add this after the import: import { NativeWindStyleSheet } from "nativewind"; NativeWindStyleSheet.setOutput({ default: "native", });

  • @mosakibb
    @mosakibb Před dnem

    thanks for the video. loved it ❤❤

  • @IELTSwithJamoliddin

    Nice,man,Can I do the same with flutter,or even better than that?

  • @zarifraja5923
    @zarifraja5923 Před 2 dny

    Where can I find dummy data?

  • @mrousavy
    @mrousavy Před 2 dny

    🔥

  • @p47parzival
    @p47parzival Před 2 dny

    Is that android virtual app or something else ??

  • @Raamayy
    @Raamayy Před 2 dny

    sir why don't you use typescript?

  • @TrainwithrohitT
    @TrainwithrohitT Před 3 dny

    whenever I do things like minus icon plus icon shopping bag icon there is always this problem like RNSVG not found in the ui manager can you please help in this case?

  • @sathisha8392
    @sathisha8392 Před 3 dny

    what about registration process.. is there any gudance for that?

  • @user-dd4tv4cz2s
    @user-dd4tv4cz2s Před 3 dny

    How to close the server

  • @AquaAnglerChronicles

    Google read my minds

  • @VelusamyVijayalakshmi

    Can i get the figma file? I can try it in flutter

  • @macabro019
    @macabro019 Před 4 dny

    Excellent video, how do you make the routes typed when using <Link>? I just created a project with expo v50

  • @daygzax2284
    @daygzax2284 Před 4 dny

    Sir, or anyone else, can you tell me which version of React Native and Expo are you using, because I don't have App.js file.. Thank you in advance! :D

  • @harsadeepdas3070
    @harsadeepdas3070 Před 4 dny

    Sir please Hack app baniye

  • @nurmuhammadhassan4573

    nice video i must say, can you add video and audio call functionality

  • @myadavji
    @myadavji Před 5 dny

    I think you must add search box too👍

  • @LambertxMc
    @LambertxMc Před 5 dny

    How can we get the background Sir?

  • @prestonschumacher1314

    Didn’t know you could make iOS apps with react

  • @Nabi_ka_ummati
    @Nabi_ka_ummati Před 6 dny

    Designer are here why he do hard 😂

  • @pedrinhproductions1

    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

  • @rajat-s-kale1771
    @rajat-s-kale1771 Před 7 dny

    Awesome

  • @sumitupadhyay6377
    @sumitupadhyay6377 Před 7 dny

    bro you just gave me setup idea

  • @netdeveloper740
    @netdeveloper740 Před 8 dny

    5 fps?

  • @gursimranoffice
    @gursimranoffice Před 8 dny

    Hi @codewithnomi which monitor are you using right now for coding. Please share.

  • @WeiFinder
    @WeiFinder Před 8 dny

    I feel like web dev is slowly melting into natural language web design, in not long at all you'll just design the app in design software (with the help of Ai), have a discussion with a coding AI agent to explain how it is intended to work, and the AI agent will create and execute the stack for you and hand over the keys.

  • @HamzaEhsanVlogs
    @HamzaEhsanVlogs Před 8 dny

    Good 🎉 My learning journey! 😁

  • @bigbosslive6664
    @bigbosslive6664 Před 8 dny

    can you share the link of ui

  • @muhammadrayanmansoor4301

    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.

  • @abhinavswaroop3566
    @abhinavswaroop3566 Před 8 dny

    Where can i get the src

  • @aymanelamhamdi7981
    @aymanelamhamdi7981 Před 8 dny

    some one have the problem at carousel like the error is cannot read property 'style' of undefined some solutions

  • @HomoErectus_56
    @HomoErectus_56 Před 9 dny

    Is this possible through html?

  • @b.g2112
    @b.g2112 Před 9 dny

    In cart screen minus button is not working and also it not showing multiple dishes if we added more than one item.😢 I think you forgot to change it in cart screen. 😑 PLS reply

  • @LaCerezaCuriosaOficial

    what program is?

  • @user-rg1ip9qb9q
    @user-rg1ip9qb9q Před 9 dny

    Can I get some pictures of the 'bike guy'?

  • @b.g2112
    @b.g2112 Před 9 dny

    Where id bikeguy.gif ?🤔

  • @jeffqseid2169
    @jeffqseid2169 Před 10 dny

    Why some project you use useRouter and some using Navigator? Any obvious reason? Seems like both acts the same.

  • @Yunho1303
    @Yunho1303 Před 10 dny

    thanks

  • @WayanovaAmaefule-pi2hb

    Which ide is this?

  • @basilomsha4793
    @basilomsha4793 Před 10 dny

    Frontend sucks. Team backend

  • @ACoupleStoners
    @ACoupleStoners Před 11 dny

    I'm just learning c# and this is exactly what to want to do one day soon! I don't even know what program this is. Lol

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 11 dny

    Thank you so much

  • @ismailbakhach8990
    @ismailbakhach8990 Před 11 dny

    when i create an expo app i got a different filles structure with no app.js file and all the files with a "tsx" extension why ??

  • @jeffqseid2169
    @jeffqseid2169 Před 11 dny

    god bless u my dear

  • @RicardoTanjili
    @RicardoTanjili Před 11 dny

    How much ?

  • @sadique_x_
    @sadique_x_ Před 11 dny

    anyone fixed the issue with the masonry layout vanishing when the categories are loaded?

  • @dimitriv.3835
    @dimitriv.3835 Před 12 dny

    If anyone is confused about the "auth" code in _await signInWithCredential(auth, googleCredentials);_ just add this, on your firebase config :) import { getAuth } from 'firebase/auth'; export const auth = getAuth(app);

  • @eswarv1880
    @eswarv1880 Před 12 dny

    What software are u coding to use