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

Подписаться 32 тыс.

Просмотров 22 тыс.

50% 1

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 ...
RU-vid Clone App: • 🔴 RU-vid 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

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@edopenroz Год назад

Excellent video Nomi, as always!

@antharithm 11 месяцев назад

Great and simple tutorial! Thank you

@ShadowsOfTheBeast1 4 месяца назад

Wow! Beautifully done!❤

@abdiladifmohamud5957 11 месяцев назад

This man is a life saver. I like it

@nguyentrieuduy9999 Год назад

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

@aleejunaid 10 месяцев назад

Glad I found your channel! A big help~

@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 6 месяцев назад

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

@smile5281 10 месяцев назад

I been looking for this all my react native life 😊

@guidiuz5129 6 месяцев назад

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

@lenierperez1831 Год назад

Thanks 🙏. Excellent tutorial

@tatendafambirachimwe3842 Год назад

Really needed this

@11shivamAhir00 9 месяцев назад

thank you so much sir !! very helping video

@kaustuvgiri859 5 месяцев назад

The best TailwindCss installation guide in RU-vid

@rabieridene9193 7 месяцев назад

Best Teacher for me, Thank you Sr.

@SyedWaseemAmjad336 9 месяцев назад

excellent tutorial explained in a very simple way

@adilrao7777 Год назад

Amazing ❤️ Learned something new...

@pradeepprakash78 26 дней назад

Excellent video..Thanks a billion 😊❤

@rithink8739 4 месяца назад

Really good one, Keep it up✌

@SanthoshPlace 4 месяца назад

excellent thanks for best guidance.

@FredAdu Год назад

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

@rajat-s-kale1771 5 месяцев назад

This is perfect

@braimoselimane5538 10 месяцев назад

Thanks, U r the GOAT

@voldemore6300 Год назад

Informative❤

@penguinxed Год назад

thank you for this

@AbdullahWins 7 месяцев назад

well explained ❤

@frontend5049 9 месяцев назад

Excellent bro...❤

@vsandhudeveloper3282 11 месяцев назад

awesome tutorial.

@inamulhasans9461 Год назад

Great video🎉

@Janjan-bj4cg 6 месяцев назад

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

@dannybrown9160 2 месяца назад

Great video

@zaidshaikh2449 11 месяцев назад

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

@beathollic 8 месяцев назад

thank you bro👍

@naumanajmal9866 10 месяцев назад

great video

@shankardakolia4912 9 месяцев назад

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

@abhaynath5236 9 месяцев назад

Is it working smooth on changing portrait orientation to landscape?

@yourSOULismy Год назад

Great video. Maybe next something with TypeScript and Redux?

@minusmarigold98 5 месяцев назад

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

@softcoder404 4 месяца назад

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??

@ajaychawda682 11 месяцев назад

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.

@AAfzal5 11 месяцев назад

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 11 месяцев назад

will create a tutorial on this someday 😉

@AAfzal5 11 месяцев назад

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

@harshdeep7015 8 месяцев назад

What about rn size matters??

@user-td4oh3pi2y 10 месяцев назад

What about screen rotation ?

@anilkumardas7662 4 месяца назад

Please make a video on how to make response using tailwindcss

@kumarc326 11 месяцев назад

How to make custom notification design banner bro???

@danieluribegarcia2463 Год назад

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

@shivamjha.56 11 месяцев назад

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 11 месяцев назад

will do

@user-xd2co7rp7x 4 месяца назад

can you make tutorial on reanimated

@vsandhudeveloper3282 11 месяцев назад

can you please create a news application

@adir191 10 месяцев назад

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

@codewithnomi 10 месяцев назад

you can use only flex with nativewind

@adir191 10 месяцев назад

@@codewithnomi it will be responsive?

@codewithnomi 10 месяцев назад

@@adir191 yes the layouts will be responsive

@programwithdenis3643 7 месяцев назад

Will styling with tailwind make the app responsive?

@codewithnomi 7 месяцев назад

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

@programwithdenis3643 7 месяцев назад

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

@mohitsen780 11 месяцев назад

Margin , padding , borderwidth ?

@codewithnomi 11 месяцев назад

you can make them responsive using the same process

@gnom-om Год назад

fonts?

@codewithnomi Год назад

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

@user-pt1xv3gl7f 10 месяцев назад

when we use paddings and margins how to responsive it

@codewithnomi 10 месяцев назад

you can use the same methods for responsive paddings and margins

@user-pt1xv3gl7f 10 месяцев назад

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