-
-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ideas for orientation change support #9
Comments
@vitalets, shall it actually be not a stylesheet business to watch for the possible orientation change and even command the components rendering? I am playing with the extended stylesheets at the moment and while full automation of orientation handling wouldn't hurt, on demand calculation could be not that bad either. For example,
|
hi @amarchen ! thanks for your ideas! Currently I've got working proto with the same approach as you described here #13 - using Of course, it should automatically memoize two calculated stylesheets (portrait and landscape), so developer should not care about it. I'm going to make orientation support as option:
|
Hi, any update on this? |
trying to find time to finalize that. But still it is not ready to be published. |
Is there any way I can help? This orientation change feature would be huge for our company. Thanks for the hard work! |
@abdallahm That looks great! |
@Zyphrax I'll repost here my answer from pr:
|
Hey, Uranium supports orientation changes :) |
could you share with us which approach you are using to detect orientation change? |
Hi @vitalets , I believe it leverages https://github.com/walmartlabs/react-native-orientation-listener to do that. |
Oh sorry, how did I miss that notification? Yeah it's that ^, and then on top of that https://github.com/tuckerconnelly/react-native-match-media I've thought about this quite a bit--you can also poll |
What's the current way of listening to orientation changes? Wrapping the component as described by @vitalets ? |
I'm using this for my orientation change stuff. It works pretty well so far. https://gist.github.com/jimthedev/edcfe00d3f27da2a248b97559ce6e29f |
@jimthedev thanks for sharing!
|
Correct |
I took a look at #21. Not a fan of the approach so far. Instead of a very manual API ... var updatedStyles = EStyleSheet.orientationUpdate(event, styles); ... how about a more automatic API using property accessors? Take class example extends React.Component {
render() {
return (
<View style={styles.card}>
{/* ... */}
</View>
);
}
} A user interested in responding to orientation would then need to re-render their views on orientation change. After looking at existing solutions for this.. I feel we should make a slight change to Here is how I would use this. import {observable} from "mobx";
import Orientation from "react-native-orientation";
class OrientationState {
@observable _current = Orientation.getInitialOrientation();
constructor() {
Orientation.addOrientationListener((orientation) => {
this._current = orientation;
});
}
get = () => {
return this._current;
}
}
// ----
import EStyleSheet from "react-native-extended-stylesheet";
EStyleSheet.build({
orientation: OrientationState.get,
}); And that's it. Any components that care about reacting to the orientation would just need to be marked |
I agree with you and moreover I think developer should not care about passing orientation fn to EStyleSheet. It should be detected inside lib as well as media queries in desktop browsers work - we don't pass orientation to it, we just declare rules how everything should be rendered.. |
Oh, I agree. The passing in The key problem is in pure components. It'd be nice to just re-render the root on a layout change but that isn't possible if children are pure. Some more ideas:
|
(RN beginner here). Can you explain why that isn't possible? |
Pure react components will only re-render if props or state changes. Unless Orientation is passed through as props all the way down your tree you couldn't easily re-render the whole tree based on orientation. For what it's worth, I dropped this package and am using a scaled viewport. I don't need this scale to change if the orientation changes. Flexbox already handles resizing and repositioning everything when the orientation changes. Really I think that the idea of "I need to re-layout on orientation change" is a misnomer as I can't think of many reasons why you really want to. My app is a huge business app and I have a manual orientation listener in one place (a video player) that detects when you rotate the phone to simulate full screen by disabling things like the notification bar. By a scaled viewport, I mean I define all my sizes as if the only phone in existence was the iPhone 6 and then multiply the size by a ratio of the difference in size of the actual phone to the iPhone 6. import {Dimensions} from "react-native";
const d = Dimensions.get("window");
const width = 375;
const height = 667;
const vw = (d.width / 100);
const vh = (d.height / 100);
const vmin = Math.min(vw, vh);
function vu(size) {
return ((size / width) * vmin) * 100;
} All of my sizes are defined like |
Thanks. Yes, this is one of such cases where you decide early, and changing it afterwards turns out a huge amount of work. I also think if you really need to re-layout on orientation change, you will pass down the state. |
@mehcode thanks for sharing the idea! |
@mehcode: how do you handle heights? |
Same function. It works by applying a ratio. Width of your device is exactly |
Thanks @mehcode ! I think we can go the same scale-only way. |
@mehcode : what's the reason for using the 100-factor? I think it can be done like this as well:
BTW I changed 'window' into 'screen' because they differ on Android, and screen seems to be the most appropriate |
@raarts Because I used to export FYI that snippet is released as It does need a README. I disagree on the
|
@mehcode : any remaining advice on where to apply the vu() function. I am currently implementing it, and I seem to be applying it to everything but borderWidth. Sometimes I doubt about padding and margin though. Do you radically apply it everywhere? |
After testing on an iPad Air 2 everything doubles in size, including screen headers, fonts in many places (but not in others, where I didn't specify specific font size). Which proves the vu() function works. But still, it wasn't entirely what I expected. Some more thought needs to go into this. This may need some guidelines. |
Adding my 2 cents to this... I am currently testing react-native-extended-stylesheet with react-native-web and my basic tests show it works well so far. It would be nice that any forthcoming support for orientation changes plays well with react-native-web. |
Any update on this? |
BTW I'm also using this with react-native-web, and now scaling became a problem. You can rotate your phone to landscape, and scaling will work, but if you project that same landscape screen in a web browser, now suddenly everything gets really big. Also, you cannot rotate a monitor, or laptop (at least the system won't get an event), but you can scale the browser window dynamically. For laying out components, there seems to be only one consideration: width and height. No need to pass those details down, but I'm now considering defining 5 virtual layouts:
And creating different navigation stacks, where each stack defines screens with a tailored layout. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
@vitalets I'm not sure about my suggestion, but maybe by using import { Dimensions } from "react-native";
let dims = Dimensions.get("window");
const handler = (newDims) => (dims = newDims);
Dimensions.addEventListener("change", this.handler);
export const isLandscape = () => (dims.width > dims.height); |
@magrinj looks like good solution! 👍 |
@vitalets From what I read it appeared from the version |
Is there any workaround to achieve this? I am currently updating the Dimensions using the addEventListener event -
And on the component, updating the View's width and height to match to that of the Screen when the layout changes -
But, it's not updating the layout as per defined by EStyleSheet.create() in each subsequent components. Am I missing something? |
let {height, width} = Dimensions.get('window'); EStyleSheet.build({ For a 360pixel standard width device rem would be 1 and you can use '10rem' instead of the static 10 pixel, and for corresponding lower width device, rem decreases and the opposite for larger devices. So, the design will remain same on every device and both orientations as well. |
I created a small library for this purpose which we are using at work and faced issues with event listening approach. This is how we specify orientation specific styles.
|
@imAliAzhar Could you share the link to your library? |
If it ever might help someone, I recently implemented Code of the wrapper component can be found here. I'm using this library together with Emotion JS (CSS in JS), to support more advanced CSS properties in React Native, for example media queries in my recently released package: emotion-native-extended |
is someone still looking solution for this feature(Dynamic orientation change)? |
I think this needs to be managed outside extended stylesheet. BTW did you take over maintenance of this repo? |
I want to use this library to create React Native app that should be responsive for ipad & mobile. If possible please share the code or idea to apply media query when orientation is changed. |
A bit old but the idea still stands:
https://link.medium.com/5MwHmZbmxcb
Op do 24 dec. 2020 om 06:00 schreef eswarant <notifications@github.com>
… I think this needs to be managed outside extended stylesheet. BTW did you
take over maintenance of this repo?
I want to use this library to create React Native app that should be
responsive for ipad & mobile. If possible please share the code or idea to
apply media query when orientation is changed.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#9 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAYFPRJCPLGEO73KZQYQH2LSWLDIBANCNFSM4CB6ZSCA>
.
|
Hey @vitalets , any suggestion how we can handle this . Currently I have made a hook which adds an event listener to |
I agree it should be the way it works. Maybe .forceUpdate can help? |
After implementing media queries in #5 I'm thinking about supporting orientation change somehow.
As it will allow to get full power of media queries.
Technically I see these steps:
I quickly searched for that topic but did not found ready to use concept how it can be implemented in RN.
If you have some ideas or experience, please feel free to share it here and we will think how to add it.
Thanks!
The text was updated successfully, but these errors were encountered: