[Orientation] Re-Layout on orientation change #25

Closed
nick opened this Issue Feb 1, 2015 · 67 comments

Comments

Projects
None yet
@nick

nick commented Feb 1, 2015

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.

@nick nick changed the title from Re-Layout on Orientation change to Re-Layout on orientation change Feb 1, 2015

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Feb 2, 2015

Contributor

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.

Contributor

sahrens commented Feb 2, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jaygarcia

jaygarcia Feb 14, 2015

Contributor

Supporting orientation change is crucial, especially for tablets.

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

Contributor

jaygarcia commented Feb 14, 2015

Supporting orientation change is crucial, especially for tablets.

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

@joewood

This comment has been minimized.

Show comment
Hide comment
@joewood

joewood Mar 29, 2015

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.

joewood commented Mar 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Mar 29, 2015

Contributor

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)
.

Contributor

sahrens commented Mar 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@GertjanReynaert

GertjanReynaert May 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens May 11, 2015

Contributor

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.

Contributor

sahrens commented May 11, 2015

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.

@betahikaru betahikaru referenced this issue in betahikaru/ReactAwsApiViewer May 11, 2015

Open

ListView not support yet rotation view #24

@brentvatne brentvatne changed the title from Re-Layout on orientation change to [Orientation] Re-Layout on orientation change May 31, 2015

@christopherdro

This comment has been minimized.

Show comment
Hide comment
@christopherdro

christopherdro Jul 20, 2015

Contributor

@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

Contributor

christopherdro commented Jul 20, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Jul 20, 2015

Contributor

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.

Contributor

nicklockwood commented Jul 20, 2015

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.

@brentvatne brentvatne closed this Jul 20, 2015

@jeffreywescott

This comment has been minimized.

Show comment
Hide comment
@jeffreywescott

jeffreywescott Aug 6, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Aug 6, 2015

Contributor

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?

Contributor

nicklockwood commented Aug 6, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jeffreywescott

jeffreywescott Aug 6, 2015

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

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

@ptmt

This comment has been minimized.

Show comment
Hide comment
@ptmt

ptmt Sep 17, 2015

Contributor

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

Contributor

ptmt commented Sep 17, 2015

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

@gudmundurmar

This comment has been minimized.

Show comment
Hide comment
@gudmundurmar

gudmundurmar Oct 1, 2015

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

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

@jeffreywescott

This comment has been minimized.

Show comment
Hide comment
@jeffreywescott

jeffreywescott Oct 20, 2015

Nope. I gave up. Sorry, @gudmundurmar

Nope. I gave up. Sorry, @gudmundurmar

@andrewljohnson

This comment has been minimized.

Show comment
Hide comment
@andrewljohnson

andrewljohnson Feb 22, 2016

Contributor

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

Contributor

andrewljohnson commented Feb 22, 2016

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

@gudmundurmar

This comment has been minimized.

Show comment
Hide comment
@gudmundurmar

gudmundurmar Feb 23, 2016

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

@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

This comment has been minimized.

Show comment
Hide comment
@ericmasiello

ericmasiello Mar 5, 2016

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

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

@grittathh

This comment has been minimized.

Show comment
Hide comment
@grittathh

grittathh Mar 6, 2016

Looks like this is related to #2111

Looks like this is related to #2111

@vitalets vitalets referenced this issue in vitalets/react-native-extended-stylesheet Apr 28, 2016

Open

Ideas for orientation change support #9

dustturtle added a commit to dustturtle/react-native that referenced this issue Jul 6, 2016

JSONKit usage here may cause serious crash hard to debug(I found the …
…crash on simulator, on device I got nothing but app freezed)!

My app has an old version of JSONKit which is still using MRC. I think JSONKit is not needed if system version is available. Kicking out of JSONKit will make react native stronger.
Crash stack:
* thread #11: tid = 0xbd672f, 0x000000010a10edeb imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=22 key/value pairs) + 16971 at JSONKit.m:2807, name = 'com.facebook.React.JavaScript', stop reason = EXC_BAD_ACCESS (code=EXC_I386_GPFLT)
    frame #0: 0x000000010a10edeb imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=22 key/value pairs) + 16971 at JSONKit.m:2807
    frame #1: 0x000000010a10ef67 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=2 key/value pairs) + 17351 at JSONKit.m:2811
    frame #2: 0x000000010a10ef67 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=25 key/value pairs) + 17351 at JSONKit.m:2811
    frame #3: 0x000000010a10e768 imobii-waiqin`jk_encode_add_atom_to_buffer(encodeState=0x00007f9b820a1000, objectPtr=@"3 elements") + 15304 at JSONKit.m:2778
  * frame #4: 0x000000010a10a26a imobii-waiqin`-[JKSerializer serializeObject:options:encodeOption:block:delegate:selector:error:](self=0x00007f9b831fbc80, _cmd="serializeObject:options:encodeOption:block:delegate:selector:error:", object=@"3 elements", optionFlags=0, encodeOption=10, block=0x0000000000000000, delegate=0x0000000000000000, selector=<no value available>, error=domain: class name = NSInvocation - code: 0) + 2250 at JSONKit.m:2876
    frame #5: 0x000000010a109992 imobii-waiqin`+[JKSerializer serializeObject:options:encodeOption:block:delegate:selector:error:](self=JKSerializer, _cmd="serializeObject:options:encodeOption:block:delegate:selector:error:", object=@"3 elements", optionFlags=0, encodeOption=10, block=0x0000000000000000, delegate=0x0000000000000000, selector=<no value available>, error=domain: class name = NSInvocation - code: 0) + 178 at JSONKit.m:2831
    frame #6: 0x000000010a10f700 imobii-waiqin`-[NSArray(self=@"3 elements", _cmd="JSONStringWithOptions:error:", serializeOptions=0, error=domain: class name = NSInvocation - code: 0) JSONStringWithOptions:error:] + 112 at JSONKit.m:2985
    frame #7: 0x000000010ac13c02 imobii-waiqin`_RCTJSONStringifyNoRetry(jsonObject=@"3 elements", error=domain: class name = NSInvocation - code: 0) + 338 at RCTUtils.m:49
    frame #8: 0x000000010ac13990 imobii-waiqin`RCTJSONStringify(jsonObject=@"3 elements", error=0x0000000000000000) + 128 at RCTUtils.m:77
    frame #9: 0x000000010ab5fdfa imobii-waiqin`__27-[RCTContextExecutor setUp]_block_invoke_2(.block_descriptor=<unavailable>, moduleName=@"UIManager") + 218 at RCTContextExecutor.m:363
    frame #10: 0x00000001134495cc CoreFoundation`__invoking___ + 140
    frame #11: 0x000000011344941e CoreFoundation`-[NSInvocation invoke] + 286
    frame #12: 0x000000010db13db3 JavaScriptCore`JSC::ObjCCallbackFunctionImpl::call(JSContext*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**) + 451
    frame #13: 0x000000010db13926 JavaScriptCore`JSC::objCCallbackFunctionCallAsFunction(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**) + 262
    frame #14: 0x000000010db14bad JavaScriptCore`long long JSC::APICallbackFunction::call<JSC::ObjCCallbackFunction>(JSC::ExecState*) + 573
    frame #15: 0x000000010dade340 JavaScriptCore`JSC::LLInt::setUpCall(JSC::ExecState*, JSC::Instruction*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*) + 528
    frame #16: 0x000000010dae535d JavaScriptCore`llint_entry + 22900
    frame #17: 0x000000010dadf7d9 JavaScriptCore`vmEntryToJavaScript + 326
    frame #18: 0x000000010d9b1959 JavaScriptCore`JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*) + 169
    frame #19: 0x000000010d9985ad JavaScriptCore`JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) + 493
    frame #20: 0x000000010d76cb7e JavaScriptCore`JSC::call(JSC::ExecState*, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) + 62
    frame #21: 0x000000010d929a55 JavaScriptCore`JSC::callGetter(JSC::ExecState*, JSC::JSValue, JSC::JSValue) + 149
    frame #22: 0x000000010dad49fb JavaScriptCore`llint_slow_path_get_by_id + 2203
    frame #23: 0x000000010dae22f0 JavaScriptCore`llint_entry + 10503
    frame #24: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #25: 0x000000010dae52fd JavaScriptCore`llint_entry + 22804
    frame #26: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #27: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #28: 0x000000010dae52fd JavaScriptCore`llint_entry + 22804
    frame #29: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #30: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #31: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #32: 0x000000010dae552a JavaScriptCore`llint_entry + 23361
    frame #33: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #34: 0x000000010dae5368 JavaScriptCore`llint_entry + 22911
    frame #35: 0x000000010dadf7d9 JavaScriptCore`vmEntryToJavaScript + 326
    frame #36: 0x000000010d9b1959 JavaScriptCore`JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*) + 169
    frame #37: 0x000000010d998264 JavaScriptCore`JSC::Interpreter::execute(JSC::ProgramExecutable*, JSC::ExecState*, JSC::JSObject*) + 10404
    frame #38: 0x000000010d7a8786 JavaScriptCore`JSC::evaluate(JSC::ExecState*, JSC::SourceCode const&, JSC::JSValue, WTF::NakedPtr<JSC::Exception>&) + 470
    frame #39: 0x000000010d9f6fb8 JavaScriptCore`JSEvaluateScript + 424
    frame #40: 0x000000010ab6379e imobii-waiqin`__68-[RCTContextExecutor executeApplicationScript:sourceURL:onComplete:]_block_invoke.264(.block_descriptor=<unavailable>) + 414 at RCTContextExecutor.m:589
    frame #41: 0x000000010ab63262 imobii-waiqin`__68-[RCTContextExecutor executeApplicationScript:sourceURL:onComplete:]_block_invoke(.block_descriptor=<unavailable>) + 498 at RCTContextExecutor.m:589
    frame #42: 0x000000010ab63df8 imobii-waiqin`-[RCTContextExecutor executeBlockOnJavaScriptQueue:](self=0x00007f9b832f6040, _cmd="executeBlockOnJavaScriptQueue:", block=0x00007f9b80c92970) + 248 at RCTContextExecutor.m:627
    frame #43: 0x000000010eb1d7a7 Foundation`__NSThreadPerformPerform + 283
    frame #44: 0x0000000113486301 CoreFoundation`__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    frame #45: 0x000000011347c22c CoreFoundation`__CFRunLoopDoSources0 + 556
    frame #46: 0x000000011347b6e3 CoreFoundation`__CFRunLoopRun + 867
    frame #47: 0x000000011347b0f8 CoreFoundation`CFRunLoopRunSpecific + 488
    frame #48: 0x000000010ab5e41b imobii-waiqin`+[RCTContextExecutor runRunLoopThread](self=RCTContextExecutor, _cmd="runRunLoopThread") + 363 at RCTContextExecutor.m:284
    frame #49: 0x000000010ebc012b Foundation`__NSThread__start__ + 1198
    frame #50: 0x00000001140869b1 libsystem_pthread.dylib`_pthread_body + 131
    frame #51: 0x000000011408692e libsystem_pthread.dylib`_pthread_start + 168
    frame #52: 0x0000000114084385 libsystem_pthread.dylib`thread_start + 13
@stereodenis

This comment has been minimized.

Show comment
Hide comment
@stereodenis

stereodenis Sep 1, 2016

Contributor

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?

Contributor

stereodenis commented Sep 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Sep 1, 2016

Contributor

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

Contributor

sahrens commented Sep 1, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@stereodenis

stereodenis Sep 1, 2016

Contributor

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

Contributor

stereodenis commented Sep 1, 2016

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

@jamieathans

This comment has been minimized.

Show comment
Hide comment
@jamieathans

jamieathans Sep 2, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@javache

javache Sep 2, 2016

Member

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

Member

javache commented Sep 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jamieathans

jamieathans Sep 2, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@javache

javache Sep 2, 2016

Member

My fix here could be related: f35b372 and will be out in v33.

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

Member

javache commented Sep 2, 2016

My fix here could be related: f35b372 and will be out in v33.

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

@bestander

This comment has been minimized.

Show comment
Hide comment
@bestander

bestander Sep 2, 2016

Contributor

Pieter, no problem

On Friday, 2 September 2016, Pieter De Baets notifications@github.com
wrote:

My fix here could be related: f35b372
f35b372
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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACBdWO3GAGh50KI87DLuldq2OCowqVyYks5qmGqngaJpZM4DaIiJ
.

Contributor

bestander commented Sep 2, 2016

Pieter, no problem

On Friday, 2 September 2016, Pieter De Baets notifications@github.com
wrote:

My fix here could be related: f35b372
f35b372
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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACBdWO3GAGh50KI87DLuldq2OCowqVyYks5qmGqngaJpZM4DaIiJ
.

@alexprice1

This comment has been minimized.

Show comment
Hide comment
@alexprice1

alexprice1 Sep 4, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@mmmulani

mmmulani Sep 4, 2016

Contributor

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

Contributor

mmmulani commented Sep 4, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alexprice1

alexprice1 Sep 4, 2016

I am on version 0.32.

I am on version 0.32.

@jsdevel

This comment has been minimized.

Show comment
Hide comment
@jsdevel

jsdevel Sep 7, 2016

Contributor

this is also affecting me on android.

Contributor

jsdevel commented Sep 7, 2016

this is also affecting me on android.

@emilioaray

This comment has been minimized.

Show comment
Hide comment
@emilioaray

emilioaray Sep 11, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@alexprice1

alexprice1 Sep 11, 2016

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

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

@ksloan

This comment has been minimized.

Show comment
Hide comment
@ksloan

ksloan Sep 18, 2016

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 })
  }
...

ksloan commented Sep 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmmulani

mmmulani Sep 18, 2016

Contributor

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

Contributor

mmmulani commented Sep 18, 2016

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

@PaulBGD PaulBGD referenced this issue in PaulBGD/react-native-image-slider Sep 20, 2016

Closed

Orientation change (android) #12

@linonetwo

This comment has been minimized.

Show comment
Hide comment
@linonetwo

linonetwo Sep 22, 2016

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.

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 comment has been minimized.

Show comment
Hide comment

linonetwo commented Sep 22, 2016

This is blocking some package likes react-native-menu-button and react-native-simple-modal working properly. KenHky/react-native-menu-button#4

@linonetwo linonetwo referenced this issue in KenHky/react-native-menu-button Sep 22, 2016

Closed

转屏的时候会有问题啊大佬! #4

@andreicoman11

This comment has been minimized.

Show comment
Hide comment
@andreicoman11

andreicoman11 Sep 22, 2016

Contributor

Android supports orientation changes since f07ca31 through namedOrientationDidChange, and Dimensions gets updated accordingly since 8451585.

Contributor

andreicoman11 commented Sep 22, 2016

Android supports orientation changes since f07ca31 through namedOrientationDidChange, and Dimensions gets updated accordingly since 8451585.

@mvayngrib

This comment has been minimized.

Show comment
Hide comment
@mvayngrib

mvayngrib Sep 22, 2016

Contributor

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

Contributor

mvayngrib commented Sep 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@air-ii

air-ii Sep 22, 2016

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.

air-ii commented Sep 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 3, 2016

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

uc-hus commented Nov 3, 2016

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

@uc-hus

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 7, 2016

Very bad for UI

uc-hus commented Nov 7, 2016

Very bad for UI

@uc-hus

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 7, 2016

I dont like react native

uc-hus commented Nov 7, 2016

I dont like react native

@uc-hus

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 7, 2016

this bug coming from previous 5 weeks

uc-hus commented Nov 7, 2016

this bug coming from previous 5 weeks

@nihgwu

This comment has been minimized.

Show comment
Hide comment
@nihgwu

nihgwu Nov 8, 2016

Contributor

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

Contributor

nihgwu commented Nov 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 8, 2016

Why? It's required.

Thanks & Regards
Mohammed HUSAIN
Senior Apps Developer, uCertify
+91 9919475253

On Tue, Nov 8, 2016 at 9:49 AM, Neo notifications@github.com 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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1HAFoyHADU42xbtnwUqSgB7GtMRhks5q7_hQgaJpZM4DaIiJ
.

uc-hus commented Nov 8, 2016

Why? It's required.

Thanks & Regards
Mohammed HUSAIN
Senior Apps Developer, uCertify
+91 9919475253

On Tue, Nov 8, 2016 at 9:49 AM, Neo notifications@github.com 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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1HAFoyHADU42xbtnwUqSgB7GtMRhks5q7_hQgaJpZM4DaIiJ
.

@mmmulani

This comment has been minimized.

Show comment
Hide comment
@mmmulani

mmmulani Nov 8, 2016

Contributor

@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

Contributor

mmmulani commented Nov 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@linonetwo

linonetwo Nov 8, 2016

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

linonetwo commented Nov 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Nov 8, 2016

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
+91 9919475253

On Tue, Nov 8, 2016 at 12:03 PM, lin onetwo notifications@github.com
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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1LjzjJAFFyPIbAWRqPFIVrgBt7mfks5q8Be1gaJpZM4DaIiJ
.

uc-hus commented Nov 8, 2016

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
+91 9919475253

On Tue, Nov 8, 2016 at 12:03 PM, lin onetwo notifications@github.com
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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1LjzjJAFFyPIbAWRqPFIVrgBt7mfks5q8Be1gaJpZM4DaIiJ
.

@jayshah123

This comment has been minimized.

Show comment
Hide comment
@jayshah123

jayshah123 Dec 2, 2016

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)

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

This comment has been minimized.

Show comment
Hide comment
@ThaJay

ThaJay Jan 11, 2017

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.

ThaJay commented Jan 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@uc-hus

uc-hus Jan 28, 2017

uc-hus commented Jan 28, 2017

@mkoo21

This comment has been minimized.

Show comment
Hide comment
@mkoo21

mkoo21 Jan 28, 2017

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.

mkoo21 commented Jan 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@vspedr

vspedr Feb 2, 2017

@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

vspedr commented Feb 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@qrobin

qrobin Apr 10, 2017

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

qrobin commented Apr 10, 2017

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

@tiendq

This comment has been minimized.

Show comment
Hide comment
@tiendq

tiendq May 22, 2017

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

tiendq commented May 22, 2017

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

@mkoo21

This comment has been minimized.

Show comment
Hide comment
@mkoo21

mkoo21 May 22, 2017

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

mkoo21 commented May 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@qrobin

qrobin May 22, 2017

@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 : )

qrobin commented May 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@mkoo21

mkoo21 May 22, 2017

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

screenshot at 2017-05-22 18 25 55
screenshot at 2017-05-22 18 26 03

mkoo21 commented May 22, 2017

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

screenshot at 2017-05-22 18 25 55
screenshot at 2017-05-22 18 26 03

@tiendq

This comment has been minimized.

Show comment
Hide comment
@tiendq

tiendq May 23, 2017

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

tiendq commented May 23, 2017

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

@qrobin

This comment has been minimized.

Show comment
Hide comment
@qrobin

qrobin May 23, 2017

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

qrobin commented May 23, 2017

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

@mkoo21

This comment has been minimized.

Show comment
Hide comment
@mkoo21

mkoo21 May 23, 2017

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

mkoo21 commented May 23, 2017

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

@tiendq

This comment has been minimized.

Show comment
Hide comment
@tiendq

tiendq May 24, 2017

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

tiendq commented May 24, 2017

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

@rsp8055

This comment has been minimized.

Show comment
Hide comment
@rsp8055

rsp8055 Mar 16, 2018

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 :

` <View style={{ flex: 1, justifyContent: 'space-between' }}
onLayout={this.getNewDimensions}>

            <HeadImage />

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

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

            <FootImage />

`

Thanks in ADV.

rsp8055 commented Mar 16, 2018

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 :

` <View style={{ flex: 1, justifyContent: 'space-between' }}
onLayout={this.getNewDimensions}>

            <HeadImage />

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

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

            <FootImage />

`

Thanks in ADV.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment