I'm using webview to play a video on full screen in landscape mode in my react native app .on returning to previous page I want protrait mode back.(Ie :I only need landscape mode for video player page and portrait mode in rest of the pages)
code
componentWillUnmount(){
Orientation.lockToPortrait();
}
componentDidMount() {
Orientation.lockToLandscape();
}
This code works, but on navigating back the view remains in landscape mode for a short period of time. How can I get the view to rotate to portrait mode immediately on returning from video player page?
Related
I need that when the native splash screen finishes loading, another splash screen (now on the javascript side) continues loading... with the same image and the same size shown on the native splash screen.
I already tried to define some sizes and positions on screen. But they never look alike. Can anyone point me to some documentation for me to study or guide me on how I can do this?
Technically splash screen is a part of the native application. You can't modify it from React Native side.
However, using libraries like https://github.com/zoontek/react-native-bootsplash you can control when to hide the splash screen. For example:
const App = () => {
componentDidMount() {
// do your logic even async
RNBootSplash.hide(); // call it to hide native splash screen
}
}
I want to lock the orientation of my camera screen.
<Stack.Screen name="Camera" component={Camera} options={{ headerShown:false,orientation:'landscape'}}/>
This works fine in android but does not work on ios devices.
Is there a way to solve this problem?
You can use below plugin for that
https://www.npmjs.com/package/react-native-orientation-locker
Set up plugin and configure as mention in their doc and in react native side add below code which you want to Lock Screen portrait or landscape
import Orientation from 'react-native-orientation-locker';
useEffect(()=>{
Orientation.lockToPortrait(); //this will lock the view to Portrait
Orientation.lockToLandscape(); //this will lock the view to Landscape
})
EDIT
One more plugin is there you can set screen wise orientation
https://www.npmjs.com/package/react-native-orientation
In my one of the project this is also working . Hope your issue will be resolve on this.
I am new to react Native. am stuck in a issue, is it possible to lock a Particular screen in Landscape in react-native ? in other words can we config the screen orientation for particular screen ?
Help me to solve this?
You can use react-native-orientation or react-native-orientation-locker.
https://www.npmjs.com/package/react-native-orientation
https://www.npmjs.com/package/react-native-orientation-locker
React native orientation provided following API which help to achieve screen orientation
Orientation.lockToPortrait()
Orientation.lockToLandscape()
Orientation.lockToLandscapeLeft()
Orientation.lockToLandscapeRight()
Orientation.unlockAllOrientations()
Orientation.getOrientation((err, orientation) => {})
Orientation.getSpecificOrientation((err, specificOrientation) => {})
Please check following code snippet
import Orientation from 'react-native-orientation'
componentDidMount() {
Orientation.unlockAllOrientations();
}
componentWillUnmount() {
Orientation.lockToPortrait();
}
I have tried both packages.
https://www.npmjs.com/package/react-native-orientation https://www.npmjs.com/package/react-native-orientation-locker
Both the packages work fine in android but I am getting the issue in ios devices it does not lock the orientation to landscape.
I built a react-native app and if user clicks a link then app opens a default web browser and go to the link.
Linking.openURL(notification.link);
If user push back button from the android or ios devices, is there any way we can detect the back move?
You can add a listener for the same in react native.
There are total 4 listners for the same.
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
Try the below code
componentWillMount(){
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.warn('didFocus ', payload);
# just write your code/call a method here which you want to execute when the app comes from background
}
);
}
Dont forget to remove it when it is done.
componentWillUnmount(){
didFocusSubscription.remove();
}
More you can read here. Thanks :)
I'm trying to have my expo react-native app displayed in landscape
I edited app.json to have:
"orientation": "landscape",
And this in App.js
import { ScreenOrientation } from 'expo';
export default class App extends React.PureComponent {
// ...
componentDidMount() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
}
// ...
}
I try to run in android emulator, but it looks like the emulator is locked on portrait mode.
The physical orientation of the device is landscape, The app is "streched" to fit a landscape screen, but android seems lock in portrait mode:
https://i.ibb.co/dK54ngp/Capture.png
I check the device setting and "Auto-rotate" is ON.
I think I am missing something but I can't find what.
Can someone tell me what needs to be done to lock the app to landscape mode ?
Edit:
It seems to work with the Nexus 5 emulator, not on Nexus 9
for me just changing orientation in app.json is enough, the code is not needed.
change with this.
import * as ScreenOrientation from 'expo-screen-orientation';
ScreenOrientation.unlockAsync()
There are some bugs related to orientation, in the last Expo version.
Check this out: https://github.com/expo/expo/issues/8210