React Native get view height - reactjs

Question

Green: full screen view
Red: is a view style absolute bottom:0
Blue: is a view style absolute height:‘100%’
WHAT I WANT
I want find the way to get height of Red View (height isn’t determined).
This height I want to use it for marginBottom for Blue View.
EXPO SNACK
<View style={{
backgroundColor: 'green',
flex:1
}}>
<View style={{
backgroundColor: 'blue',
position:'absolute',
height:'100%',
left:0,
right:0,
top:0,
marginBottom: HEIGHT_OF_RED_VIEW
}}>
</View>
<View style={{
backgroundColor: 'red',
position:'absolute',
left:0,
right:0,
bottom:0,
padding:20
}}>
<Text>Lorem Ipsum</Text>
</View>
</View>

Answer 1

You can try onLayout method of view it will call once the rendeing of your view is completed take a look at example below
<View
onLayout={({ nativeEvent }) => {
const { x, y, width, height } = nativeEvent.layout
setHeight(height)
}}
</View>
you can have height variable defined in your state, and you can use that variable for allocating the margin bottom
You can try code below I have made changes in your expo slack
import { Text, View} from 'react-native';
import {useState} from 'react'
export default function App() {
const [height, setHeight] = useState('')
return (
<View style={{
backgroundColor: 'green',
flex: 1
}}>
<View style={{
backgroundColor: 'blue',
position: 'absolute',
// height: '100%',
left: 0,
right: 0,
top: 0,
bottom: height,// here is you want to have some addintional spacing try adding some value in you hight (ex. height+20)
}}>
</View>
<View
onLayout={({ nativeEvent }) => {
const { x, y, width, height } = nativeEvent.layout
setHeight(height)
}}
style={{
backgroundColor: 'red',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
padding: 20
}}>
<Text>Lorem Ipsum</Text>
</View>
</View>
);
}