@shoutem/ui 5.3.0 → 5.4.0

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/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/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';
@@ -91,7 +92,7 @@ class TextInput extends PureComponent {
 }
 
 TextInput.propTypes = {
-  ...RNTextInput.propTypes,
+  ...TextInputPropTypes,
   style: PropTypes.object.isRequired,
   animate: PropTypes.bool,
   errorMessage: PropTypes.string,

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

package/index.js

@@ -11,6 +11,8 @@ export {
   resolveFontFamily,
   resolveFontStyle,
   resolveFontWeight,
+  responsiveHeight,
+  responsiveWidth,
 } from './theme';
 
 // Services

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -16,25 +16,27 @@
     "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.1.3",
+    "lottie-ios": "3.4.0",
+    "lottie-react-native": "5.1.4",
     "prop-types": "15.8.1",
     "qs": "6.9.3",
     "react-native-device-info": "9.0.2",
     "react-native-lightbox": "github:shoutem/react-native-lightbox#v0.7.2",
     "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "11.7.0",
-    "react-native-photo-view": "github:shoutem/react-native-photo-view#8f88667",
+    "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.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.22.7",
+    "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
@@ -67,6 +69,7 @@
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",
+    "lottie-ios",
     "lottie-react-native",
     "react-native-device-info",
     "react-native-linear-gradient",

package/theme.js

@@ -48,9 +48,23 @@ export function dimensionRelativeToIphone(
   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(
@@ -584,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': {
@@ -652,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': {
@@ -1123,7 +1137,7 @@ export default () => {
         backgroundColor: resolveVariable('paperColor'),
       },
 
-      width: dimensionRelativeToIphone(180),
+      width: responsiveWidth(180),
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'flex-start',
@@ -1137,7 +1151,7 @@ export default () => {
         'shoutem.ui.View': {
           '.pull-left': {
             marginVertical: resolveVariable('mediumGutter'),
-            marginLeft: -dimensionRelativeToIphone(72),
+            marginLeft: -responsiveWidth(72),
           },
         },
 
@@ -1340,7 +1354,7 @@ export default () => {
           fontFamily: 'Rubik-Medium',
         },
 
-        width: dimensionRelativeToIphone(120),
+        width: responsiveWidth(120),
         height: 82,
         flexDirection: 'column',
       },
@@ -2287,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: {
@@ -2565,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: {},