CODEWITHSUNDEEP
iosreactjsreact-nativereact-native-ios
jphorta
jphorta

Reputation: 2174

How to know the useful height of an iOS device in React Native?

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?

Upvotes: 8

Views: 24663

Answers (6)

ttig
ttig

Reputation: 11

For anyone still looking for a solution to this without installing any packages, this is what i did.

A SafeAreaView has to be used as the wrapper of the screen with a simple View as the only child and then the rest of your desired component tree inside said View.

SafeAreaView uses padding at the top and bottom to take care of insets in devices with notch.

Then at the View inside the SafeAreaView, onLayout callback can be used to get the actual "drawable" height of the View without the insets.

The height from onLayout can then be saved to a state to do any desired logic.

 <SafeAreaView>
   <View onLayout={({ nativeEvent: layout }) => console.log(layout.height)}>
     {children}
   </View>
 </SafeAreaView>

Upvotes: 1

Din&#231;er Canpunar
Din&#231;er Canpunar

Reputation: 111

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 />;
}

Upvotes: 11

jphorta
jphorta

Reputation: 2174

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.

Upvotes: 8

Yasin Ugurlu
Yasin Ugurlu

Reputation: 701

You can get the screen, which users phone, width and height from Dimensions component.

import { Dimensions } from 'react-native'

const { width, height } = Dimensions.get('window'); // if you use the width you can get the screen width by pixels. And also height is the height pixels of the phone.

const screenWidthSomePart = width * 0,6 // Some times you can get the percentage of the screen so you can use this. screen %60

If you wanna see the safe are for the Iphone X. You can use the SafeAreaView Componenet

import { SafeAreaView } from 'react-native'
 return(
 <SafeAreaView>
   ..... // your screen componenet
 </SafeAreaView>
);

Upvotes: 1

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

You can use the react-native-safe-area. it provides function to Get safe area inset top, bottom, left, right.

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

Upvotes: 5

Vincent Menant
Vincent Menant

Reputation: 475

Use Dimension module from 'react-native' like there :

import { Dimensions, Platform, StatusBar } from 'react-native'

const windowHeight = Dimensions.get('window').height
const screenHeight = Dimensions.get('screen').height

Upvotes: -3

Related Questions