Dimensions not correctly set after locking to portrait

[austinthetaco]

Currently I am calling Orientation.lockToPortrait on app load, then for a single component i'm calling lockToLandscape and upon leaving that component again calling lockToPortrait. However when i console log out Dimensions.get('window'); after the last lockToPortrait the width is still larger than the height. Any idea if there is a fix for this?

[michelegoh]

This is a react native problem I think, I've been using View's onLayout method to get the screen width and height

[wonday]

Dimensions.get('window') seems not changed after app started.
You can addLockListener(function(orientation)),
and use static window width, height (remember when started) to calculate yourself.
Eg.
s_width = 1080, s_height = 1920
when Portrait,
current width = s_width

when Landscape
current width = s_height;

[austinthetaco]

@wonday It is changed after app start. Upon app launch with lockToPortrait the Dimensions.get('window') returns correct portrait dimensions. Then when i call lockToLandscape Dimensions.get('window') return the correct landscape dimensions. the issue is after this when i call lockToPortrait again but the dimensions don't change.

[dellert]

same issue

[grnkvch]

I met this issue only on iOs and got solution, it's a bit tricky, but u can add dimension listener, which set right values

componentDidMount() {
    Dimensions.removeEventListener('change', this.dimensionListener);
  }

componentWillUnmount() {
    Dimensions.removeEventListener('change', this.dimensionListener);
  }

  setDimensionsIos = (dim) => {
    const { screen: { height: screenHeight, width: screenWidth },
      window: { height: windowHeight, width: windowWidth },
    } = dim;

    if (screenHeight === windowWidth && screenWidth === windowHeight) {
      setTimeout(() => Dimensions.set({ 'window': dim.screen }), 0);
    }
  }

  dimensionListener = (args) => {
    if (Platform.OS === 'ios') this.setDimensionsIos(args);
  };

[chestercharles]

I am encountering the same issue. The incorrect dimensions are causing image resizing problems in our application.

Manually setting the dimensions may work in some cases, but the Dimensions api in react-native core should be the "source of truth" here.

Per the react native Dimensions.set docs:

This should only be called from native code by sending the didUpdateDimensions event.

It would definitely be nice to have this bug fixed in the library, rather than using a hack.

[EyMaddis]

In my case, this was also a feasible solution:

function fixRNDimensions(orientation: OrientationType) {
  const windowDim = Dimensions.get('window')
  const screenDim = Dimensions.get('screen')
  if (
    (orientation.match(/LANDSCAPE/i) && windowDim.width < windowDim.height) ||
    (orientation.match(/PORTRAIT/i) && windowDim.width > windowDim.height)
  ) {
    console.log('fixing dimensions after rotation', windowDim)
    Dimensions.set({
      screen: {
        ...screenDim,
        width: screenDim.height,
        height: screenDim.width,
      },
      window: {
        ...windowDim,
        width: windowDim.height,
        height: windowDim.width,
      },
    })
  }
}
Orientation.addOrientationListener(fixRNDimensions)

you could also run fixRNDimensions manually when setting the rotation

[MorganeAlinai]

I think I got this solved by using screen dimensions with:

https://github.com/react-native-community/hooks#usedimensions

{height, width} = useDimensions().screen