Not getting accurate screen height and width with Dimensions in 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??

Its may be due to the bottom buttons on some android devices. or you can remove justifyContent: "flex-end" to show on all devices — Pankaj Chaturvedi, Jan 04 '21 at 06:13
@pankajchaturvedi I have design in which I have to give `justiyContent: "flex-end"`. Also I am using `SafeAreaView`, so it should work? right?? — pratteek shaurya, Jan 04 '21 at 06:18
You are using SafeAreaView but you are forcing it to have 20% of the screen height. It can go out of the screen. @pankajchaturvedi is right, on some devices, bottom buttons is also added to the screen height. I don't understand why you don't want to use flex but if you are insisting on using dimensions api, you can look up to this answer: https://stackoverflow.com/a/60561393/5793132 — Ugur Eren, Jan 04 '21 at 06:26

score 0 · Answer 1 · answered Jul 29 '21 at 15:56

"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

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

1 Answers1