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

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.

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 } }
})

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>
); 

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>

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