Notes on responsive screen dimensions in React Native
getting dimensions
Dimensionsfor static valuesuseWindowDimensionshook for responsive values, but it can only be used inside a React component (as opposed to something like aTheme.tsfile)- react-native-responsive-dimensions that offers both responsive values and hooks
static vs. responsive values
static values won't constantly update when the window/screen size changes. On Android, the width and height can change for a variety of reasons: the screen orientation was changed, split screen view, freeform views where window size is smaller than screen size (e.g. floating Google maps) and so on. There are also foldable phones now!
responsive values keep updating themselves when the size changes
window vs. screen
tl;dr: on Android
window: reports width/height without the soft menu barscreen: reports entire screen's width/height
window height < screen height.
Window Dimensions ﹣ which is the size of the window / view port on which your app is being displayed Screen Dimensions ﹣ this is the total screen dimensions of your device (your app may occupy the entire screen or only a portion of the screen)