Rotate 1 screen in React native (both ios and android) - javascript

I'm coding an application React-Native in which i need one screen to be locked on landscape (without any action from the user), how can i do this ?
I tried the "transform" props but couldn't manage to make it works

In Android :
Navigate to the AndroidManifest.xml file. the path is android/app/src/main and set android:screenOrientation to the landscape.
In iOS:
Open iOS folder of your project with Xcode. In general tab, find device orientation and set it to landscape left or right.
The abovementioned is ok to change the orientation of all the screens. if you need to change one particular page only, you can use this library.

Related

How to force landscape orientation in a webapp in the browser

I have a webapp that is running in the chrome web browser on Android.
I want to lock the orientation to landscape.
I tried several options according to this tutorial:
using ScreenOrientation.lock(), which is experimental.
The example code here does not work in my mobile phone (Pixel3, Android 11) - when the device is rotated, the orientation changes.
I also tried a CSS trick, which rotates the screen by 90 degrees, if it detect that the device is in portrait mode.
The screen is rendered in landscape mode in the simplified example, but the functionality of the real application is broken. For example, when moving the finger in the x direction is interpreted as moving in y direction.
Other tries also failed on my Pixel3 phone in Chrome in Android (when rotating the device the orientation changes)
I am able to lock the orientation by installing the page as a PWA "Add to Home Screen" and using a manifest with
cat manifest.json
"display": "standalone",
"orientation": "landscape",
But this requires that the user installs the app as a PWA
I want to lock the orientation of the webapp while it is running in the regular browser.
Is this possible?
Thanks
The best bet you could do is generate a simple popup that disallows input, ie; covering the screen. Then use the following code [which can be better fine-tuned] to detect if the user is in portrait or landscape mode.
setTimeout(() => {
if(window.innerHeight > window.innerWidth){
document.body.getElementById('custom-popup').classList.add('show');
// Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
} else {
document.body.getElementById('custom-popup').classList.remove('show');
// The user switched to landscape presumably
}
}, 3000);

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

Set iPhone native popup's orientation

I've built a PhoneGap app for iPhone. In specific cases, landscape design and support was required, and so I've listened to device orientation notifications, and had my JS app add a '.landscape' css class which rotated the main container by 90 or -90 degrees.
This JS orientation handling was easy and quick, but the problem is the native interface is always portrait-oriented. When native popups are shown, they're always in portrait mode, even if the device is tilted to landscape.
Is there any way to set the orientation of native popups, without having to change the interface orientation (which is basically what I do in JS)?
Or do I have to rebuild the whole thing with proper native landscape orientation?

Disable resizing snap view in Windows 8.1

I'm working with a Windows 8 app using Java Script.
In windows 8 there is only one snap view and that is fixed one. But when we come to the windows 8.1 we can resize the snap view. I want to do is keep that fixed size snap view in windows 8.1 also. That means, I want to stop resizing snap view when my windows 8 app running on windows 8.1..
Is there any way for it...?
Looking for example or any guide... Thank you
#dougajmcdonald is correct. The user is in control and will be able to resize any app to most any size, so your app will need to account for it. You can change the minimum size of your app which gives Windows a hint about where to give the user a snap point. For instance, if you say your app's minimum size is 500px then when the user is dragging the separator, it will snap to 500 pixels, but it will still allow them to resize to say 587 pixels.
I don't believe you can stop it, as it's a part of the OS and apps are supposed to adhere to it.
You can control your app via media queries in the CSS to fix size to particular values when the app width is at certain values.
Or you can detect the application state and look for 'snapped' and set sizes in the JS code perhaps.
EDIT:
In order to use CSS which applies to the application in snapped mode you can find good examples in the MS Template applications, taken from their CSS you can use:
#media screen and (-ms-view-state: snapped) { // my styles }
Which will allow you to apply specific styles in the snapped state.

Camera orientation issues on phonegap iPhone development

I'm using phonegap in order to capture an image in my application.
My application is configured to work in landscape orientation mode, with the button on the right.
The thing is that I need to keep that orientation when taking a photo with the camera.
I'm using the 1.4.1 version of the phonegap library. I have tried passing "correctOrientation: true" as a cameraOption parameter when calling capturePhoto(), but it doesn't seem to work and the device continues taking and storing the images as the device accelerometer tells.
Any idea how to solve it?

Categories