Hi there, I’ve been having a visual problem for a while after updating to Expo 47, it’s a very subtle detail that affects (in principle) iOS devices with dynamic islands.
opened 04:36AM - 16 Dec 22 UTC
needs review
### Summary
Hello there,
(first of all sorry for the title of the incident… , but there are too many things together)
After upgrading to Expo 47 I started experiencing a visual issue on devices with dynamic island.
In short, if I run my app in the Expo Go on the simulator everything looks fine (as it did with SDK 46), but if I run it from the Expo Go on the device (or if I build a build with EAS) it looks different.
Here below, I leave some screenshots to better understand the incident:
Expo Go (simulator):
Expo Go (device):
On the other hand, if I compare the versions between the clients, there is a slight difference in their number:
Expo Go version (simulator): 2.26.4.101
Expo Go version (device): 2.26.4.1016582
I don't quite understand what could be the cause of the problem, but this affects the calculation of the header for the native stack of the `react-navigation` (`useHeaderHeight`) and ends up being wrong.
I assume that the version of Expo Go running on the device (2.26.4.1016582) introduces some regression or dependency incompatibility, which is what causes that problem (and this also affects the EAS build).
Any help is appreciated 🙏
### What platform(s) does this occur on?
iOS
### Environment
expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.1
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
Yarn: 3.3.0 - ~/.nvm/versions/node/v16.18.0/bin/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.18.0/bin/npm
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
npmPackages:
expo: ~47.0.8 => 47.0.8
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
npmGlobalPackages:
eas-cli: 3.0.0
expo-cli: 6.0.8
Expo Workflow: managed
### Minimal reproducible example
https://github.com/outaTiME/dynamic-island-error
An easy way to patch this for the ios simulator is by doing the following in your List:
6px is the difference in the simulator and actual install on device
Thanks @vavemain ,
opened 09:47AM - 09 Nov 22 UTC
bug
platform:ios
repro provided
### Current behavior
Currently, the library reports a value of 103pt, which a… ppears correct when you use Xcode's View Hierarchy debugger, but does not match the required value when running the app (appears to be ~97pt).
(Observe the cyan gap between the Navigation Bar and the Yellow Rectangle. The Rectangle's .top position is set to the value of `useHeaderHeight()`. This can be seen in the repro case [here](https://github.com/objectivecosta/DynamicProblems/blob/1d9fc9e98d739213ef3fb11fce2d97fa24368e9a/App.js#L41-L57))
This behaviour does not occur on pre-Dynamic Island phones. The gap seems to be 6pt on iPhone 14 Pro Max, don't know if more on other devices.
### Expected behavior
It is expected that the library will be able to handle this case and report the correct value when the dynamic island is involved.
### Reproduction
https://github.com/objectivecosta/DynamicProblems
### Platform
- [ ] Android
- [X] iOS
- [ ] Web
- [ ] Windows
- [ ] MacOS
### Packages
- [ ] @react-navigation/bottom-tabs
- [ ] @react-navigation/drawer
- [ ] @react-navigation/material-bottom-tabs
- [ ] @react-navigation/material-top-tabs
- [ ] @react-navigation/stack
- [X] @react-navigation/native-stack
### Environment
- [✅] I've removed the packages that I don't use
| package | version |
| -------------------------------------- | ------- |
| @react-navigation/native | 6.0.13
| @react-navigation/native-stack | 6.9.1
| react-native-safe-area-context | 4.4.1
| react-native-screens | 3.18.2
| react-native | 0.70.5
| node | v16.13.2
| npm | 8.1.2
Unfortunately on SDK48 it keeps happening
