Skip to content

Commit

Permalink
deps: Add and use expo-screen-orientation.
Browse files Browse the repository at this point in the history
This is a best approximation of the functionality previously
provided by `react-native-orientation`, which is unmaintained and is
giving us errors that hint it will be unusable in the future.

We followed a link to additional installation instructions [1] for
bare React Native apps, and used those: it meant changing a line in
ios/ZulipMobile/AppDelegate.m. We chose the second option at step 4
there, to change the "default screen orientation", specifically, to
`UIInterfaceOrientationMaskAll`. The screen did not respond to the
physical device's rotation otherwise.

That setup step is done in the same commit as the JavaScript package
is used; we assume the `AppDelegate.m` changes will break something
if they coincide with the use of `react-native-orientation`.
  • Loading branch information
chrisbobbe committed Jun 9, 2020
1 parent af1bda5 commit 3dd55e5
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 9 deletions.
1 change: 1 addition & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ flow-typed/@sentry/react-native_v1.x.x.js
flow-typed/@react-native-community/async-storage_v1.x.x.js
flow-typed/react-native-webview_v7.x.x.js
flow-typed/react-native-url-polyfill_vx.x.x.js
flow-typed/expo-screen-orientation_vx.x.x.js


[strict]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ public List<Package> getPackageList() {
new expo.modules.application.ApplicationPackage(),
new expo.modules.constants.ConstantsPackage(),
new expo.modules.filesystem.FileSystemPackage(),
new expo.modules.permissions.PermissionsPackage()
new expo.modules.permissions.PermissionsPackage(),
new expo.modules.screenorientation.ScreenOrientationPackage()
);
}
}
128 changes: 128 additions & 0 deletions flow-typed/expo-screen-orientation_vx.x.x.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
// Assembled with help from Flowgen v1.10.0.
//
// Modules 'expo-screen-orientation/build/ScreenOrientation' and
// 'expo-screen-orientation/build/ScreenOrientation.types' correspond
// to files at those paths in node_modules.

declare module 'expo-screen-orientation/build/ScreenOrientation' {
/**
* Flowtype definitions for ScreenOrientation
* Generated by Flowgen from a Typescript Definition
* Flowgen v1.10.0
*/

// We can't import Subscription; see
// https://github.com/flow-typed/flow-typed/blob/master/CONTRIBUTING.md#dont-import-types-from-other-libdefs
//
// So, copy it here (it's small).
// https://github.com/expo/expo/blob/master/packages/%40unimodules/react-native-adapter/src/EventEmitter.ts#L13-L15
declare type Subscription = {
remove: () => void,
};

import typeof {
Orientation,
OrientationLock,
SizeClassIOS,
WebOrientation,
WebOrientationLock,
} from 'expo-screen-orientation/build/ScreenOrientation.types';
import type {
OrientationChangeEvent,
OrientationChangeListener,
PlatformOrientationInfo,
ScreenOrientationInfo,
} from 'expo-screen-orientation/build/ScreenOrientation.types';

declare export function lockAsync(orientationLock: OrientationLock): Promise<void>;
declare export function lockPlatformAsync(options: PlatformOrientationInfo): Promise<void>;
declare export function unlockAsync(): Promise<void>;
declare export function getOrientationAsync(): Promise<Orientation>;
declare export function getOrientationLockAsync(): Promise<OrientationLock>;
declare export function getPlatformOrientationLockAsync(): Promise<PlatformOrientationInfo>;
declare export function supportsOrientationLockAsync(
orientationLock: OrientationLock,
): Promise<boolean>;
declare export function addOrientationChangeListener(
listener: OrientationChangeListener,
): Subscription;
declare export function removeOrientationChangeListeners(): void;
declare export function removeOrientationChangeListener(subscription: Subscription): void;
}

declare module 'expo-screen-orientation/build/ScreenOrientation.types' {
/**
* Flowtype definitions for ScreenOrientation.types.d.ts
* Generated by Flowgen from a Typescript Definition
* Flowgen v1.10.0
*/

declare export var Orientation: {|
+UNKNOWN: 0, // 0
+PORTRAIT_UP: 1, // 1
+PORTRAIT_DOWN: 2, // 2
+LANDSCAPE_LEFT: 3, // 3
+LANDSCAPE_RIGHT: 4, // 4
|};

declare export var OrientationLock: {|
+DEFAULT: 0, // 0
+ALL: 1, // 1
+PORTRAIT: 2, // 2
+PORTRAIT_UP: 3, // 3
+PORTRAIT_DOWN: 4, // 4
+LANDSCAPE: 5, // 5
+LANDSCAPE_LEFT: 6, // 6
+LANDSCAPE_RIGHT: 7, // 7
+OTHER: 8, // 8
+UNKNOWN: 9, // 9
|};

declare export var SizeClassIOS: {|
+REGULAR: 0, // 0
+COMPACT: 1, // 1
+UNKNOWN: 2, // 2
|};

declare export var WebOrientationLock: {|
+PORTRAIT_PRIMARY: 'portrait-primary', // "portrait-primary"
+PORTRAIT_SECONDARY: 'portrait-secondary', // "portrait-secondary"
+PORTRAIT: 'portrait', // "portrait"
+LANDSCAPE_PRIMARY: 'landscape-primary', // "landscape-primary"
+LANDSCAPE_SECONDARY: 'landscape-secondary', // "landscape-secondary"
+LANDSCAPE: 'landscape', // "landscape"
+ANY: 'any', // "any"
+NATURAL: 'natural', // "natural"
+UNKNOWN: 'unknown', // "unknown"
|};

declare export var WebOrientation: {|
+PORTRAIT_PRIMARY: 'portrait-primary', // "portrait-primary"
+PORTRAIT_SECONDARY: 'portrait-secondary', // "portrait-secondary"
+LANDSCAPE_PRIMARY: 'landscape-primary', // "landscape-primary"
+LANDSCAPE_SECONDARY: 'landscape-secondary', // "landscape-secondary"
|};
declare export type PlatformOrientationInfo = {
screenOrientationConstantAndroid?: number,
screenOrientationArrayIOS?: $Values<typeof Orientation>[],
screenOrientationLockWeb?: $Values<typeof WebOrientationLock>,
...
};
declare export type ScreenOrientationInfo = {
orientation: $Values<typeof Orientation>,
verticalSizeClass?: $Values<typeof SizeClassIOS>,
horizontalSizeClass?: $Values<typeof SizeClassIOS>,
...
};
declare export type OrientationChangeListener = (event: OrientationChangeEvent) => void;
declare export type OrientationChangeEvent = {
orientationLock: $Values<typeof OrientationLock>,
orientationInfo: ScreenOrientationInfo,
...
};
}

declare module 'expo-screen-orientation' {
declare export * from 'expo-screen-orientation/build/ScreenOrientation'
declare export * from 'expo-screen-orientation/build/ScreenOrientation.types'
}
8 changes: 8 additions & 0 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ PODS:
- EXPermissions (7.0.0):
- UMCore
- UMPermissionsInterface
- EXScreenOrientation (1.0.0):
- React-Core
- UMCore
- Folly (2018.10.22.00):
- boost-for-react-native
- DoubleConversion
Expand Down Expand Up @@ -156,6 +159,7 @@ DEPENDENCIES:
- EXConstants (from `../node_modules/expo-constants/ios`)
- EXFileSystem (from `../node_modules/expo-file-system/ios`)
- EXPermissions (from `../node_modules/expo-permissions/ios`)
- EXScreenOrientation (from `../node_modules/expo-screen-orientation/ios`)
- Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- React (from `../node_modules/react-native/`)
Expand Down Expand Up @@ -229,6 +233,9 @@ EXTERNAL SOURCES:
EXPermissions:
:path: !ruby/object:Pathname
path: "../node_modules/expo-permissions/ios"
EXScreenOrientation:
:path: !ruby/object:Pathname
path: "../node_modules/expo-screen-orientation/ios"
Folly:
:podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
glog:
Expand Down Expand Up @@ -346,6 +353,7 @@ SPEC CHECKSUMS:
EXConstants: 857aa7b1c84e2878f8402d712061860bca16a697
EXFileSystem: 7e53a2c30a2eb6987ba6d5158ab908f947523228
EXPermissions: df10ad83df2f6b647aec304619354f8ab48d5f63
EXScreenOrientation: 44d3cd3a99a86b9cb681e742697bc2c057d7fbd2
Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
glog: 1f3da668190260b06b429bb211bfbee5cd790c28
React: 68e7f8dfc27729eade18423072a143120f2f32ab
Expand Down
3 changes: 2 additions & 1 deletion ios/ZulipMobile/AppDelegate.m
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
#import <UMCore/UMModuleRegistry.h>
#import <UMReactNativeAdapter/UMNativeModulesProxy.h>
#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>
#import <EXScreenOrientation/EXScreenOrientationViewController.h>

@implementation AppDelegate

Expand All @@ -36,7 +37,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
UIViewController *rootViewController = [[EXScreenOrientationViewController alloc] initWithDefaultScreenOrientationMask:UIInterfaceOrientationMaskAll];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"color": "^3.0.0",
"date-fns": "^1.29.0",
"expo-application": "^2.1.1",
"expo-screen-orientation": "^1.0.0",
"immutable": "^4.0.0-rc.12",
"json-stringify-safe": "^5.0.1",
"katex": "^0.11.1",
Expand Down
29 changes: 22 additions & 7 deletions src/boot/AppEventHandlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
import { AppState, View, StyleSheet, Platform, NativeModules } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import SafeArea from 'react-native-safe-area';
import Orientation from 'react-native-orientation';
import * as ScreenOrientation from 'expo-screen-orientation';

import type { Node as React$Node } from 'react';
import type { Dispatch, Orientation as OrientationT } from '../types';
Expand Down Expand Up @@ -69,13 +69,30 @@ type Props = $ReadOnly<{|
unreadCount: number,
|}>;

type OrientationLookup = {|
[expoKey: $Values<typeof ScreenOrientation.Orientation>]: OrientationT,
|};

const orientationLookup: OrientationLookup = {
[ScreenOrientation.Orientation.UNKNOWN]: 'PORTRAIT',
[ScreenOrientation.Orientation.PORTRAIT_UP]: 'PORTRAIT',
[ScreenOrientation.Orientation.PORTRAIT_DOWN]: 'PORTRAIT',
[ScreenOrientation.Orientation.LANDSCAPE_LEFT]: 'LANDSCAPE',
[ScreenOrientation.Orientation.LANDSCAPE_RIGHT]: 'LANDSCAPE',
};

class AppEventHandlers extends PureComponent<Props> {
/** NetInfo disconnection callback. */
netInfoDisconnectCallback: (() => void) | null = null;

handleOrientationChange = (orientation: OrientationT) => {
handleOrientationChange = (event: ScreenOrientation.OrientationChangeEvent) => {
const { dispatch } = this.props;
dispatch(appOrientation(orientation));

const {
orientationInfo: { orientation },
} = event;

dispatch(appOrientation(orientationLookup[orientation]));
};

// https://github.com/react-native-community/react-native-netinfo/tree/v3.2.1
Expand Down Expand Up @@ -113,8 +130,7 @@ class AppEventHandlers extends PureComponent<Props> {
SafeArea.getSafeAreaInsetsForRootView().then(params =>
dispatch(initSafeAreaInsets(params.safeAreaInsets)),
);
// $FlowFixMe: libdef wrongly says callback's parameter is optional
Orientation.addOrientationListener(this.handleOrientationChange);
ScreenOrientation.addOrientationChangeListener(this.handleOrientationChange);
this.notificationListener.start();
}

Expand All @@ -125,8 +141,7 @@ class AppEventHandlers extends PureComponent<Props> {
}
AppState.removeEventListener('change', this.handleAppStateChange);
AppState.removeEventListener('memoryWarning', this.handleMemoryWarning);
// $FlowFixMe: libdef wrongly says callback's parameter is optional
Orientation.removeOrientationListener(this.handleOrientationChange);
ScreenOrientation.removeOrientationChangeListeners();
this.notificationListener.stop();
}

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3737,6 +3737,11 @@ expo-permissions@~7.0.0:
resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-7.0.0.tgz#f4135c3cf8e49c673a9a714459a1eb2b40fe2092"
integrity sha512-C+qyVz+pdZO4YpVR2HSC3gsBZg0Qb8brCFgzmDmWcAtgrOiHClaLPdhI2XtQuGh8ubXcKPUGZp++UCEGiG0Jxg==

expo-screen-orientation@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-1.0.0.tgz#a168b7493e7a7b45da2c80b1b0d4e89e1f8e7698"
integrity sha512-McYHWSA3KVgh3IeztKg0oxkHtSRzDfqGRSHg6GgIici5C93LOF4tGzO38tLNVGXIjbu8EdvBRB7pslKS73AXGg==

extend-shallow@^1.1.2:
version "1.1.4"
resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
Expand Down

0 comments on commit 3dd55e5

Please sign in to comment.