Comments (67)
I dont like react native
from react-native.
@uc-hus You can just disable the landscape orientation via configuration, and if you don't like RN you can just drop it
from react-native.
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.
from react-native.
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 [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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1LjzjJAFFyPIbAWRqPFIVrgBt7mfks5q8Be1gaJpZM4DaIiJ
.
from react-native.
@gudmundurmar can you provide some sample code of how you are detecting a change in the devices orientation?
from react-native.
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?
from react-native.
@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?)
from react-native.
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 })
}
...
from react-native.
@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}
from react-native.
I'll make a patch for 0.32 then, should be out in an hour
from react-native.
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.
from react-native.
@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.
from react-native.
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?
from react-native.
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.
from react-native.
Supporting orientation change is crucial, especially for tablets.
Something like styles : { landscape : {}, portrait : {} } could work from the JS Implementation perspective.
from react-native.
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.
from react-native.
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
#25 (comment)
.
from react-native.
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.
from react-native.
@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
from react-native.
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.
from react-native.
@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.
from react-native.
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?
from react-native.
Sorry -- my mistake. As it turns out, all of the layout changes seem to get swallowed by the JS-based Navigator
component. :-(
from react-native.
Same here on 0.11.0-rc. View inside renderScene doesn't react on orientation change.
from react-native.
@jeffreywescott Did you find out how to get past the layout changes getting swallowed by the Navigator component?
from react-native.
Nope. I gave up. Sorry, @gudmundurmar
from react-native.
@gudmundurmar, did you make progress on this? Is autorotation broken for Navigator for you?
from react-native.
Looks like this is related to #2111
from react-native.
@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.
from react-native.
@sahrens iOS (simulator and device), RN 0.32.0,
simple application with only <View style={{flex: 1, backgroundColor: 'green'}} />
from react-native.
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.
from react-native.
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
from react-native.
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.
from react-native.
Pieter, no problem
On Friday, 2 September 2016, Pieter De Baets [email protected]
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
.
from react-native.
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
from react-native.
what version of React Native are you using? I just landed a change that affects Modal and orientation but it should only affect iOS
from react-native.
I am on version 0.32.
from react-native.
this is also affecting me on android.
from react-native.
Thanks @bestander!!
from react-native.
@bestander this still occurs on android with 0.32.1
.
from react-native.
@jsdevel I'm looking into it
from react-native.
Any update on this? Wanting to get an initial release out and this is blocking my app.
from react-native.
the UIExplorer app handles orientation changes by calling setState from onLayout, I believe
from react-native.
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.
from react-native.
This is blocking some package likes react-native-menu-button and react-native-simple-modal working properly. KenHky/react-native-menu-button#4
from react-native.
Android supports orientation changes since f07ca31 through namedOrientationDidChange
, and Dimensions gets updated accordingly since 8451585.
from react-native.
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
from react-native.
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.
from react-native.
Can you please help for native app's orientation issue for both android and ios
from react-native.
Very bad for UI
from react-native.
this bug coming from previous 5 weeks
from react-native.
Why? It's required.
Thanks & Regards
Mohammed HUSAIN
Senior Apps Developer, uCertify
+91 9919475253
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
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALoZ1HAFoyHADU42xbtnwUqSgB7GtMRhks5q7_hQgaJpZM4DaIiJ
.
from react-native.
@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
from react-native.
@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.
from react-native.
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)
from react-native.
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.
from react-native.
from react-native.
@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
from react-native.
@mkoo21 we can also define width and height outside of class and change them onLayout
to have access to that values in styles.
from react-native.
@mkoo21 I got screen width changed in the onLayout event but view isn't re-rendered with new this.state.pageWidth
:(
from react-native.
@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?
from react-native.
@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 : )
from react-native.
@mkoo21 I used inline style e.g. {{ width: this.state.width }} but it doesn't work.
from react-native.
@mkoo21 ok, I will check it today. I made it working somehow, just need to try again.
from react-native.
@tiendq can you upload code or reproduce the issue with a minimal example so we can see what's wrong?
from react-native.
@mkoo21 Never mind, sample code works now, I think it's my app's issue with nested views and FlatList view. Thanks.
from react-native.
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.
from react-native.
Related Issues (20)
- Android native module rejections are not instanceof Error HOT 1
- Could not find com.facebook.react:react-android:.:0.72.1 HOT 9
- Build issues with 0.71 RNSha256 XCode 15.3 HOT 4
- `fontVariant` doesn't work on iOS when using the new architecture
- UI problem with iOS floating keyboard in iPad. HOT 6
- TouchableWithoutFeedback does not support style HOT 1
- Cannot find EventEmitter for receivedTouches EventName[topTouchMove, topTouchEnd] on native library HOT 5
- RCTNativeAnimatedNodesManager.mm props is not a node HOT 1
- Unexpected scroll behaviors when using FlatList HOT 7
- When I integration react native with Existing Android Apps,I got a autolinking question. HOT 2
- Symbol not found: (_JSGlobalContextSetInspectable) HOT 2
- The directory ****/ios contains 2 projects HOT 3
- textInput props textAlign will cause long text to be cut off after the hyphen when out of focus and focus again
- close the first modal with animation, then open the second modal immediately, the second modal can't be showed HOT 2
- UI updates made from layout effect are flushed in separate UI transaction HOT 4
- Blob constructor is not spec compliant HOT 1
- [!] CocoaPods could not find compatible versions for pod "React-RCTAnimation": In Podfile: React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) HOT 3
- Build error in 0.73.6 HOT 3
- Fatal error "available height is undefined" when editing textinput the app closes HOT 3
- Inverted Flatlist not working when scrolled HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.