Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Arrow up icon
GO TO TOP
Mastering React Native

You're reading from   Mastering React Native Learn Once, Write Anywhere

Arrow left icon
Product type Paperback
Published in Jan 2017
Publisher Packt
ISBN-13 9781785885785
Length 496 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Toc

Table of Contents (20) Chapters Close

Mastering React Native
Credits
Disclaimer
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface
1. Building a Foundation in React FREE CHAPTER 2. Saying HelloWorld in React Native 3. Styling and Layout in React Native 4. Starting our Project with React Native Components 5. Flux and Redux 6. Integrating with the NYT API and Redux 7. Navigation and Advanced APIs 8. Animation and Gestures in React Native 9. Refactoring for Android 10. Using and Writing Native Modules 11. Preparing for Production 12. React Native Tools and Resources

Adding media query behavior to React Native


In the current web world, we are accustomed to building sites that adjust their presentation to best fit the screen space available. Most often, that's done by detecting the width or height of the viewport and adjusting CSS rules accordingly. Doing this type of screen detection has actually been possible for a long time through JavaScript. But the grand idea of responsive design didn't become popular until browsers added support for media queries through @media in CSS. Currently, React Native styles don't have an equivalent of @media. However, there are a few useful hooks built into React Native for determining the width and height of the device or individual components that can help us achieve similar, if not cooler results.

Using Dimensions

React Native has its own version of window.innerHeight and window.innerWidth that provides static values for width, height, and scale. These properties are made available through the Dimensions object inside...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at £13.99/month. Cancel anytime
Visually different images