Back to Browse

How to Create Responsive Layouts in React Native

23.4K views
Mar 28, 2021
23:52

If you want to know how to make responsive layouts in React Native, this video is a good starting point. This video focuses adapting the same UI to both portrait and landscape mode. Keep in mind that this is just one way to create responsive layouts. It's my personal favorite, but it's not the only way. 02:20 Creating a custom hook to listen for orientation changes 08:27 Using the custom hook in your components 15:52 Creating a 'split screen' layout for landscape mode 18:38 Adding a vertical divider to the landscape layout 21:06 Creating conditional styles without Styled components (inline styles) 21:39 Using different text sizes in portrait and landscape orientation 💻Follow along here with the initial code: https://github.com/theflutterfactory/React-Native-Tutorials/tree/response_layouts (I know it's misspelled) ⚡Connect on Facebook: https://www.facebook.com/flutterfactory ⚡Connect on Twitter: https://twitter.com/flutterfactory 🎷Music: https://www.bensound.com

Download

1 formats

Video Formats

360pmp439.1 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

How to Create Responsive Layouts in React Native | NatokHD