[dev-client] support landscape orientation (#18509)

packages/expo-dev-launcher/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### 🎉 New features
 
+- Add landscape orienation support. ([#18509](https://github.com/expo/expo/pull/18509)) by [@ajsmth](https://github.com/ajsmth)
+
 ### 🐛 Bug fixes
 
 - Fixed `the function must be called on main queue` error when the app is reload from the error screen on iOS. ([#18563](https://github.com/expo/expo/pull/18563) by [@lukmccall](https://github.com/lukmccall))

packages/expo-dev-launcher/ios/EXDevLauncherController.m

@@ -544,9 +544,6 @@ - (void)_initAppWithUrl:(NSURL *)appUrl bundleUrl:(NSURL *)bundleUrl manifest:(E
 
     [self _ensureUserInterfaceStyleIsInSyncWithTraitEnv:self.window.rootViewController];
 
-    [[UIDevice currentDevice] setValue:@(orientation) forKey:@"orientation"];
-    [UIViewController attemptRotationToDeviceOrientation];
-
     if (backgroundColor) {
       self.window.rootViewController.view.backgroundColor = backgroundColor;
       self.window.backgroundColor = backgroundColor;

packages/expo-dev-launcher/ios/Manifest/EXDevLauncherManifestHelper.swift

@@ -5,7 +5,9 @@ import UIKit
 @objc
 public class EXDevLauncherManifestHelper: NSObject {
   private static func defaultOrientationForOrientationMask(_ orientationMask: UIInterfaceOrientationMask) -> UIInterfaceOrientation {
-    if orientationMask.contains(.portrait) {
+    if orientationMask.contains(.all) {
+      return UIInterfaceOrientation.unknown
+    } else  if orientationMask.contains(.portrait) {
       return UIInterfaceOrientation.portrait
     } else if orientationMask.contains(.landscapeLeft) {
       return UIInterfaceOrientation.landscapeLeft

packages/expo-dev-launcher/ios/ReactDelegateHandler/ExpoDevLauncherReactDelegateHandler.swift

@@ -79,8 +79,12 @@ public class ExpoDevLauncherReactDelegateHandler: ExpoReactDelegateHandler, RCTB
     let rootView = RCTRootView(bridge: bridge!, moduleName: self.rootViewModuleName!, initialProperties: self.rootViewInitialProperties)
     rootView.backgroundColor = self.deferredRootView?.backgroundColor ?? UIColor.white
     let window = getWindow()
-    window.rootViewController = self.reactDelegate?.createRootViewController()
-    window.rootViewController!.view = rootView
+
+    // NOTE: this order of assignment seems to actually have an effect on behaviour
+    // direct assignment of window.rootViewController.view = rootView does not work
+    let rootViewController = self.reactDelegate?.createRootViewController()
+    rootViewController!.view = rootView
+    window.rootViewController = rootViewController
     window.makeKeyAndVisible()
 
     // it is purposeful that we don't clean up saved properties here, because we may initialize

packages/expo-dev-launcher/ios/Tests/EXDevLauncherManifestHelperTests.swift

@@ -8,8 +8,8 @@ class EXDevLauncherManifestHelperTests: XCTestCase {
   func testExportManifestOrientation() {
     XCTAssertEqual(UIInterfaceOrientation.portrait, EXDevLauncherManifestHelper.exportManifestOrientation("portrait"))
     XCTAssertEqual(UIInterfaceOrientation.landscapeLeft, EXDevLauncherManifestHelper.exportManifestOrientation("landscape"))
-    XCTAssertEqual(UIInterfaceOrientation.portrait, EXDevLauncherManifestHelper.exportManifestOrientation("default"))
-    XCTAssertEqual(UIInterfaceOrientation.portrait, EXDevLauncherManifestHelper.exportManifestOrientation("unsupported-value"))
+    XCTAssertEqual(UIInterfaceOrientation.unknown, EXDevLauncherManifestHelper.exportManifestOrientation("default"))
+    XCTAssertEqual(UIInterfaceOrientation.unknown, EXDevLauncherManifestHelper.exportManifestOrientation("unsupported-value"))
   }
 
   func testExportManifestUserInterfaceStyle() {

packages/expo-dev-menu/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### 🎉 New features
 
+- Add landscape orienation support. ([#18509](https://github.com/expo/expo/pull/18509)) by [@ajsmth](https://github.com/ajsmth)
+
 ### 🐛 Bug fixes
 
 - Fix the duplicated `DevMenuRNGestureHandlerStateManager.h` output file compilation error on iOS. ([#18562](https://github.com/expo/expo/pull/18562) by [@lukmccall](https://github.com/lukmccall))

packages/expo-dev-menu/android/src/main/java/expo/modules/devmenu/DevMenuActivity.kt

@@ -80,18 +80,6 @@ class DevMenuActivity : ReactActivity() {
     }
   }
 
-  override fun onCreate(savedInstanceState: Bundle?) {
-    // Due to a bug in API 26, we can't set the orientation in translucent activity.
-    // See https://stackoverflow.com/questions/48072438/java-lang-illegalstateexception-only-fullscreen-opaque-activities-can-request-o
-    requestedOrientation = if (Build.VERSION.SDK_INT == Build.VERSION_CODES.O) {
-      ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
-    } else {
-      ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-    }
-
-    super.onCreate(savedInstanceState)
-  }
-
   override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean {
     return if (keyCode == KeyEvent.KEYCODE_MENU || DevMenuManager.onKeyEvent(keyCode, event)) {
       DevMenuManager.closeMenu()

packages/expo-dev-menu/app/components/BottomSheet.tsx

@@ -67,6 +67,8 @@ type Props = {
   innerGestureHandlerRefs: [React.RefObject<PanGestureHandler>, React.RefObject<TapGestureHandler>];
 
   animationEnabled?: boolean;
+
+  screenHeight: number;
 };
 
 type State = {
@@ -77,8 +79,6 @@ type State = {
   heightOfContent: Animated.Value<number>;
 };
 
-const { height: screenHeight } = Dimensions.get('window');
-
 const P = <T extends any>(android: T, ios: T): T => (Platform.OS === 'ios' ? ios : android);
 
 const magic = {
@@ -532,7 +532,10 @@ export class BottomSheet extends React.Component<Props, State> {
     this.state.heightOfContent.setValue(height - this.state.initSnap);
   };
 
-  static renumber = (str: string) => (Number(str.split('%')[0]) * screenHeight) / 100;
+  static renumber = (str: string, screenHeight: number) => {
+    const result = (Number(str.split('%')[0]) * screenHeight) / 100;
+    return result;
+  };
 
   static getDerivedStateFromProps(props: Props, state: State | undefined): State {
     let snapPoints;
@@ -551,7 +554,7 @@ export class BottomSheet extends React.Component<Props, State> {
           if (typeof s === 'number') {
             return { val: s, ind: i };
           } else if (typeof s === 'string') {
-            return { val: BottomSheet.renumber(s), ind: i };
+            return { val: BottomSheet.renumber(s, props.screenHeight), ind: i };
           }
 
           throw new Error(`Invalid type for value ${s}: ${typeof s}`);
@@ -690,8 +693,10 @@ const styles = StyleSheet.create({
   },
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
+    borderRadius: 10,
+    maxWidth: 525,
+    width: '100%',
+    alignSelf: 'center',
   },
   fullscreenView: {
     width: '100%',

packages/expo-dev-menu/app/components/Main.tsx

@@ -351,6 +351,7 @@ export function Main({ registeredCallbacks = [] }: MainProps) {
           </Row>
         </Button.ScaleOnPressContainer>
       </View>
+      <Spacer.Vertical size="large" />
     </View>
   );
 }

packages/expo-dev-menu/app/hooks/useBottomSheet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, Pressable } from 'react-native';
+import { View, StyleSheet, Pressable, useWindowDimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { BottomSheet } from '../components/BottomSheet';
@@ -55,6 +55,8 @@ export function BottomSheetProvider({ children }: BottomSheetProviderProps) {
     outputRange: [0, 0.5],
   });
 
+  const { height: screenHeight } = useWindowDimensions();
+
   return (
     <BottomSheetContext.Provider value={{ collapse }}>
       <View style={styles.container}>
@@ -69,6 +71,7 @@ export function BottomSheetProvider({ children }: BottomSheetProviderProps) {
           />
         </Pressable>
         <BottomSheet
+          screenHeight={screenHeight}
           ref={bottomSheetRef}
           callbackNode={callbackNode.current}
           snapPoints={snapPoints}>

packages/expo-dev-menu/ios/DevMenuViewController.swift

@@ -44,21 +44,9 @@ class DevMenuViewController: UIViewController {
     reactRootView?.becomeFirstResponder()
   }
 
-  override var shouldAutorotate: Bool {
-    get {
-      return true
-    }
-  }
-
   override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
     get {
-      return UIInterfaceOrientationMask.portrait
-    }
-  }
-
-  override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
-    get {
-      return UIInterfaceOrientation.portrait
+      return UIInterfaceOrientationMask.all
     }
   }