CODEWITHSUNDEEP
javascriptreact-nativeexpo
aabcabca12
aabcabca12

Reputation: 373

React Native get available height for content

I have a custom component which needs its height to be set explicitely. I'm having trouble with calculating the available space on different devices.

The top bar is no problem cause I use the StatusBar height, but on the bottom, the iPhone X has some space for that "bar" and I don't know how to calculate this (I could match the device but maybe there are more devices with this space on the bottom).

Is there any way to calculate this? I'm using Expo btw.

Upvotes: 0

Views: 674

Answers (1)

OriHero
OriHero

Reputation: 1228

I don't know what is your primary goal but here are my suggestions:

  1. If you want to calculate the available height you can create a View with style {flex:1} then use onLayout built-in function of a View. Here how it works:

    onLayout=({nativeEvent})=>{
   // Here is height
   console.warn(nativeEvent.layout.height)
}

<View style={styles.container}>
   <YourComponents/>
   {/*The part you want to calculate height*/}
   <View style={{flex:1}} onLayout={onLayout}/>
</View>

  2. If you want to just avoid the notch of the device you can use SafeAreaView. Here is the full documentation. PS. react-native's built in SafeAreaView component has been moved to react-native-safe-area-view

Upvotes: 2

Related Questions