Merge pull request #738 from shoutem/release/5.3.0

Release/5.3.0

__tests__/View-test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { View } from '../components/View';
+
+test('View renders correctly', () => {
+  const tree = renderer.create(
+    <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />,
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+test('View renders children vertically with vertical styleName', () => {
+  const tree = renderer.create(
+    <View styleName="vertical">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View centers children horizontally with h-center styleName', () => {
+  const tree = renderer.create(
+    <View style={{ width: 100 }} styleName="vertical h-center">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View renders children horizontally with horizontal styleName', () => {
+  const tree = renderer.create(
+    <View styleName="horizontal">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View centers children vertically with v-center styleName', () => {
+  const tree = renderer.create(
+    <View style={{ height: 100 }} styleName="horizontal v-center">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View fills parent with fill-parent styleName', () => {
+  const tree = renderer.create(
+    <View style={{ height: 40, width: 40 }}>
+      <View style={{ backgroundColor: 'red' }} styleName="fill-parent" />
+    </View>
+  );
+});

__tests__/__snapshots__/View-test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View renders correctly 1`] = `
+<View
+  animationOptions={Object {}}
+  onLayout={[Function]}
+  style={
+    Object {
+      "backgroundColor": "red",
+      "height": 40,
+      "width": 40,
+    }
+  }
+/>
+`;

const.js

@@ -1,22 +1,30 @@
-const IPHONE_X_HOME_INDICATOR_PADDING = 34;
-const IPHONE_X_LONG_SIDE = 812;
-const IPHONE_X_NOTCH_PADDING = 30;
-
-const IPHONE_XR_LONG_SIDE = 896;
-const IPHONE_XR_NOTCH_PADDING = 34;
-
-const IPHONE_12_LONG_SIDE = 844;
-const IPHONE_12_MAX_LONG_SIDE = 926;
-
-const NAVIGATION_HEADER_HEIGHT = 64;
-
-module.exports = {
+import { Platform, StatusBar } from 'react-native';
+import {
+  IPHONE_12_LONG_SIDE,
+  IPHONE_12_MAX_LONG_SIDE,
   IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_LONG_SIDE,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
+  NAVIGATION_HEADER_HEIGHT,
+} from './helpers';
+
+const STATUS_BAR_OFFSET =
+  Platform.OS === 'android' ? -StatusBar.currentHeight : 0;
+
+// TODO: Deprecate and remove exports from here
+// Currently leaving for backwards compatibility
+export {
   IPHONE_12_LONG_SIDE,
   IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_HOME_INDICATOR_PADDING,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_X_NOTCH_PADDING,
+  IPHONE_XR_LONG_SIDE,
+  IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 };

helpers/device-selector.js

@@ -1,16 +1,22 @@
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, Platform, StatusBar } from 'react-native';
 import { hasNotch } from 'react-native-device-info';
 import _ from 'lodash';
-import {
-  IPHONE_12_LONG_SIDE,
-  IPHONE_12_MAX_LONG_SIDE,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_XR_LONG_SIDE,
-} from '../const';
 
 const { OS, isPad, isTVOS } = Platform;
 const { width, height } = Dimensions.get('window');
 
+export const IPHONE_X_HOME_INDICATOR_PADDING = 34;
+export const IPHONE_X_LONG_SIDE = 812;
+export const IPHONE_X_NOTCH_PADDING = 30;
+
+export const IPHONE_XR_LONG_SIDE = 896;
+export const IPHONE_XR_NOTCH_PADDING = 34;
+
+export const IPHONE_12_LONG_SIDE = 844;
+export const IPHONE_12_MAX_LONG_SIDE = 926;
+
+export const NAVIGATION_HEADER_HEIGHT = 64;
+
 const xDimensionsMatch =
   height === IPHONE_X_LONG_SIDE || width === IPHONE_X_LONG_SIDE;
 
@@ -58,6 +64,13 @@ function select(settings) {
   return _.get(settings, 'default');
 }
 
+export const NAVIGATION_BAR_HEIGHT = select({
+  iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
+  iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
+  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
+  default: NAVIGATION_HEADER_HEIGHT,
+});
+
 export const Device = {
   isIphoneX,
   isIphoneXR,

helpers/index.js

@@ -1,4 +1,13 @@
-import { Device } from './device-selector';
-import Keyboard from './keyboard';
-
-export { Device, Keyboard };
+export {
+  Device,
+  IPHONE_12_LONG_SIDE,
+  IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_HOME_INDICATOR_PADDING,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_X_NOTCH_PADDING,
+  IPHONE_XR_LONG_SIDE,
+  IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
+  NAVIGATION_HEADER_HEIGHT,
+} from './device-selector';
+export { calculateKeyboardOffset, default as Keyboard } from './keyboard';

helpers/keyboard.js

@@ -1,5 +1,5 @@
 import { Platform, StatusBar } from 'react-native';
-import { NAVIGATION_BAR_HEIGHT } from '../theme';
+import { NAVIGATION_BAR_HEIGHT } from './device-selector';
 
 export function calculateKeyboardOffset(extraOffset = 0) {
   const resolvedOffset = NAVIGATION_BAR_HEIGHT + extraOffset;
@@ -11,4 +11,8 @@ export function calculateKeyboardOffset(extraOffset = 0) {
   return StatusBar.currentHeight + resolvedOffset;
 }
 
+// TODO: Deprecate and remove Keyboard.calculateKeyboardOffset
+// Replace with direct function call. It's cleaner for any practical use of this
+// because we will usually import Keyboard from react-native alongside this, so
+// we're forced to rename imports.
 export default { calculateKeyboardOffset };

index.js

@@ -1,12 +1,4 @@
 import { setDefaultThemeStyle } from './init';
-import getTheme, {
-  calculateLineHeight,
-  defaultThemeVariables,
-  dimensionRelativeToIphone,
-  resolveFontFamily,
-  resolveFontStyle,
-  resolveFontWeight,
-} from './theme';
 
 setDefaultThemeStyle();
 
@@ -15,12 +7,13 @@ export {
   calculateLineHeight,
   defaultThemeVariables,
   dimensionRelativeToIphone,
-  getTheme,
+  default as getTheme,
   resolveFontFamily,
   resolveFontStyle,
   resolveFontWeight,
-};
+} from './theme';
 
+// Services
 export {
   createScopedResolver,
   resolveVariable,
@@ -76,8 +69,14 @@ export { TouchableOpacity } from './components/TouchableOpacity';
 export { Video } from './components/Video';
 export { View } from './components/View';
 export { YearRangePicker } from './components/YearRangePicker';
+
+// Examples
 export { Examples } from './examples/components';
-export { Device, Keyboard } from './helpers';
+
+// Helpers
+export { calculateKeyboardOffset, Device, Keyboard } from './helpers';
+
+// HTML
 export { Html } from './html';
 export { SimpleHtml } from './html';
 
@@ -89,5 +88,7 @@ export {
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
   nativeDependencies,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 } from './const';