Feat/orientation support

src/helpers/Constants.js

@@ -1,30 +1,77 @@
+import _ from 'lodash';
 import {Platform, Dimensions, NativeModules, I18nManager} from 'react-native';
 
-const {StatusBarManager} = NativeModules;
-const {height, width} = Dimensions.get('window');
 
+const dimensionsScope = {
+  WINDOW: 'window',
+  SCREEN: 'screen'
+}
+const orientations = {
+  PORTRAIT: 'portrait',
+  LANDSCAPE: 'landscape'
+}
+
+/* Platform */
 export const isAndroid = Platform.OS === 'android';
 export const isIOS = Platform.OS === 'ios';
-export const screenWidth = width;
-export const screenHeight = height;
-// export const isSmallScreen = isIOS ? screenWidth <= 320 : screenWidth <= 360;
-export const isSmallScreen = screenWidth <= 340;
-export const isShortScreen = screenHeight <= 600;
-export let statusBarHeight = isIOS ? 20 : StatusBarManager.HEIGHT; // eslint-disable-line
-export const isIphoneX = isIOS && !Platform.isPad && !Platform.isTVOS && (screenHeight >= 812 || screenWidth >= 812);
-export const isRTL = I18nManager.isRTL;
 
 export function getAndroidVersion() {
   return isAndroid ? parseInt(Platform.Version, 10) : undefined;
 }
 
-export function getSafeAreaInsets(mode) {
-  return (mode === 'landscape') ? 
+/* Devices */
+export const isIphoneX = isIOS && !Platform.isPad && !Platform.isTVOS && (screenHeight >= 812 || screenWidth >= 812);
+
+/* Navigation */
+const {StatusBarManager} = NativeModules;
+export let statusBarHeight = setStatusBarHeight();
+
+function setStatusBarHeight() {
+  statusBarHeight = isIOS ? 20 : StatusBarManager.HEIGHT; // eslint-disable-line
+  if (isIOS) {
+    // override guesstimate height with the actual height from StatusBarManager
+    StatusBarManager.getHeight(data => (statusBarHeight = data.height));
+  }
+}
+
+/* Layout */
+export const isRTL = I18nManager.isRTL;
+
+const {height, width} = Dimensions.get(dimensionsScope.WINDOW);
+export let orientation = getOrientation(height, width);
+export let screenWidth = width;
+export let screenHeight = height;
+export let isSmallScreen = screenWidth <= 340;
+export let isShortScreen = screenHeight <= 600;
+
+export function getSafeAreaInsets() {
+  return (orientation === orientation.LANDSCAPE) ? 
     {left: 44, right: 44, bottom: 24, top: 0} : 
     {left: 0, right: 0, bottom: 34, top: 44};
 }
 
-// override guesstimate height with the actual height from StatusBarManager
-if (isIOS) {
-  StatusBarManager.getHeight(data => (statusBarHeight = data.height));
+/* Orientation */
+function getOrientation(height, width) {
+  return width < height ? orientations.PORTRAIT : orientations.LANDSCAPE;
+}
+
+function updateConstants() {
+  const {height, width} = Dimensions.get(dimensionsScope.WINDOW);
+  orientation = getOrientation(height, width);
+  screenWidth = width;
+  screenHeight = height;
+  isSmallScreen = screenWidth <= 340;
+  isShortScreen = screenHeight <= 600;
+
+  setStatusBarHeight();
+}
+
+Dimensions.addEventListener('change', updateConstants);
+
+export function addDimensionsEventListener(callback) {
+  Dimensions.addEventListener('change', callback);
+}
+
+export function removeDimensionsEventListener(callback) {
+  Dimensions.removeEventListener('change', callback);
 }