React-native: [Orientation] Re-Layout on orientation change

[nick]

How should I re-layout the page when the orientation of the device changes? I noticed none of the demo apps seem to support this yet. If I refresh the app in a different orientation it lays out fine though.

[sahrens]

This is on our radar, but not implemented yet. Ideally we can bake support directly into the layout system.

On Feb 1, 2015, at 4:09 PM, Nick Poulden [email protected] wrote:

How should I re-layout the page when the orientation of the device changes? I noticed none of the demo apps seem to support this yet. If I refresh the app in a different orientation it lays out fine though.

—
Reply to this email directly or view it on GitHub.

[jaygarcia]

Supporting orientation change is crucial, especially for tablets.

Something like styles : { landscape : {}, portrait : {} } could work from the JS Implementation perspective.

[joewood]

I think it would be more generic to handle resize events, with an orientation hint. Some devices are likely to support side-by-side apps now or in the near future. Adaptive layout is key, and the flex system is good at supporting it.

[sahrens]

The UIExplorer example does handle rotation now - it's simplistic, but a
start :)

On Saturday, March 28, 2015, Joe Wood [email protected] wrote:

I think it would be more generic to handle resize events, with an
orientation hint. Some devices are likely to support side-by-side apps now
or in the near future. Adaptive layout is key, and the flex system is good
at supporting it.

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/25#issuecomment-87331904
.

[GertjanReynaert]

@sahrens Where in the UIExplorer example do you handle rotation? It seems like I can't find it. As I'm trying to add rotation detection support to my npm module this could be really usefull.

PS: maybe the inline documentation in the Dimensions.js utility should be changed, because the width and height don't change on device rotation (Probably because they are set as constants here on application start?)

[sahrens]

The docs say the values _may_ change, but they currently don't because we never implemented that :(

I'm not sure exactly how the UIExplorer rotation works, but I think there is a riot VC that rotates and whenever the root view bounds changes it triggers a layout update, which works (if you don't use Dimensions, which you shouldn't for 99% of layout - use flex/stretch instead).

I think @nicklockwood has more details on existing rotation support.

On May 10, 2015, at 10:28 AM, Gertjan Reynaert [email protected] wrote:

@sahrens Where in the UIExplorer example do you handle rotation? It seems like I can't find it. As I'm trying to add rotation detection support to my npm module this could be really usefull.

PS: maybe the inline documentation in the Dimensions.js utility should be changed, because the width and height don't change on device rotation (Probably because they are set as constants here on application start?)

—
Reply to this email directly or view it on GitHub.

[christopherdro]

@nick Did you get a chance to resolve this issue?

This might help get the job done.

https://github.com/kkjdaniel/react-native-device-display

[nicklockwood]

The original issue was resolved a couple of months ago - if the root view is resized (e.g by an orientation change) then it triggers a re-layout of the react view tree.

[jeffreywescott]

@nicklockwood In which react-native version is this fixed? As of 0.8.0, my app does not seem to re-layout subviews on rotation change.

[nicklockwood]

It was definitely implemented prior to version 0.8.0. What happens when you rotate the screen? Do the example projects rotate correctly when you try them?

[jeffreywescott]

Sorry -- my mistake. As it turns out, all of the layout changes seem to get swallowed by the JS-based Navigator component. :-(

[ptmt]

Same here on 0.11.0-rc. View inside renderScene doesn't react on orientation change.

[gudmundurmar]

@jeffreywescott Did you find out how to get past the layout changes getting swallowed by the Navigator component?

[jeffreywescott]

Nope. I gave up. Sorry, @gudmundurmar

[andrewljohnson]

@gudmundurmar, did you make progress on this? Is autorotation broken for Navigator for you?

[gudmundurmar]

@andrewljohnson Rotation works fine for me now. It was a {flex:1} issue on the View that held my NavBar.
Was using {width: deviceWidth, height: deviceHeight}

[ericmasiello]

@gudmundurmar can you provide some sample code of how you are detecting a change in the devices orientation?

[grittathh]

Looks like this is related to https://github.com/facebook/react-native/issues/2111

[stereodenis]

When I try to change orientation for <View style={{flex: 1, backgroundColor: 'green'}} /> I got this

It resizes to fullscreen when I open Inspector
How to fix it?

[sahrens]

@stereodenis: what platform (iOS, android, ?)? Can you provide more context and code? @andreicoman11 is looking at this in Android right now but it should work in iOS.

[stereodenis]

@sahrens iOS (simulator and device), RN 0.32.0,
simple application with only <View style={{flex: 1, backgroundColor: 'green'}} />

[jamieathans]

I can confirm this behaviour as well.

iOS (simulator and device), RN 0.32.0, <View style={{flex: 1}} />

Tapping a TouchableOpacity will cause the layout to resize.

[javache]

It sounds like the view controller hosting your RCTRootView is not setup correctly. Can you verify on the native side that on rotation this methods gets invoked? https://github.com/facebook/react-native/blob/master/React/Base/RCTRootView.m#L368

[jamieathans]

It sounds like the view controller hosting your RCTRootView is not setup correctly. Can you verify on the native side that on rotation this methods gets invoked? https://github.com/facebook/react-native/blob/master/React/Base/RCTRootView.m#L368

Just checked via the Xcode debugger, I can confirm the above method gets invoked on rotation.

[javache]

My fix here could be related: https://github.com/facebook/react-native/commit/f35b372883a76b5666b016131d59268b42f3c40d and will be out in v33.

@bestander: if we do another release of v32 could you patch it in?

[bestander]

Pieter, no problem

On Friday, 2 September 2016, Pieter De Baets [email protected]
wrote:

My fix here could be related: f35b372
https://github.com/facebook/react-native/commit/f35b372883a76b5666b016131d59268b42f3c40d
and will be out in v33.

@bestander https://github.com/bestander: if we do another release of
v32 could you patch it in?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/25#issuecomment-244452423,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACBdWO3GAGh50KI87DLuldq2OCowqVyYks5qmGqngaJpZM4DaIiJ
.

[alexprice1]

On Android I am seeing something similar. When I first "present" a modal, the layout is 100% wrong. Then if I rotate the device the layout corrects itself. This is the same no matter if I start in landscape or portrait.

I used the React Modal example:
https://facebook.github.io/react-native/docs/modal.html

[mmmulani]

what version of React Native are you using? I just landed a change that affects Modal and orientation but it should only affect iOS

[alexprice1]

I am on version 0.32.

[jsdevel]

this is also affecting me on android.

[bestander]

I'll make a patch for 0.32 then, should be out in an hour

[alexprice1]

Thanks @bestander!!

[jsdevel]

@bestander this still occurs on android with 0.32.1.

[andreicoman11]

@jsdevel I'm looking into it

[emilioaray]

On Android When I try to change orientation the Modal dont resizes to fullscreen. this still occurs on android with react-native 0.33.0.

[alexprice1]

Any update on this? Wanting to get an initial release out and this is blocking my app.

[ksloan]

upgraded to 0.33.0 and seeing it on iOS

My workaround was to use react-native-orientation to trigger a state change like so:

import Orientation from 'react-native-orientation'
class SongLyrics extends Component {

  constructor(props) {
    super(props)
    this.state = {
      orientation: Orientation.getInitialOrientation()
    }
    Orientation.addOrientationListener(this._updateOrientation.bind(this))
  }

  _updateOrientation(orientation){
    this.setState({ orientation })
  }
...

[mmmulani]

the UIExplorer app handles orientation changes by calling setState from onLayout, I believe

[linonetwo]

Seems OnLayout is working, but some component from npm depends on Dimensions can't get right windowWidth or windowHeight properly, they won't change after orientation change.

[linonetwo]

This is blocking some package likes react-native-menu-button and react-native-simple-modal working properly. https://github.com/KenHky/react-native-menu-button/issues/4

[andreicoman11]

Android supports orientation changes since https://github.com/facebook/react-native/commit/f07ca31303fba7dc633881c8a97b1779083c86d4 through namedOrientationDidChange, and Dimensions gets updated accordingly since https://github.com/facebook/react-native/commit/8451585f3861776a1d8f67b8b0dfd1e9cc705ed6.

[mvayngrib]

idk if this will help anyone, but i extracted the higher-order-component i use internally in my project to wrap components that want to be orientation-aware: https://github.com/mvayngrib/react-native-orient

[air-ii]

I don't get updates to Dimensions on orientation change either. I'm on Android, RN 0.33.

Edit:
Scratch that - Dimensions does get updated, it's my component that did not update - I had to handle onLayout.

[uc-hus]

Can you please help for native app's orientation issue for both android and ios

[uc-hus]

Very bad for UI

[uc-hus]

I dont like react native

[uc-hus]

this bug coming from previous 5 weeks

[nihgwu]

@uc-hus You can just disable the landscape orientation via configuration, and if you don't like RN you can just drop it

[uc-hus]

Why? It's required.

Thanks & Regards
_Mohammed HUSAIN_
Senior Apps Developer, uCertify
[phone]

On Tue, Nov 8, 2016 at 9:49 AM, Neo [email protected] wrote:

@uc-hus https://github.com/uc-hus You can just disable the landscape
orientation via configuration, and if you don't like RN you can just drop it

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/25#issuecomment-259041642,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1HAFoyHADU42xbtnwUqSgB7GtMRhks5q7_hQgaJpZM4DaIiJ
.

[mmmulani]

@uc-hus are you handling onLayout events to setState or otherwise cause a re-render()? Compare your app to the UIExplorer which isn't having any of these issues

[linonetwo]

@uc-hus AFAIK react-native-menu-button solve its orientation problem by some workaround, you may take a look.

And the workaround I tried before is use Dimention.weight as height and use height as weight.

[uc-hus]

No, I'm not agree with you because I have resolved this issue without setState
and re-render().

[image: Inline image 1]
[image: Inline image 2]

Thanks & Regards
_Mohammed HUSAIN_
Senior Apps Developer, uCertify
[phone]

On Tue, Nov 8, 2016 at 12:03 PM, lin onetwo [email protected]
wrote:

@uc-hus https://github.com/uc-hus AFAIK react-native-menu-button solve
its orientation problem by some workaround, you may take a look.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/25#issuecomment-259057144,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1LjzjJAFFyPIbAWRqPFIVrgBt7mfks5q8Be1gaJpZM4DaIiJ
.

[jayshah123]

If you have fixed height and/or fixed width for your view,
chances are onlayout won't be called for that particular view after rotation,
but onLayout for views with flex:1 does get called when checking as of 0.35 (on android atleast)

[ThaJay]

uc-hus commented on 8 Nov 2016

No, I'm not agree with you because I have resolved this issue without setState
and re-render().

What was your fix? (the images you posted do not work)

I will try and listen for onLayout or namedOrientationDidChange now and change state. My components seem to be good apart from my navbar then reverts to its initial state instead of remaining in the state I gave it (with custom text and / or custom button icon + handler) so it needs to re-render.

edit: I just had to remove some workarounds, static sizes in my case, no need to do obscure stuff.

[uc-hus]

Can you pease provide a example

Thanks & Regards
Mohammed HUSAIN
Senior Apps Developer, uCertify
[phone]

On Sat, Jan 28, 2017 at 2:41 AM, Martin Koo [e-mail]
wrote:

We had this issue on iOS because we were setting height/width using
Dimensions.get in a StyleSheet. Switching to inline styles fixed the
problem.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/25#issuecomment-275775472,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1Jizto9CH1UWN33l2euEUN0KTX8nks5rWl2PgaJpZM4DaIiJ
.

[mkoo21]

flex:1 makes a component resize to take up all available space within its container, so if you set it on your root component it will resize to take up the whole screen on rotation. If you need to resize child views according to the new dimensions you can set onLayout for that view to capture that event and trigger a rerendering.
If you use something like redux you can easily write those dimensions to your app state and use them as props for any components that need to be responsive (I personally prefer this over Dimensions.get).
Here is an example that draws a red rectangle that fills the top-left quarter of the screen:

import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  View
} from 'react-native';

var app = React.createClass({
  getInitialState() {
    return {
      pageHeight: Dimensions.get('window').height,
      pageWidth: Dimensions.get('window').width
    }
  },
  getNewDimensions(event){
    this.setState({
      pageHeight: event.nativeEvent.layout.height,
      pageWidth: event.nativeEvent.layout.width
    })
  },
  render() {
    return (
      <View
        style={styles.page}
        onLayout={this.getNewDimensions}>
        <View style={[styles.rectangle, {
          height: this.state.pageHeight / 2,
          width: this.state.pageWidth / 2
        }]}/>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  page:{
    backgroundColor: 'blue',
    flex:1
  },
  rectangle:{
    backgroundColor: 'red'
  }
});

AppRegistry.registerComponent('app', () => app);

Of course, if you try to set onLayout on a view with fixed dimensions nothing interesting will happen. Dimensions.get('window') seems to return fixed numbers and set them, so if you use that you will need to force the component to rerender on rotation.

[vspedr]

@uc-hus I'm having the same issue that you reported here, but it's not clear what you did to solve it. The images in your other comment don't show up. Could you please share your solution?
Edit: on RN 0.32.0

[qrobin]

@mkoo21 we can also define width and height outside of class and change them onLayout to have access to that values in styles.

[tiendq]

@mkoo21 I got screen width changed in the onLayout event but view isn't re-rendered with new this.state.pageWidth :(

[mkoo21]

@ababba15 If you mean access them from StyleSheet.create(), you could access them but unless it has changed recently, the point of a stylesheet is that it's calculated once and reused, so you wouldn't be able to change the values dynamically. I think it's just easier to use state since changing state automatically triggers a rerender.

@Tiendq Is this an issue you had with my example? Are you setting style through this.state, or are you using a stylesheet?

[qrobin]

@mkoo21 maybe it not too cool, but I can define width and height outside the class like this:

let {width, height} = Dimensions.get('screen');

class Peace extends Component {
    constructor() {
        super();
        this.state = {
            width,
            height
        };
    }

    _handleLayout = event => {
        this.setState({
            width: event.nativeEvent.layout.width,
            height: event.nativeEvent.layout.height
        });
    }

    render() {
        width = this.state.width;
        height = this.state.height;
        /* this should re-render our component and assign to outer scope vars */

        return (
            <View style={styles.container} onLayout={this._handleLayout}>
                ...
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width,
        height
    }
});

It should work (if here is no any typo). Why like this? Because I prefer to avoid mixing inline and StyleSheet style. As for me, style={[styles.container, { width, height }]} looks more ugly..

Or even better(?) -- to write few functions instead of class.

But I can be wrong, I'm not too experienced, so let me know..
Peace, guys : )

[mkoo21]

@ababba15 I added backgroundColor = 'red' in styles to test your code. It does not respond to rotations for me. StyleSheets are initialized once and cannot be changed dynamically.

[tiendq]

@mkoo21 I used inline style e.g. {{ width: this.state.width }} but it doesn't work.

[qrobin]

@mkoo21 ok, I will check it today. I made it working somehow, just need to try again.

[mkoo21]

@Tiendq can you upload code or reproduce the issue with a minimal example so we can see what's wrong?

[tiendq]

@mkoo21 Never mind, sample code works now, I think it's my app's issue with nested views and FlatList view. Thanks.

[rsp8055]

UI is perfect when it is in PORTRAIT mode no need to scroll even. But as you get to change it to the LANDSCAPE mode UI is ok here but need to use now!? So, if I use scroll view here then UI is in this mode but now UI gets affected in another mode. What should do for making the UI working properly in both the mode?

I as worked so far and got to know that when I use any background image and flex it then only orientation problem arrives.

Here is the code for this production :

` onLayout={this.getNewDimensions}>

            <HeadImage />

            <View style={inputContainerStyle} >
                <TextInput />
                 <View>
                        <Image source={*****} style={searchStyle} />
                 </View>
            </View>

            <View style={buttonContainer}>
                <ButtonContainer />
            </View>

            <FootImage />

`

Thanks in ADV.