[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 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]

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 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
#25 (comment)
.

[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 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]

@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?