Responsive Design in React Native | Responsive UI | React Native Tutorial

Hello everyone 👋, today I'm going to teach you how you can create responsive apps in react native, you will learn how to create responsive layouts and how to make the text content responsive using flex, device dimensions and pixels.
make sure you like this video and subscribe the channel for more react native videos.
Support this channel by buying me a coffee: www.buymeacoffee.com/syednoman
source code : github.com/syednomishah/Respo...
React Native Responsive Screen library : www.npmjs.com/package/react-n...
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
Travel App UI : • 🔴 Travel App UI | Reac...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
Movie App : • 🔴 Build Movie App Usin...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
TH-cam Clone App: • 🔴 TH-cam 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...
Image credits: www.freepik.com
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #aiapp #iosdeveloper #buildinpublic #opensource #reactnativeapp #chatgpt4 #reactjstutorial #typescript #ai #chatgpt #dalle2 #machinelearning
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
ai app development
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
00:26 - Create App
01:31 - Designing Layout
05:31 - Using Percentages
08:57 - Using Flex
13:34 - Outro

[@edopenroz]

Excellent video Nomi, as always!

[@abdiladifmohamud5957]

This man is a life saver. I like it

[@nguyentrieuduy9999]

Thanks you. Excellent tutorial. I practiced with all project demo of your channel

[@smile5281]

I been looking for this all my react native life 😊

[@ShadowsOfTheBeast1]

Wow! Beautifully done!❤

[@souravdutta5034]

what a tutorial. appreciate your hard work.
noone talks about this little things. I think it would be helpful if you make a series for those who wants to advanced react native things. Thank You. hoping for more video like this :)

[@officialibn8]

Swears, I've learnt a lot from this few minutes than the 8+ hours crash course some big TH-camr's create 🥲💔💔😩

[@antharithm]

Great and simple tutorial! Thank you

[@aleejunaid]

Glad I found your channel! A big help~

[@guidiuz5129]

Amazing Tutorial! Thank you so much dude! This is very useful for me, I love It

[@tatendafambirachimwe3842]

Really needed this

[@kaustuvgiri859]

The best TailwindCss installation guide in TH-cam

[@rabieridene9193]

Best Teacher for me, Thank you Sr.

[@lenierperez1831]

Thanks 🙏. Excellent tutorial

[@adilrao7777]

Amazing ❤️
Learned something new...

[@11shivamAhir00]

thank you so much sir !! very helping video

[@SyedWaseemAmjad336]

excellent tutorial explained in a very simple way

[@braimoselimane5538]

Thanks, U r the GOAT

[@rithink8739]

Really good one, Keep it up✌

[@FredAdu]

Excellent tutorial, i really needed this, i was wondering if this also helps with landscape and portrait modes as well

[@pradeepprakash78]

Excellent video..Thanks a billion 😊❤

[@zaidshaikh2449]

Bro your contents are amazing. Really appreciate what you are doing. We would love to see a project using firebase jwt async storage redux all in one video

[@rajat-s-kale1771]

This is perfect

[@voldemore6300]

Informative❤

[@SanthoshPlace]

excellent thanks for best guidance.

[@inamulhasans9461]

Great video🎉

[@frontend5049]

Excellent bro...❤

[@Janjan-bj4cg]

can you make more of this?
THANKS A LOT!
YOU REALLY GAVE ME AN IDEA REGARDING TO THIS TOPIC

[@AbdullahWins]

well explained ❤

[@penguinxed]

thank you for this

[@shankardakolia4912]

This video is so helpful but i have one question on image responsiveness on your movie project trending section the image doesn’t equally on ipad, iPhone 14 promax and iPhone se simulators

[@vsandhudeveloper3282]

awesome tutorial.

[@softcoder404]

This is really helpful... I have few question, how can i convert px to percentage cos most of the design on figma are in px??

[@abhaynath5236]

Is it working smooth on changing portrait orientation to landscape?

[@dannybrown9160]

Great video

[@beathollic]

thank you bro👍

[@ajaychawda682]

Hi Nomi, i have created pdf reader app in react native. I want to add feature where user click on pdf than opening that pdf in my app ( open with option)
On click of pdf my application is showing with other pdf reader app.
How i can get that pdf file info once user click on open with my app.

[@yourSOULismy]

Great video. Maybe next something with TypeScript and Redux?

[@harshdeep7015]

What about rn size matters??

[@naumanajmal9866]

great video

[@AAfzal5]

Love your tutorial, They are really helpful to me as a beginner, I just had a request if you could make a video on how to use Custom Fonts in our Expo Apps using Nativewind, It would be really helpful, and show us how we can set it in a way that all other elements automatically inherit that font.
Thank You!

[@codewithnomi]

will create a tutorial on this someday 😉

[@AAfzal5]

@@codewithnomi Thank you, Your contents are amazing, Can't thank you enough, I'm also using Nativewind for My Expo React Native App

[@minusmarigold98]

Perfect tutorial, but you should explain more about how to responsive font size if you mentioned font. at all thanks to you ❤

[@user-td4oh3pi2y]

What about screen rotation ?

[@kumarc326]

How to make custom notification design banner bro???

[@anilkumardas7662]

Please make a video on how to make response using tailwindcss

[@shivamjha.56]

Ur tutorials are best on youtube , can u please make a playlist like udemy courses , where we can learn react native with strach with projects

[@codewithnomi]

will do

[@adir191]

How it works with tailwind css & nativewind? can I use this library too?

[@codewithnomi]

you can use only flex with nativewind

[@adir191]

@@codewithnomi it will be responsive?

[@codewithnomi]

@@adir191 yes the layouts will be responsive

[@danieluribegarcia2463]

excellent video, it would be great to have more videos on this responsive theme.

[@vsandhudeveloper3282]

can you please create a news application

[@user-xd2co7rp7x]

can you make tutorial on reanimated

[@programwithdenis3643]

Will styling with tailwind make the app responsive?

[@codewithnomi]

No but if you use flex from tailwind you can make responsive layouts

[@programwithdenis3643]

@@codewithnomi would you mind creating a video that shows that?

[@mohitsen780]

Margin , padding , borderwidth ?

[@codewithnomi]

you can make them responsive using the same process

[@user-pt1xv3gl7f]

when we use paddings and margins how to responsive it

[@codewithnomi]

you can use the same methods for responsive paddings and margins

[@user-pt1xv3gl7f]

like how we use give some example like mb ,mt ,mr,ml ,mv,mh ,m, same like padding also what we use like wp,hp for whome what we use can u explain me
@@codewithnomi

[@vxcode9536]

Brother how use google api Place Autocomplete | Places API
Without billing recat native 😢😢😢

[@abacuswithrehan264]

You can't

[@gnom-om]

fonts?

[@codewithnomi]

check the end of the video, I've explained how to make fonts responsive

[@descode_id]

Give me an example. If u slicing from Figma. A lot of Designer make the design in Pixel

[@ZeeshanKhan-pl3ej]

Till this is not a proper solution

[@josersleal]

*****

[@Anshucodes]

your mac specs ? and version ?

[@codewithnomi]

macbook pro m2 16/512 gb

[@Anshucodes]

@@codewithnomi cpu and gpu cores ?

[@codewithnomi]

@@Anshucodes 12 cpu, 19 gpu