Menu
In some very specific cases I need to set the height of a View to the full height of the device useful area (without using flex).
I was using a hardcoded "notch height" to calculate this useful height but I just discovered that the notch can have different heights depending on the device. (3 points of difference between iPhone XS and iPhone XS Max).
Is there a way to know the useful height of a device with notch and safe area?
241
You can get the application window's width and height using the following code: const windowWidth = Dimensions. get('window').
In react native application, to set the dimensions of a component, we use width and height properties. Remember, all the values of dimensions are unitless like we can't use height: 20px to set the height of a component instead of we just use height: 20 and react-native automatically set the pixels.
To get the width and height of the window in React:Use the innerWidth and innerHeight properties on the window object. Add an event listener for the resize event in the useEffect hook. Keep changes to the width and height of the window in a state variable.
use 'react-native-safe-area-context'
https://www.npmjs.com/package/react-native-safe-area-context#usesafeareainsets
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function Screen() {
const insets = useSafeAreaInsets();
console.log(insets);
//{"bottom": 34, "left": 0, "right": 0, "top": 48}
return <View />;
}
As @mohammed-ashfaq said, react-native-safe-area solves the problem. However, it returns the insets with a promise and I needed those values statically.
Given that, I created react-native-static-safe-area-insets that enables access to the insets values as constants.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
