Shopping App UI With React Native | Part - 1 | Complex UI in React Native
Вставка
- Опубліковано 26 вер 2024
- Hi guys 👋
In this video tutorial, I am going to implement this awesome Shopping app UI 😍. It is a modern UI. It has lots of layout elements to play with and you will learn a lot by implementing this UI in react native. It has grid layouts, a masonry list, a bottom sheet, blurred background, and lots of interesting things. This is a perfect UI for you to practice on.
We will learn how to implement React navigation with TypeScript and nested navigation 😎, How to use React Native Reanimated 🔥, how to add a react-native masonry list view 🖼️, how to add a grid layout in react native 🚀, and also a custom theme 🎨.
I hope you will find this React Native shopping UI tutorial video help full and that you learn lots of things from this video.
Watch Part - 2 • Shopping App UI With R...
Please check out Jamez on Twitter. He is the designer of the UI that I'm implementing in react native.
Follow Jamez - Ja...
Follow Me Online -
Website - rohid.dev
Twitter - ro...
Instagram - ...
Github - github.com/iam...
Get Source Code - github.com/iam...
Setup
Computer - 13-inch M1 Macbook Pro
OS - Mac OS Ventura 13.3.1
Keyboard - Keychron k2 (Version 2)
Download my app Fantasy AI. Fantasy AI is an AI Artwork generator built on top of Stable Diffusion. It will give you full customizability to create the perfect AI artwork on your mobile.
Download - apps.apple.com...
I'm also open to freelance work on web and mobile apps with React, Nextjs, React Native, and Flutter. If you have an interesting project idea then please send me an email. I will get back to you ASAP - rohid.dev/contact
Also if you want to support me in making more of this free content then please consider subscribing and buying me a coffee if you can ☕. I will appreciate that 👐
By me a coffee - buymeacoffee.c...
Thank you 👐
_______________________________________
(Track Title) by Lukrembo
Source: freetouse.com/...
• 🎧 LoFi Background...
_______________________________________
Fantastic work, brother. Thank you!. Waiting for part 2.
This is really good and the voice over is just amazing, explained in a very pretty way. Thanks and looking forward to more videos like this.
Thank you so much 😊. I want to make more content but got busy with work. Now that I’m seeing this much of love I really want to make UA-cam as a part of my work as well
awesome
Keep going brother, and how you even thought your English is not good? It's all perfect and very much understandable.
Thank you so much 👀. IDK, I just thought it was going to be terrible 😂. I don't speak at all even Bangla and now I have to speak English. But now I think I'm not a bad speaker I just need to practice a bit and it will become natural.
your work is very helpful me, thanks for giving this videos
awesome bro your english is good and understable you explain very well
I requested for videos with voice on twitter, glad you did 😄👍
Yeah I remember. I tried. It’s kinda uncomfortable 🫠
Really like the UI of this app. Keep these coming 🎉
Hi, nice video, at 50 min +-, u try using position to cover container at image, u can use this props in images, Left: resizeMode='cover' style={{ width: '100%', height: '100%' }} Right: resizeMode='cover' style={{ height: '100%' }}
so nice. waiting for next part! i have subscribed
Good work.
Waiting for next part
subscribed!!.thank you for this tutorial sir !!
Good Job Boss. Big Fan Of Yours.😍
Thank you boss 😂
awesome stuff man!
but please try zooming your screen in, kind of hard to see as it too small
I love you work mate ❤ thank you
very good video, your english is also fantastic
Thank you
This is awesome. Thanks!🎉
Backend 😊
Can we use this on with woocommerce backend
Please make videos on React Native cli
Where you pick this figma design?
Hi bro could you make crash course or tutorial for react native.
UI was amazing keep doing😊
What is difference between "npx react-native run-android" and "npx react-native start"? When should I use which command?
start just starts a metro server. On the other hand run-android starts a metro server if not already started and launches android app in the emulator
bhai ap hindi me v video bnao chlega
Hi Rohid, please post the second part. I'm waiting and don't want to break my link.
Also one piece of feedback. Can you please explain in videos why are you doing what?
I'm so sorry. The recording has been done. I will upload it by tomorrow.
@@rohiddev ok brother, no problem. Trust me, i learned a lot from this video. I'm kind of beginner in RN. I was doing web development earlier in React, so most of the things look same. BTW, Which keyboard do you use? I love that keystrokes sounds
@@husler7424 thanks man. I’m using Keycron k2
@@rohiddev omg, its too costly. How is Redragon mechanical keyboards? Any idea?
@@husler7424 I used one of their keyboards once. They are ok.
Hi rahid, can you please upload second part?
I'm working on it. It will be live by tomorrow
@@rohiddev thank you so much.
Hi rahid, 33:23 Which search you are using on Mac allows you to search anything? Like you are searching Hand emoji and other things as well. Can you please tell what it is and how can i add it in my Mac as well?
Hey hi, It was www.raycast.com
@@rohiddev thanks a lot. Do i need to do any configuration after downloading it?
@@husler7424 You need to add the keyboard shortcut for it
how many parts are remaining in this project in order to complete
There will be a part 2. In think we will cover the details screen, dark mode, range slider, and we will do some code clean up.
plzz shere link UI picture
Is it ok if i use React Native CLI? Will i need to do any changes in code?
No everything should be same except the blur view
@@rohiddev got it. thank you:)
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
ua-cam.com/video/8TqKIsQJxLQ/v-deo.html
ua-cam.com/video/zF9rmPH00AA/v-deo.html
I’m so glad you liked my teaching style. I will try this. This will be a nice reanimated project. Thank you 😊
@@rohiddev Thank you so much sir... Finally my dream is becoming true...to try that project that too...as in your teaching style... Thank you so much ❤️
your figma user?
sir GitHub link for this project plz
Github link is in the description
Text small that's why I quit this tutorial
this is not primary and secondary language 🤣🤣
Brother, don't be bother about your English
Thank you so much brother 🙂
This is really goooood, thank you . But please the font size and screen size is really discouraging @Rohid
can we use backend in this project
Yeah, you can Definitely do that
demo code