Shopping App UI With React Native | Part - 1 | Complex UI in React Native

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.

Please check out Jamez on Twitter. He is the designer of the UI that I'm implementing in react native.

Follow Me Online -

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.

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 👐

Thank you 👐

_______________________________________
(Track Title) by Lukrembo


• 🎧 LoFi Background...
_______________________________________

[rodrigomoura]

Fantastic work, brother. Thank you!. Waiting for part 2.

[whmcpog]

so nice. waiting for next part! i have subscribed

[chessknock]

Really like the UI of this app. Keep these coming 🎉

[rekalit]

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.

[smbasha]

your work is very helpful me, thanks for giving this videos

[gezafiqrullah]

subscribed!!.thank you for this tutorial sir !!

[ronaldngarombo]

I requested for videos with voice on twitter, glad you did 😄👍

[Gustavo-vupy]

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%' }}

[bijendernagar]

awesome bro your english is good and understable you explain very well

[samarjeetmohanty]

Hi bro could you make crash course or tutorial for react native.
UI was amazing keep doing😊

[adarshjaiswal]

Keep going brother, and how you even thought your English is not good? It's all perfect and very much understandable.

[wisdomelue]

awesome stuff man!

but please try zooming your screen in, kind of hard to see as it too small

[ubcodes]

This is really thank you . But please the font size and screen size is really discouraging @Rohid

[AtoZshow]

very good video, your english is also fantastic

[swingisking]

Can we use this on with woocommerce backend

[neerajbhatt]

Please make videos on React Native cli

[husler]

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?

[devT]

What is difference between "npx react-native run-android" and "npx react-native start"? When should I use which command?

[husler]

Hi rahid, can you please upload second part?

[husler]

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?