react-native icon indicating copy to clipboard operation
react-native copied to clipboard

iOS Dimensions.get('window') doesn't exclude SafeAreas

Open JDMathew opened this issue 7 months ago • 5 comments

Description

The values returned from the Dimensions API for 'window' are incorrect on iOS.

iOS Dimensions.get('window').height is returning the height with SafeAreas and it should be without SafeAreas

i.e Dimensions.get('window').height should return the screen height without SafeAreas while Dimensions.get('screen').height should return the screen height with SafeAreas as is convention.

This is correct on Android, and incorrect on iOS

Steps to reproduce

Run the following on an Android and an iOS device with SafeAreas. Notice that the Android values differ but the iOS values are the same.

import { Dimensions, Text, SafeAreaView, StyleSheet } from 'react-native';


export default function App() {
  const heighScreen =  Dimensions.get('screen').height
  const heightWindow =  Dimensions.get('window').height
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
       {heighScreen}, {heightWindow}
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

React Native Version

0.79.0

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.3.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 173.42 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.10.0
    path: ~/.nvm/versions/node/v23.10.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v23.10.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v23.10.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.2
    wanted: 0.78.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No Stacktrace, as no crash just incorrect values returned from API

MANDATORY Reproducer

https://snack.expo.dev/ci1UBlgM8PsixJnwYqW1d

Screenshots and Videos

No response

JDMathew avatar May 07 '25 09:05 JDMathew

[!WARNING] Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

react-native-bot avatar May 07 '25 09:05 react-native-bot

[!WARNING] Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

react-native-bot avatar May 07 '25 09:05 react-native-bot

@JDMathew Thanks for raising this issue, could please verify if this is happening on latest react-native version 0.79.x?

devanshsaini11 avatar May 07 '25 13:05 devanshsaini11

"I’ve faced similar issues on iOS, and I think this is caused by the layout and style rendering in <Text>, where margin: 24 is not being counted

segnalazionipegasogest avatar May 08 '25 13:05 segnalazionipegasogest

@devanshsaini11, yes this is still an issue on 0.79.x.

Here is the PR with a reproducer using RNTesterPlayground to show it on the latest RN version.

Initially I provided a reproducer using snack with the latest expo version as it was faster to setup. However it seems that even though the latest version of expo (52) was used, it is already an unsupported RN version (0.76.x)!

JDMathew avatar May 08 '25 23:05 JDMathew

@devanshsaini11 can we remove the Type: Unsupported Version as it is still an issue on the current version.

JDMathew avatar Jun 28 '25 00:06 JDMathew