@shoutem/ui 5.2.2 → 5.4.0

package/__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>
+  );
+});

package/__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,
+    }
+  }
+/>
+`;

package/components/Button.js

@@ -5,12 +5,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class Button extends PureComponent {
   render() {
-    const { style, ...otherProps } = this.props;
+    const { style } = this.props;
     const { underlayColor, ...otherStyle } = style;
 
     return (
       <TouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         underlayColor={underlayColor}
       />

package/components/EmptyListImage.js

@@ -52,7 +52,6 @@ class EmptyListImage extends PureComponent {
 }
 
 EmptyListImage.propTypes = {
-  ...EmptyListImage.propTypes,
   image: PropTypes.func,
   imageStyle: PropTypes.object,
   message: PropTypes.string,

package/components/GridRow.js

@@ -1,5 +1,5 @@
 import React, { Children, PureComponent } from 'react';
-import { View as RNView, ViewPropTypes } from 'react-native';
+import { View as RNView } from 'react-native';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
@@ -35,7 +35,7 @@ class GridRow extends PureComponent {
 }
 
 GridRow.propTypes = {
-  ...ViewPropTypes,
+  ...View.propTypes,
   columns: PropTypes.number.isRequired,
 };
 

package/components/Icon/assets/delete.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82322 3.82322C9.87011 3.77634 9.9337 3.75 10 3.75H14C14.0663 3.75 14.1299 3.77634 14.1768 3.82322C14.2237 3.87011 14.25 3.9337 14.25 4V6.25H9.75V4C9.75 3.9337 9.77634 3.87011 9.82322 3.82322ZM8.25 6.25V4C8.25 3.53587 8.43437 3.09075 8.76256 2.76256C9.09075 2.43437 9.53587 2.25 10 2.25H14C14.4641 2.25 14.9092 2.43437 15.2374 2.76256C15.5656 3.09075 15.75 3.53587 15.75 4V6.25H18.9912H19.0071H20C20.4142 6.25 20.75 6.58579 20.75 7C20.75 7.41421 20.4142 7.75 20 7.75H19.6901L18.7498 19.0337C18.741 19.7508 18.4523 20.4368 17.9445 20.9445C17.4288 21.4603 16.7293 21.75 16 21.75H8C7.27065 21.75 6.57118 21.4603 6.05546 20.9445C5.54767 20.4368 5.25898 19.7508 5.25021 19.0337L4.3099 7.75H4C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25H4.9929H5.00877H8.25ZM15 7.75H9H5.8151L6.74741 18.9377C6.74914 18.9584 6.75 18.9792 6.75 19C6.75 19.3315 6.8817 19.6495 7.11612 19.8839C7.35054 20.1183 7.66848 20.25 8 20.25H16C16.3315 20.25 16.6495 20.1183 16.8839 19.8839C17.1183 19.6495 17.25 19.3315 17.25 19C17.25 18.9792 17.2509 18.9584 17.2526 18.9377L18.1849 7.75H15ZM10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V17C10.75 17.4142 10.4142 17.75 10 17.75C9.58579 17.75 9.25 17.4142 9.25 17V11C9.25 10.5858 9.58579 10.25 10 10.25ZM14.75 11C14.75 10.5858 14.4142 10.25 14 10.25C13.5858 10.25 13.25 10.5858 13.25 11V17C13.25 17.4142 13.5858 17.75 14 17.75C14.4142 17.75 14.75 17.4142 14.75 17V11Z" fill="black"/>
+</svg>

package/components/Icon/assets/index.js

@@ -23,6 +23,7 @@ import close from './close.svg';
 import comment from './comment.svg';
 import comments from './comments.svg';
 import deals from './deals.svg';
+import deleteIcon from './delete.svg';
 import directions from './directions.svg';
 import downArrow from './down-arrow.svg';
 import download from './download.svg';
@@ -38,10 +39,10 @@ import eyeCrossed from './eye-crossed.svg';
 import facebook from './facebook.svg';
 import facebookLogo from './facebook-logo.svg';
 import folder from './folder.svg';
+import forward from './forward.svg';
 import forward5 from './forward-5.svg';
 import forward10 from './forward-10.svg';
 import forward30 from './forward-30.svg';
-import forward from './forward.svg';
 import friends from './friends.svg';
 import gallery from './gallery.svg';
 import garbageCan from './garbage-can.svg';
@@ -83,10 +84,10 @@ import radiobuttonOff from './radiobutton-off.svg';
 import radiobuttonOn from './radiobutton-on.svg';
 import receipt from './receipt.svg';
 import refresh from './refresh.svg';
+import replay from './replay.svg';
 import replay5 from './replay-5.svg';
 import replay10 from './replay-10.svg';
 import replay30 from './replay-30.svg';
-import replay from './replay.svg';
 import restaurant from './restaurant.svg';
 import restaurantMenu from './restaurant-menu.svg';
 import restore from './restore.svg';
@@ -97,8 +98,8 @@ import search from './search.svg';
 import settings from './settings.svg';
 import share from './share.svg';
 import shareAndroid from './share-android.svg';
-import sleep from './sleep.svg';
 import sidebar from './sidebar.svg';
+import sleep from './sleep.svg';
 import socialWall from './social-wall.svg';
 import stamp from './stamp.svg';
 import stop from './stop.svg';
@@ -142,6 +143,7 @@ export const defaultConfig = [
   { name: 'comment', icon: comment },
   { name: 'comments', icon: comments },
   { name: 'deals', icon: deals },
+  { name: 'delete', icon: deleteIcon },
   { name: 'directions', icon: directions },
   { name: 'down-arrow', icon: downArrow },
   { name: 'download', icon: download },

package/components/Image.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Image as RNImage, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
+import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import _ from 'lodash';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
@@ -82,7 +83,7 @@ class Image extends PureComponent {
 }
 
 Image.propTypes = {
-  ...RNImage.propTypes,
+  ...ImagePropTypes,
 };
 
 const AnimatedImage = connectAnimation(Image);

package/components/ImagePreview.js

@@ -8,9 +8,6 @@ import Icon from './Icon/Icon';
 
 const ZoomableImage = makeZoomable(Image);
 
-const CLOSE_ICON_NAME = 'clear';
-const CLOSE_ICON_SIZE = 25;
-
 /**
  * Renders an ImagePreview which shows an inline image preview.
  * When clicked, the image is displayed in full screen.

package/components/Lightbox.js

@@ -1,4 +1,4 @@
-import { default as Lightbox } from 'react-native-lightbox';
+import Lightbox from 'react-native-lightbox';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 

package/components/ScrollView/ScrollView.js

@@ -64,16 +64,18 @@ class ScrollView extends PureComponent {
   }
 
   addIphoneXPadding(style) {
-    if (typeof style.paddingBottom !== 'number') {
-      style.paddingBottom = 0;
+    const resolvedStyle = { ...style };
+
+    if (typeof resolvedStyle.paddingBottom !== 'number') {
+      resolvedStyle.paddingBottom = 0;
     }
 
-    style.paddingBottom = Device.select({
-      iPhoneX: style.paddingBottom + IPHONE_X_HOME_INDICATOR_PADDING,
-      default: style.paddingBottom,
+    resolvedStyle.paddingBottom = Device.select({
+      iPhoneX: resolvedStyle.paddingBottom + IPHONE_X_HOME_INDICATOR_PADDING,
+      default: resolvedStyle.paddingBottom,
     });
 
-    return style;
+    return resolvedStyle;
   }
 
   render() {

package/components/Text.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Text as RNText } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
@@ -10,7 +11,7 @@ class Text extends PureComponent {
 }
 
 Text.propTypes = {
-  ...RNText.propTypes,
+  ...TextPropTypes,
 };
 
 const AnimatedText = connectAnimation(Text);

package/components/TextInput.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
+import { TextInputPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import { connectAnimation, Wiggle } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
@@ -81,7 +82,9 @@ class TextInput extends PureComponent {
           />
         </Wiggle>
         {!!errorMessage && (
-          <Caption styleName="form-error sm-gutter-top" style={errorText}>{errorMessage}</Caption>
+          <Caption styleName="form-error sm-gutter-top" style={errorText}>
+            {errorMessage}
+          </Caption>
         )}
       </View>
     );
@@ -89,7 +92,7 @@ class TextInput extends PureComponent {
 }
 
 TextInput.propTypes = {
-  ...RNTextInput.propTypes,
+  ...TextInputPropTypes,
   style: PropTypes.object.isRequired,
   animate: PropTypes.bool,
   errorMessage: PropTypes.string,

package/components/Touchable.js

@@ -13,13 +13,13 @@ import { View } from './View';
  */
 class Touchable extends PureComponent {
   render() {
-    const { children, style, styleName, ...otherProps } = this.props;
+    const { children, style, styleName } = this.props;
     const { touchableNativeFeedback, touchableOpacity, ...otherStyle } = style;
 
     if (Platform.OS === 'android') {
       return (
         <TouchableNativeFeedback
-          {...otherProps}
+          {...this.props}
           style={touchableNativeFeedback}
         >
           <View virtual style={otherStyle} styleName={styleName}>
@@ -31,7 +31,7 @@ class Touchable extends PureComponent {
 
     return (
       <TouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={{
           ...otherStyle,
           ...touchableOpacity,

package/components/TouchableNativeFeedback.js

@@ -5,12 +5,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { background, useForeground, ...otherStyle } = style;
 
     return (
       <RNTouchableNativeFeedback
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         background={background}
         useForeground={useForeground}

package/components/TouchableOpacity.js

@@ -4,12 +4,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { activeOpacity, ...otherStyle } = style;
 
     return (
       <RNTouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         activeOpacity={activeOpacity}
       >

package/components/View.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import { View as RNView, ViewPropTypes } from 'react-native';
+import { View as RNView } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
@@ -7,21 +8,18 @@ import { LinearGradient } from './LinearGradient';
 
 class View extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { backgroundGradient, ...viewStyle } = style;
 
     let gradient = null;
     if (backgroundGradient) {
       gradient = (
-        <LinearGradient
-          styleName="fill-parent"
-          style={style.backgroundGradient}
-        />
+        <LinearGradient styleName="fill-parent" style={backgroundGradient} />
       );
     }
 
     return (
-      <RNView {...otherProps} style={viewStyle}>
+      <RNView {...this.props} style={viewStyle}>
         {gradient}
         {children}
       </RNView>

package/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,
 };

package/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,

package/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';

package/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 };

package/index.js

@@ -1,12 +1,4 @@
 import { setDefaultThemeStyle } from './init';
-import getTheme, {
-  calculateLineHeight,
-  defaultThemeVariables,
-  dimensionRelativeToIphone,
-  resolveFontFamily,
-  resolveFontStyle,
-  resolveFontWeight,
-} from './theme';
 
 setDefaultThemeStyle();
 
@@ -15,12 +7,15 @@ export {
   calculateLineHeight,
   defaultThemeVariables,
   dimensionRelativeToIphone,
-  getTheme,
+  default as getTheme,
   resolveFontFamily,
   resolveFontStyle,
   resolveFontWeight,
-};
+  responsiveHeight,
+  responsiveWidth,
+} from './theme';
 
+// Services
 export {
   createScopedResolver,
   resolveVariable,
@@ -76,8 +71,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 +90,7 @@ export {
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
   nativeDependencies,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 } from './const';

package/package.json

@@ -1,46 +1,48 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.2.2",
+  "version": "5.4.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "postinstall": "node ./scripts/add-native-deps",
-    "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
+    "test": "jest"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.0",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
+    "deprecated-react-native-prop-types": "2.3.0",
     "events": "1.1.0",
     "fs-extra": "7.0.1",
     "html-entities": "1.3.1",
     "htmlparser2": "3.10.1",
     "lodash": "4.17.21",
-    "lottie-react-native": "5.0.1",
+    "lottie-ios": "3.4.0",
+    "lottie-react-native": "5.1.4",
     "prop-types": "15.8.1",
     "qs": "6.9.3",
-    "react-native-device-info": "8.4.8",
+    "react-native-device-info": "9.0.2",
     "react-native-lightbox": "github:shoutem/react-native-lightbox#v0.7.2",
-    "react-native-linear-gradient": "2.5.6",
+    "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "11.7.0",
-    "react-native-photo-view": "github:shoutem/react-native-photo-view#e7f0003",
+    "react-native-photo-view": "github:shoutem/react-native-photo-view#a296aa2",
     "react-native-render-html": "4.2.5",
     "react-native-render-html-table-bridge": "0.6.0",
-    "react-native-svg": "12.1.1",
-    "react-native-svg-transformer": "0.14.3",
+    "react-native-svg": "12.3.0",
+    "react-native-svg-transformer": "1.0.0",
     "react-native-transformable-image": "github:shoutem/react-native-transformable-image#v0.0.20",
-    "react-native-webview": "11.0.3",
-    "react-native-youtube-iframe": "2.1.2",
+    "react-native-webview": "11.23.0",
+    "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
+    "react": ">=16.9.0",
     "react-native": ">=0.61.5"
   },
   "devDependencies": {
@@ -49,8 +51,6 @@
     "@babel/plugin-proposal-decorators": "7.16.7",
     "@shoutem/eslint-config-react-native": "~1.0.2",
     "babel-eslint": "10.1.0",
-    "chai": "4.2.0",
-    "deep-freeze": "0.0.1",
     "eslint": "6.8.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
@@ -59,18 +59,20 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-react-native": "3.11.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
+    "jest": "27.5.1",
     "metro-react-native-babel-preset": "0.66.2",
-    "mocha": "7.1.2",
     "prettier": "1.19.1",
-    "react-addons-test-utils": "15.6.2",
-    "react-dom": "16.14.0",
-    "react-native-mock-render": "0.1.9"
+    "react": "17.0.2",
+    "react-dom": "16.9.0",
+    "react-native": "0.68.2",
+    "react-test-renderer": "17.0.2"
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",
+    "lottie-ios",
+    "lottie-react-native",
     "react-native-device-info",
     "react-native-linear-gradient",
-    "lottie-react-native",
     "react-native-photo-view",
     "react-native-svg",
     "react-native-webview"
@@ -115,5 +117,15 @@
     "jsxBracketSameLine": false,
     "singleQuote": true,
     "trailingComma": "all"
+  },
+  "jest": {
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "examples/"
+    ],
+    "transformIgnorePatterns": [
+      "!/node_modules/@shoutem"
+    ]
   }
 }

package/theme.js

@@ -11,22 +11,15 @@ import {
   IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 } from './const';
 import { Device } from './helpers';
 import { resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
-const STATUS_BAR_OFFSET =
-  Platform.OS === 'android' ? -StatusBar.currentConfig : 0;
-export const NAVIGATION_BAR_HEIGHT = Device.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 sizeVariants = [
   '',
   'left',
@@ -54,10 +47,24 @@ export function dimensionRelativeToIphone(
   dimension,
   actualRefVal = window.width,
 ) {
+  // 375 is iPhone width
+  // eslint-disable-next-line no-console
+  console.warn(
+    'dimensionRelativeToIphone is depreacted and will be removed in next major release. Use responsiveWidth instead.',
+  );
+  return getSizeRelativeToReference(dimension, 375, actualRefVal);
+}
+
+export function responsiveWidth(dimension, actualRefVal = window.width) {
   // 375 is iPhone width
   return getSizeRelativeToReference(dimension, 375, actualRefVal);
 }
 
+export function responsiveHeight(dimension, actualRefVal = window.height) {
+  // 812 is iPhone height
+  return getSizeRelativeToReference(dimension, 812, actualRefVal);
+}
+
 // 'fontWeight' and 'fontStyle' aren't always supplied for every component, so we're setting default
 // values of 'normal'.
 export function resolveFontFamily(
@@ -591,65 +598,65 @@ export default () => {
     imageSizes: {
       // NOTE: '-avatar' styles do not work with ImageBackground
       '.small-avatar': {
-        width: dimensionRelativeToIphone(25),
-        height: dimensionRelativeToIphone(25),
+        width: responsiveWidth(25),
+        height: responsiveWidth(25),
         borderRadius: 12.5,
         borderWidth: 0,
       },
 
       '.small': {
-        width: dimensionRelativeToIphone(65),
-        height: dimensionRelativeToIphone(65),
+        width: responsiveWidth(65),
+        height: responsiveWidth(65),
       },
 
       '.medium-avatar': {
-        width: dimensionRelativeToIphone(145),
-        height: dimensionRelativeToIphone(145),
-        borderRadius: dimensionRelativeToIphone(72.5),
+        width: responsiveWidth(145),
+        height: responsiveWidth(145),
+        borderRadius: responsiveWidth(72.5),
         borderWidth: 0,
       },
 
       '.medium': {
-        width: dimensionRelativeToIphone(145),
-        height: dimensionRelativeToIphone(92),
+        width: responsiveWidth(145),
+        height: responsiveWidth(92),
       },
 
       '.medium-wide': {
-        width: dimensionRelativeToIphone(180),
-        height: dimensionRelativeToIphone(85),
+        width: responsiveWidth(180),
+        height: responsiveWidth(85),
       },
 
       '.medium-portrait': {
-        width: dimensionRelativeToIphone(209),
-        height: dimensionRelativeToIphone(139),
+        width: responsiveWidth(209),
+        height: responsiveWidth(139),
       },
 
       '.medium-square': {
-        width: dimensionRelativeToIphone(145),
-        height: dimensionRelativeToIphone(145),
+        width: responsiveWidth(145),
+        height: responsiveWidth(145),
       },
 
       // NOTE: Image resizing doesn't work correctly if both
       // dimensions are not explicitly defined, so we can't
       // use flex: 1, or alignSelf: 'stretch' here...
       '.featured': {
-        width: dimensionRelativeToIphone(365),
-        height: dimensionRelativeToIphone(345),
+        width: responsiveWidth(365),
+        height: responsiveWidth(345),
       },
 
       '.large': {
         width: window.width,
-        height: dimensionRelativeToIphone(280),
+        height: responsiveWidth(280),
       },
 
       '.large-portrait': {
         width: window.width,
-        height: dimensionRelativeToIphone(518),
+        height: responsiveWidth(518),
       },
 
       '.large-banner': {
         width: window.width,
-        height: dimensionRelativeToIphone(200),
+        height: responsiveWidth(200),
       },
 
       '.large-square': {
@@ -659,12 +666,12 @@ export default () => {
 
       '.large-wide': {
         width: window.width,
-        height: dimensionRelativeToIphone(238),
+        height: responsiveWidth(238),
       },
 
       '.large-ultra-wide': {
         width: window.width,
-        height: dimensionRelativeToIphone(130),
+        height: responsiveWidth(130),
       },
     },
     'shoutem.ui.Image': {
@@ -1130,7 +1137,7 @@ export default () => {
         backgroundColor: resolveVariable('paperColor'),
       },
 
-      width: dimensionRelativeToIphone(180),
+      width: responsiveWidth(180),
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'flex-start',
@@ -1144,7 +1151,7 @@ export default () => {
         'shoutem.ui.View': {
           '.pull-left': {
             marginVertical: resolveVariable('mediumGutter'),
-            marginLeft: -dimensionRelativeToIphone(72),
+            marginLeft: -responsiveWidth(72),
           },
         },
 
@@ -1347,7 +1354,7 @@ export default () => {
           fontFamily: 'Rubik-Medium',
         },
 
-        width: dimensionRelativeToIphone(120),
+        width: responsiveWidth(120),
         height: 82,
         flexDirection: 'column',
       },
@@ -2294,8 +2301,8 @@ export default () => {
       },
       video: {
         // 16:9 ratio covers majority of YouTube videos
-        width: dimensionRelativeToIphone(345),
-        height: dimensionRelativeToIphone(194),
+        width: responsiveWidth(345),
+        height: responsiveWidth(194),
         paddingBottom: resolveVariable('smallGutter'),
       },
       fallback: {
@@ -2572,30 +2579,30 @@ export default () => {
     'shoutem.ui.InlineGallery': {
       '.large-ultra-wide': {
         container: {
-          height: dimensionRelativeToIphone(130),
+          height: responsiveWidth(130),
         },
       },
 
       '.large-banner': {
         container: {
-          height: dimensionRelativeToIphone(200),
+          height: responsiveWidth(200),
         },
       },
 
       '.large-wide': {
         container: {
-          height: dimensionRelativeToIphone(238),
+          height: responsiveWidth(238),
         },
       },
 
       '.large-square': {
         container: {
-          height: dimensionRelativeToIphone(375),
+          height: responsiveWidth(375),
         },
       },
 
       container: {
-        height: dimensionRelativeToIphone(345),
+        height: responsiveWidth(345),
       },
 
       imageContainer: {},