Not getting accurate screen height and width with Dimensions in react native - react-native

Question

I am trying to use Dimensions to get device screen height and width.
Below is my code:
return (
<SafeAreaView style={styles.safeAreaView}>
<View style={styles.mainContainer}>
</View>
<View style={styles.footerContainer}>
<Text>Hello</Text>
</View>
</SafeAreaView>
);
And this the style which I am using:
const styles = StyleSheet.create({
mainContainer: {
height: (Dimensions.get('window').height / 100) * 80,
backgroundColor: "blue",
},
footerContainer: {
top: (Dimensions.get('window').height / 100) * 80,
height: (Dimensions.get('window').height / 100) * 20,
width: Dimensions.get('window').width / 100 * 100,
backgroundColor: "yellow",
position: "absolute",
justifyContent: "flex-end"
}
});
OUTPUT
As you can see I am not able to see the <Text>Hello</Text>.
I am doing basic mathematics with (Dimensions.get('window').height / 100) * 80. I am taking total height of the screen, dividing it by hundred and then multiplying the result with the required number: this will give me the percentage height of the screen. I don't want to use flex. I want to go forward with the process which I am following. I just want to know why my Hello text is going below the screen.
It works on some device but not on another. It works in Pixel4 emulator, but not on Pixel3 emulator. If my dimensions calculation is right, then why is it not working on all the devices??

Answer 1

"why is it not working on all the devices??" - this is because Dimensions.get('...').height is currently buggy in Android see this issue.
To get WINDOW_HEIGHT_NO_STATUS_BAR and STATUS_BAR_HEIGHT (so window full height = WINDOW_HEIGHT_NO_STATUS_BAR + STATUS_BAR_HEIGHT)
I used this code:
import { getStatusBarHeight } from 'react-native-status-bar-height'
import { initialWindowMetrics } from 'react-native-safe-area-context'
export const STATUS_BAR_HEIGHT = getStatusBarHeight()
export const WINDOW_HEIGHT_NO_STATUS_BAR = Platform.OS !== 'ios' && Dimensions.get('screen').height !== Dimensions.get('window').height && STATUS_BAR_HEIGHT > 24
? Dimensions.get('screen').height - STATUS_BAR_HEIGHT
: STATUS_BAR_HEIGHT > 24
? Dimensions.get('window').height - STATUS_BAR_HEIGHT
: Dimensions.get('window').height + initialWindowMetrics.insets.bottom === Dimensions.get('screen').height
? Dimensions.get('window').height - STATUS_BAR_HEIGHT
: Dimensions.get('window').height