[Orientation] Re-Layout on orientation change

nick commented 9 years ago

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 commented 9 years ago

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 notifications@github.com 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 commented 9 years ago

Supporting orientation change is crucial, especially for tablets.

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

joewood commented 9 years ago

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 commented 9 years ago

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

On Saturday, March 28, 2015, Joe Wood notifications@github.com 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 commented 9 years ago

@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 commented 9 years ago

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 notifications@github.com 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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

ptmt commented 9 years ago

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

gudmundurmar commented 8 years ago

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

jeffreywescott commented 8 years ago

Nope. I gave up. Sorry, @gudmundurmar

andrewljohnson commented 8 years ago

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

gudmundurmar commented 8 years ago

@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 commented 8 years ago

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

grittathh commented 8 years ago

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

stereodenis commented 8 years ago

When I try to change orientation for <View style={{flex: 1, backgroundColor: 'green'}} /> I got this simulator screen shot 1 2016 11 20 55

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

sahrens commented 8 years ago

@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 commented 8 years ago

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

jamieathans commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

Pieter, no problem

On Friday, 2 September 2016, Pieter De Baets notifications@github.com 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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

I am on version 0.32.

jsdevel commented 8 years ago

this is also affecting me on android.

bestander commented 8 years ago

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

alexprice1 commented 8 years ago

Thanks @bestander!!

jsdevel commented 8 years ago

@bestander this still occurs on android with 0.32.1.

andreicoman11 commented 8 years ago

@jsdevel I'm looking into it

emilioaray commented 8 years ago

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 commented 8 years ago

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

ksloan commented 8 years ago

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 commented 8 years ago

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

linonetwo commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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.