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
Related
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.
Our React Native project has both Segment and CodePush integrated.
Segment works fine, normally.
But there's a scenario where Segment stops working right after a CodePush update has been installed. Nothing gets flushed out and none of the events are shown in the Live Debugger list - except for events that are tracked in the native layer (eg: "Application Opened" and "Application Backgrounded" - only these show up).
So I assumed that any Segment call in the RN - Javascript layer only stops working after the app restarts the bundle (by CodePush).
The user should close and kill the app and reopen the app for it to work normally again.
Happens to both iOS and Android (when installed from the store).
And weirdly enough, I cannot recreate the issue on Android when I run a debug or release build directly to my Android phone from my machine (it just works š¤·āāļø). Same goes for iOS simulators.
Any ideas or workarounds on this?
This is how the setup looks like:
import React, { Component } from "react";
import CodePush from "react-native-code-push";
import segment from "#segment/analytics-react-native";
...
class App extends Component {
constructor(props) {
super(props);
this.setupSegment();
}
private setupSegment(): void {
segment.setup("<Segment Write Key>", {
debug: true,
trackAppLifecycleEvents: true,
ios: {
trackAdvertising: true
}
});
}
...
}
export default CodePush({
installMode: CodePush.InstallMode.IMMEDIATE,
checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
updateDialog: null
})(App);
react-native: 0.61.5
react-native-code-push: 6.1.0
#segment/analytics-react-native: 1.1.1-beta.2 (also tried 1.1.1-beta.5)
I am using the expo-cli tool to develop in react native. I am using an android simulator: Once i run "yarn start" the console asks me:
To run the app with live reloading, choose one of:
ā¢ Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
ā¢ Press a for Android emulator.
ā¢ Press e to send a link to your phone with email.
ā¢ Press s to sign in and enable more options.
I press a. The simulator loads the expo app succesfully but the text displayed is not updated. What i mean with this is that before I just had this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Box><Text>Hello App</Text></Box>
</UtilityThemeProvider>
);
}
And indeed it was showing Hello App. But then I installed react navigation and similar dependiencies and i have this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Navigation />
</UtilityThemeProvider>
);
}
There is no error showing. Not in the console of the simulator, nor in the console, nor in the metro bundler! But the android simulator still itĀ“s showing Hello App
HereĀ“s how i export and import the Navigator component:
index.js:
export default class Navigation extends Component{
state = {}
render(){
return <AppNavigator />
}
}
App.js:
import Navigation from './src/views/index'
Things iĀ“ve tried:
Restart the simulator device
2- Stop the server and run yarn start again
3- Make sure my IDE is still in autosave mode
Any idea what i could do? Could it be possible that iĀ“ve touched something to disable re-load?
Click on Android simulator Ctrl + M and check if you have Enable Live Reload option
I try use code:
import {BackHandler} from 'react-native';
onPress = () => {
BackHandler.exitApp()
}
BackHandler not working on Android
BackHandler not working on IOS ?
BackHandler is specifically for Android and tvOS functions and is not applicable in iOS apps. It is meant to detect hardware back button presses and iOS devices don't have a hardware back button.
It looks like you are trying to close the app on a button press, but this is not a very common pattern for iOS apps so maybe reconsider if you need it in your app. However, if you need this functionality, you can use react-native-exit-app to programmatically exit the application.
For Android, Use BackAndroid to exit the App
import React, {
BackAndroid,
} from 'react-native';
BackAndroid.exitApp();