react-native
react-native copied to clipboard
Dimension.get('window').height returns screen height, not a device window height in RN v0.71.7
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:
- "@react-navigation/native": "6.1.6",
- "@react-navigation/stack": "6.3.16",
- "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
:warning: | Newer Version of React Native is Available! |
---|---|
:information_source: | 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. |
:warning: | Missing Reproducible Example |
---|---|
:information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
@AnshulRaghav Hi, could you please provide an reproducer?
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 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.