I have been having problems with React Native screen rotation. The rotation is locked to portrait mode and I would like to enable landscape mode when the device is rotated. I use Expo to run my app on an Android device with Expo Go and haven't built the app yet. I would prefer to use only react-native APIS (e.g. Dimensions).
Edit:
The official docs say that
Multiple screen orientations should work fine by default unless you're using Dimensions API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.
It is unclear to me what 'using Dimensions API' means and I have tried both - not using it at all (not even importing it in any of my files), and handling orientation changes with Dimensions.addEventListener.
Neither of it worked.
/Edit
I have been searching the internet for a while and I always find tutorials and guides to disable or lock screen rotation but I have the opposite problem. It seems like screen rotation is enabled by default or something.
I would appreciate any help.
Related
I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen
I need to setup a splash screen that will scale responsively on all native devices like ios, android phones, tablet etc. The splash screen contains the following:
Text Logo name
Activity Indicator https://reactnative.dev/docs/activityindicator
I can see that this guide is among the top search result react-native-splash-screen, but not sure if it scales well on all native devices phone & tablets.
Should I just make a custom screen component and apply react-native-responsive-screen?
Is there a convention/best practice on setting up the splash screen on react native?
To support responsive splash screen or bootsplash, you need add images in differents resolutions, example in Android: mdpi, hdpi, xhdpi,... I currently use react-native-boot-splash it its other option to react-native-splash-screen, this package have a cli tool npx generate-bootsplash to generate bootsplash in differents resolutions in both platforms.
Other hand to add ActivityIndicator only check the example and put ActivityIndicator component below bootsplash wrapped with Animated.Image
I have a Codename One app which orientation is locked to portrait. That app is build to Android and iOS. It's a social and the portrait orientation is fine, except for video and images when they are landscape oriented.
To see a full screen image in a landscape orientation, I workarounded the problem rotating the image before showing it. However I suppose that the same workaround is not applicable to play a video.
How can I programmatically change the orientation of a Form to landscape when the app is locked to portrait? Otherwise, how can I satisfy the use case that I described? Thank you
This only works on Android and doesn't work for our iOS port. Notice that if you use the setNativePlayerMode it will work for iOS as well but you won't have any control as described here: https://stackoverflow.com/a/59495797/756809
You can set orientation to landscape explicitly using CN.lockOrientation(false). You can release the lock using CN.unlockOrientation().
But this will only work on Android and won't really impact iOS.
The black screen is visible for a moment at the start of the app in android devices. I've tested in all of my recent apps and it is there. In some devices, the black screen appears a bit longer especially in oreo.
Have a look at the video here
How can I solve it?
This is triggered because your start method is taking too long to process the Form or the Form's rendering code is too slow. When that happens Android tries to draw your app but it takes too long and so it just shows what it has.
Remove the clutter from start and just show a Form that's a splash screen then transition to the actual app. Optimize your actual app UI by using profilers & the performance monitor tool.
In my opinion, showing a splash screen before the actual app (as suggested by Shai) is a good idea to be sure that all the splash screen images generated for iOS by the Codename One build servers are as you want them: in this way, the app startup look will be very similar on iOS and Android. Some popular app, like Facebook, use a splash screen that show their icon at the middle of the screen.
However, about your question, in my "new" Android 7 device, almost "all" the apps, even the ones preinstalled with Android, show a blank screen for a fraction of second at startup. So I suppose that it's normal. That blank screen is usually white, but is some app the color of the blank startup screen is different (for example, in ES File Manager is gray). Also my Codename One apps show a blank white screen at startup (before the splash screen in the apps in which I implemented it). Maybe the color of the startup blank screen depends on the styling of the app.
I've completed my responsive design, except the adsense implementation.
When for example a visitor changes the orientation of the tablet, the size of the ad should change automatically.
At the moment, I'm not getting it to work without a page refresh.
The ad only changes when I refresh the page, but that's not what a visitor would do.
According to Adsense support it has already been implemented:
Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.
However, I'm not getting it to work. Am I understanding it the wrong way, or am I missing something?
If it's not supported by Adsense yet, is there a workaround (allowed by adsense)?
EDIT: I just found out it is actually working on my smartphone. It just doesn't work with window resizing, but that's not really a problem. So I guess this is solved.
Pay close attention to the official "Technical considerations" at About responsive ad units
Your site uses third-party JavaScript
The parent container has no width set
In my case, responsive design was not setting an explicit width on viewports below 467x. As a result, the units would resize when going from portrait to landscape, but not vice versa from landscape to portrait. This resulted in a an ad unit stretching the content column wider than the viewport, and worse no ability to zoom out.
Setting an explicit width for the ad unit using a media query solved the issue, and now the units resize and cache exactly as described.