- 86
- 1 700 581
Code With Nomi
Pakistan
Registrace 26. 02. 2023
Subscribe for Web/App Development Content
Hello Everyone 👋
I am a software engineer with 6+ years of experience in web development. Tech has changed my life, and the reason why i created this channel is to help as many people as possible to master their programming skills.
I will try my best so that you don't sleep watching my videos 😄, You will learn how to code, design, and be more creative. I cover topics such as web/app development and design. I will try to keep things simple.
So, let's be friends!
Hello Everyone 👋
I am a software engineer with 6+ years of experience in web development. Tech has changed my life, and the reason why i created this channel is to help as many people as possible to master their programming skills.
I will try my best so that you don't sleep watching my videos 😄, You will learn how to code, design, and be more creative. I cover topics such as web/app development and design. I will try to keep things simple.
So, let's be friends!
🔴 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
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
New subscriber 🎉
React native+ native wind>>>>>>>>flutter
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", });
thanks for the video. loved it ❤❤
Nice,man,Can I do the same with flutter,or even better than that?
Where can I find dummy data?
🔥
Is that android virtual app or something else ??
sir why don't you use typescript?
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?
what about registration process.. is there any gudance for that?
How to close the server
Google read my minds
Can i get the figma file? I can try it in flutter
Excellent video, how do you make the routes typed when using <Link>? I just created a project with expo v50
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
Sir please Hack app baniye
nice video i must say, can you add video and audio call functionality
I think you must add search box too👍
How can we get the background Sir?
Didn’t know you could make iOS apps with react
Designer are here why he do hard 😂
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
Awesome
bro you just gave me setup idea
5 fps?
Hi @codewithnomi which monitor are you using right now for coding. Please share.
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.
Good 🎉 My learning journey! 😁
can you share the link of ui
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.
Where can i get the src
some one have the problem at carousel like the error is cannot read property 'style' of undefined some solutions
Is this possible through html?
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
what program is?
Can I get some pictures of the 'bike guy'?
Where id bikeguy.gif ?🤔
Why some project you use useRouter and some using Navigator? Any obvious reason? Seems like both acts the same.
thanks
Which ide is this?
Frontend sucks. Team backend
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
Thank you so much
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 ??
god bless u my dear
How much ?
anyone fixed the issue with the masonry layout vanishing when the categories are loaded?
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);
What software are u coding to use
Android studio