Responsive Design in React Native | Responsive UI | React Native Tutorial
Vložit
- čas přidán 25. 06. 2024
- 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 ...
CZcams Clone App: • 🔴 CZcams 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
Excellent video Nomi, as always!
Great and simple tutorial! Thank you
This man is a life saver. I like it
Wow! Beautifully done!❤
I been looking for this all my react native life 😊
Thanks you. Excellent tutorial. I practiced with all project demo of your channel
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 :)
Swears, I've learnt a lot from this few minutes than the 8+ hours crash course some big CZcamsr's create 🥲💔💔😩
Glad I found your channel! A big help~
The best TailwindCss installation guide in CZcams
Really needed this
Thanks 🙏. Excellent tutorial
Amazing Tutorial! Thank you so much dude! This is very useful for me, I love It
Best Teacher for me, Thank you Sr.
thank you so much sir !! very helping video
excellent tutorial explained in a very simple way
Amazing ❤️
Learned something new...
Excellent tutorial, i really needed this, i was wondering if this also helps with landscape and portrait modes as well
Really good one, Keep it up✌
excellent thanks for best guidance.
can you make more of this?
THANKS A LOT!
YOU REALLY GAVE ME AN IDEA REGARDING TO THIS TOPIC
Thanks, U r the GOAT
Informative❤
This is perfect
Excellent bro...❤
Great video
awesome tutorial.
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
thank you for this
Great video🎉
well explained ❤
thank you bro👍
Great video. Maybe next something with TypeScript and Redux?
Perfect tutorial, but you should explain more about how to responsive font size if you mentioned font. at all thanks to you ❤
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
great video
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!
will create a tutorial on this someday 😉
@@codewithnomi Thank you, Your contents are amazing, Can't thank you enough, I'm also using Nativewind for My Expo React Native App
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??
Please make a video on how to make response using tailwindcss
Is it working smooth on changing portrait orientation to landscape?
What about rn size matters??
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.
What about screen rotation ?
How to make custom notification design banner bro???
can you please create a news application
excellent video, it would be great to have more videos on this responsive theme.
can you make tutorial on reanimated
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
will do
How it works with tailwind css & nativewind? can I use this library too?
you can use only flex with nativewind
@@codewithnomi it will be responsive?
@@adir191 yes the layouts will be responsive
Will styling with tailwind make the app responsive?
No but if you use flex from tailwind you can make responsive layouts
@@codewithnomi would you mind creating a video that shows that?
Margin , padding , borderwidth ?
you can make them responsive using the same process
when we use paddings and margins how to responsive it
you can use the same methods for responsive paddings and margins
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
fonts?
check the end of the video, I've explained how to make fonts responsive
Brother how use google api Place Autocomplete | Places API
Without billing recat native 😢😢😢
You can't
*****
Till this is not a proper solution
Give me an example. If u slicing from Figma. A lot of Designer make the design in Pixel
your mac specs ? and version ?
macbook pro m2 16/512 gb
@@codewithnomi cpu and gpu cores ?
@@Anshucodes 12 cpu, 19 gpu