Dimensions
useWindowDimensions
is the preferred API for React components. UnlikeDimensions
, it updates as the window's dimensions update. This works nicely with the React paradigm.
import { Dimensions } from 'react-native';
You can get the application window's width and height using the following code:
const windowWidth = Dimensions.get('window').width;const windowHeight = Dimensions.get('window').height;
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a
StyleSheet
).
If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.
#
Example- Function Component
- Class Component
Reference
#
MethodsaddEventListener()
#
static addEventListener(type, handler)
Add an event handler. Supported events:
change
: Fires when a property within theDimensions
object changes. The argument to the event handler is aDimensionsValue
type object.
get()
#
static get(dim)
Initial dimensions are set before runApplication
is called so they should be available before any other require's are run, but may be updated later.
Example: const {height, width} = Dimensions.get('window');
Parameters:
Name | Type | Description |
---|---|---|
dim Required | string | Name of dimension as defined when calling set . Returns value for the dimension. |
For Android the
window
dimension will exclude the size used by thestatus bar
(if not translucent) andbottom navigation bar
removeEventListener()
#
static removeEventListener(type, handler)
Deprecated. Use the
remove()
method on the event subscription returned byaddEventListener()
.
set()
#
static set(dims)
This should only be called from native code by sending the didUpdateDimensions
event.
Parameters:
Name | Type | Description |
---|---|---|
dims Required | object | String-keyed object of dimensions to set. |
#
Type Definitions#
DimensionsValueProperties:
Name | Type | Description |
---|---|---|
window | DisplayMetrics | Size of the visible Application window. |
screen | DisplayMetrics | Size of the device's screen. |
#
DisplayMetricsType |
---|
object |
Properties:
Name | Type |
---|---|
width | number |
height | number |
scale | number |
fontScale | number |