Dimension.get('window').height returns screen height, not a device window height in RN v0.71.7

[AnshulRaghav]

Description

There's a strange behaviour that's been observed on some(not all) android devices that whenever using Dimensions.get('window').height, it is returning screen height since the Android Navigation Bar is also added to the total height of of the component.

Android Properties:

avd.ini.displayname              Nexus 7 API 32
avd.ini.encoding                 UTF-8
AvdId                            Nexus_7_API_32
disk.dataPartition.size          2G
fastboot.chosenSnapshotFile
fastboot.forceChosenSnapshotBoot no
fastboot.forceColdBoot           no
fastboot.forceFastBoot           yes
hw.accelerometer                 yes
hw.arc                           false
hw.audioInput                    yes
hw.battery                       yes
hw.camera.back                   virtualscene
hw.camera.front                  emulated
hw.cpu.ncore                     4
hw.device.hash2                  MD5:121629bcfab97028767e9021d5e4cdd1
hw.device.manufacturer           Google
hw.device.name                   Nexus 7 2013
hw.dPad                          no
hw.gps                           yes
hw.gpu.enabled                   yes
hw.gpu.mode                      auto
hw.initialOrientation            Portrait
hw.keyboard                      yes
hw.lcd.density                   320
hw.lcd.height                    1920
hw.lcd.width                     1200
hw.mainKeys                      no
hw.ramSize                       1536
hw.sdCard                        yes
hw.sensors.orientation           yes
hw.sensors.proximity             no
hw.trackBall                     no
image.androidVersion.api         32
image.sysdir.1                   system-images/android-32/google_apis/arm64-v8a/
PlayStore.enabled                false
runtime.network.latency          none
runtime.network.speed            full
showDeviceFrame                  yes
skin.dynamic                     yes
tag.display                      Google APIs
tag.id                           google_apis
vm.heapSize                      128

In the following image, the navigation bar height is also added.

React Native Component snippet:

<FlatList 
snapToOffsets={[...Array(props.count)].map((x, i) => (i*Dimensions.get('window').height))}
renderItem={() => (
<View style={{ height: Dimensions.get('window').height }}></View> //this is taking full-height = window + android navigation bar.
)}
>

<Flatlist/>

Steps to reproduce

Install packages:

1. "@react-navigation/native": "6.1.6",
2. "@react-navigation/stack": "6.3.16",
3. "react-native": "0.71.7",

React Native Version

0.71.7

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
    OS: macOS 13.4
    CPU: (8) x64 Apple M1
    Memory: 26.00 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh

Stacktrace or Logs

-----Stacktrace-----

Reproducer

NA

Screenshots and Videos

No response

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.15. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[thisames]

@AnshulRaghav Hi, could you please provide an reproducer?

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[AnshulRaghav]

@AnshulRaghav Hi, could you please provide an reproducer?

@Thiago-Santos-SI The problem with the issue is that, it is only reproducible on certain android emulators:

Below is a code snippet in which we are trying to place a yellow ball absolute position from the bottom of a View whose height is equal to that of Dimension window height:

import { Dimensions,View,FlatList } from 'react-native';

export default function App() {
  return (
      <FlatList 
        snapToOffsets={[...Array(4)].map((x, i) => (i*Dimensions.get('window').height))}
        data={[1,2,3,4]}
        renderItem={({ item, index }) => (
        <View style={{ height: Dimensions.get('window').height,backgroundColor:index%2===0 ? 'red' : 'blue' }}>
          <View style={{position:'absolute',bottom:0,width:30,height:30,borderRadius:15,backgroundColor:'yellow'}}>
          </View>
        </View> //this is taking full-height = window + android navigation bar.
        )}
        />
  );
}

Output of the code on Snack:

The yellow ball is positioned relative to the View whose height is equal to window height.

Output of the code on android emulator Nexus 7 API 32

Yellow ball hidden behind navigation bar.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.