Open vicary opened 4 years ago
Is it that useWindowDimensions is returning the wrong numbers, or is the component not rerendering in response to the changes in orientation? Have you validated that it's running (with a log statement or whatever) and reporting the wrong numbers? Have you tried this on Android?
@chrisglein Android is working fine.
iOS is behaving strangely, not a simple unresponsive but kind of a “delayed” state.
Since step 3 the behaviour repeats, only by re-launching the app could you reproduce step 1 and 2.
Adding to the context, the above behavior is also confirmed with console logs.
This is problem too. The solution i did was to listen to view onlayoutevent to get the right width and height(which you store on state)
For orientation, i used react native locker and do Orientatio.addListener and store the result in state too.
Yeah unfortunately handling those is sometimes feels too manual
Only workaround is to work with custom native modules.
Even DeviceInfo
uses the same logic for landscape detection than native values, the potential affected users is sizeable in that sense.
I also noticed that the sizes are swapped for a very short amount of time when the iPad is unlocked and the app was still active. Though, I am not dealing with with Dimensions directly but instead have a root view that has an onLayout
handler:
import React, { useCallback } from 'react'
import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
import { useDebouncedCallback } from '../../../hooks'
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
let i = 0
const MeasureView: React.FC = (props) => {
const { children } = props
// Create handlers
const [setDimensions] = useDebouncedCallback(
(width: number, height: number) => {
alert('setDimensions ' + i + ': width=' + width)
i++
},
500
)
const handleLayout = useCallback(
(event: LayoutChangeEvent) => {
const { width, height } = event.nativeEvent.layout
alert('handleLayout ' + i + ': width=' + width)
i++
setDimensions(width, height)
},
[setDimensions]
)
return (
<View style={styles.container} onLayout={handleLayout}>
{children}
</View>
)
}
export default MeasureView
The output is:
handleLayout 0: width=1024
setDimensions 1: width=1024
(lock iPad, unlock iPad)
handleLayout 2: width=768
handleLayout 3: width=1024
setDimensions 4: width=1024
@jaulz your issue may not be the same as this one, but the snippet could be a workaround of mine though!
@vicary in fact this was my approach as a workaround but as you can see it doesn't solve the dimensions issue but just uses a debounce to avoid it. The original issue that dimensions are swapped is still a problem.
I'm seeing similar problems on Android, except that after the 1st rotation, the values seem to be stuck on whatever the 2nd state was (e.g. if I started in portrait mode, after I rotate to landscape the width
and height
returned by Dimensions.get
are pegged to landscape. If I started in landscape, after going to portrait mode Dimensions.get
will always return portrait dimensions.)
I am curious on how Facebook addresses this kind of issues, is it supposed to be fixed by the community via PR or shall we wait?
I only have this issue with Android. If device is in portrait and I rotate it to landscape and quickly back to portrait the width and height numbers returns swap. This hurts my layout as my layout depends on these numbers
Android landscape, fullscreen without system's Status Bar or Navigation Bar. https://github.com/facebook/react-native/issues/33735
// Scenario 01
// I noticed that the "red rectangle" had a kind of vertical margin,
const {width, height} = useWindowDimensions();
<View style={{position: 'absolute', backgroundColor: 'red', width: width, height: height}}/>
// Scenario 02
// Solved it using the height as "100%"
<View style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '100%'}}/>
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.
This issue is still valid to this date.
If any anyone is interested and want more information to start working, please let me know.
I'm also getting incorrect info from useWindowDimensions()
.
I got here trying to reorient between portrait and landscape view for my app.
I'm unable to get the fire()
function of Dimensions.addEventListener("change", () => fire())
to invoke/execute no matter how hard I rotate/turn the device.
In the process of trouble shooting I tested to see what the width/height would be in both landscape and portrait orientation by started the app while holding the phone in that orientation.
Both output the following to the console LOG {"height": 926, "width": 428}
regardless of which way the app is started(device held in landscape or portrait orientation).
$ react-native info [11:37:07]
warn Package @sentry/react-native contains invalid configuration: "dependency.platforms.ios.sharedLibraries" is not allowed,"dependency.hooks" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.
info Fetching system and libraries information...
System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 82.44 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.15.0 - ~/.volta/tools/image/node/18.15.0/bin/node
Yarn: 3.5.0 - ~/.volta/tools/image/yarn/3.5.0/bin/yarn
npm: 9.5.0 - ~/.volta/tools/image/node/18.15.0/bin/npm
Watchman: 2023.05.15.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/loi/.rvm/gems/ruby-3.0.0/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9862592
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: javac 20 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.6 => 0.71.6
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
import React, { useCallback } from 'react'
import { StyleSheet, View } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
const App = (props) => {
const { children } = props
const handleLayout = useCallback(
(event) => {
const { width, height } = event.nativeEvent.layout
console.log({width, height});
},
[]
)
return (
<View style={styles.container} onLayout={handleLayout}>
{children}
</View>
)
}
export default App
import React, { useEffect } from "react";
import {
Text,
View,
StyleSheet,
Dimensions,
useWindowDimensions,
} from "react-native";
const App = ({children}) => {
const { height, width } = useWindowDimensions();
useEffect(() => {
const subscription = Dimensions.addEventListener(
"change",
({ window, screen }) => {
console.log('Hi');
console.log({ window, screen });
}
);
return () => subscription?.remove();
}, []);
console.log({ height, width, foo: "bar" });
return (
<View style={styles.container}>
<Text>Hi</Text>
{children}
<Text>Hi</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white"
},
header: {
fontSize: 20,
marginBottom: 12,
},
});
export default App;
Please advise~! Appreciate your help and thanks in advance!
Hello, i am experiencing a similar issue on Ipad ... "useWindowDimensions" is not returning new screen size values after the first 90deg device rotation. With the second rotation and any following, the hook is returning new values but swapped (incorrect). My suspicion is, that this is maybe related to the Scene Logic, we have implemented with Carplay. Did you have a similar core refactoring? Greets, Robert
We experienced same issues with swapped widths and heights on iOS devices. We are running React Native code in a custom UIWindow where we noticed that the bounds for that UIWindow do not change. This could probably be an iOS bug?
We then proceeded to use Dimensions.get("screen")
as screen size gets updated properly.
Description
When tested with iPad simulator, the
useWindowDimensions(...)
hook returns incorrect width and height.React Native version:
Run
react-native info
in your terminal and copy the results here.Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
react-native init
to create a new project.Edit
App.js
with the following codeExpected Results
"landscape"
instead of nothing happens."portrait"
on the screen."landscape"
instead of"portrait"
.Snack, code example, screenshot, or link to a repository:
It is not easy to show device orientation features in snack, I'll attach screen recordings below.
You may download the original video to pause for the rendered text. Screen Recording 2020-07-07 at 7.39.07 PM.zip