Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JDMathew opened this issue May 7, 2025 · 5 comments
Open

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

JDMathew opened this issue May 7, 2025 · 5 comments
Labels
API: Dimensions Needs: Attention Issues where the author has responded to feedback. Platform: iOS iOS applications. Type: Unsupported Version Issues reported to a version of React Native that is no longer supported

Comments

@JDMathew
Copy link
Contributor

JDMathew commented May 7, 2025

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

@react-native-bot react-native-bot added the Type: Unsupported Version Issues reported to a version of React Native that is no longer supported label May 7, 2025
@react-native-bot
Copy link
Collaborator

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
Copy link
Collaborator

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.

@devanshsaini11
Copy link
Collaborator

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

@Tharfernando
Copy link

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

@JDMathew
Copy link
Contributor Author

JDMathew commented May 8, 2025

@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)!

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels May 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Dimensions Needs: Attention Issues where the author has responded to feedback. Platform: iOS iOS applications. Type: Unsupported Version Issues reported to a version of React Native that is no longer supported
Projects
None yet
Development

No branches or pull requests

4 participants