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