@shoutem/ui 5.3.0 → 5.5.0

package/README.md

@@ -20,84 +20,6 @@ All the documentation is available on the [Developer portal](http://shoutem.gith
 
 Join [our community](https://www.facebook.com/groups/shoutem.community/) on Facebook. Also, feel free to ask a question on Stack Overflow using ["shoutem" tag](http://stackoverflow.com/tags/shoutem).
 
-## Examples
-
-To see how Shoutem UI works, you can:
-
-- include the `Examples` component into your React Native app or
-- run `Restaurants` app in `examples` folder.
-
-### Examples component
-
-**If you are using Expo, see [this
-project](https://github.com/shoutem/ui/blob/develop/examples/create-react-native-app/App.js)
-for example usage. Otherwise, follow the steps below.**
-
-Create new React Native project and locate to it:
-
-```bash
-$ react-native init HelloWorld && cd HelloWorld
-```
-
-Install `@shoutem/ui` in your project:
-
-```bash
-$ npm install --save @shoutem/ui
-```
-
-Now, simply copy the following to your `App.js` files of the React Native project:
-
-```JavaScript
-import React, { PureComponent } from 'react';
-import { Examples } from '@shoutem/ui';
-
-export default class App extends PureComponent {
-  render() {
-    return (
-      <Examples />
-    );
-  }
-}
-```
-
-Finally, run the app!
-
-```bash
-$ react-native run-ios
-```
-
-To see other components, just import them from `@shoutem/ui` and render them.
-
-You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.
-
-### Restaurants app
-
-Clone the [Shoutem UI](https://github.com/shoutem/ui) repository:
-
-```bash
-git clone https://github.com/shoutem/ui.git
-```
-
-Locate to `RestaurantsApp` folder:
-
-```bash
-cd ui/examples/RestaurantsApp
-```
-
-Install and link dependencies:
-
-```bash
-npm install
-react-native link
-```
-
-Finally, run the app!
-
-```bash
-react-native run-ios
-react-native run-android
-```
-
 ## UI Toolkit
 
 Shoutem UI is a part of the [Shoutem UI Toolkit](https://shoutem.github.io/ui/) that enables you to build professional looking React Native apps with ease.

package/components/DropDownMenu/DropDownMenu.js

@@ -54,7 +54,7 @@ class DropDownMenu extends PureComponent {
       <View style={style.horizontalContainer}>
         <Button onPress={this.collapse} style={style.selectedOption}>
           {showSelectedOption && <Text>{selectedOption[titleProperty]}</Text>}
-          <Icon name={iconName} />
+          <Icon name={iconName} style={style.icon} />
         </Button>
       </View>
     ) : null;

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/NumberInput.js

@@ -65,11 +65,11 @@ class NumberInput extends PureComponent {
     return (
       <View style={style.container} styleName="horizontal">
         <Button
-          style={style.button}
+          style={[style.button, style.buttonLeft]}
           styleName="secondary"
           onPress={this.decreaseValue}
         >
-          <Icon name="minus-button" style={style.icon} />
+          <Icon name="minus-button" style={[style.icon, style.iconLeft]} />
         </Button>
         <View style={style.inputContainer} styleName="horizontal">
           <TextInput
@@ -80,11 +80,11 @@ class NumberInput extends PureComponent {
           />
         </View>
         <Button
-          style={style.button}
+          style={[style.button, style.buttonRight]}
           styleName="secondary"
           onPress={this.increaseValue}
         >
-          <Icon name="plus-button" style={style.icon} />
+          <Icon name="plus-button" style={[style.icon, style.iconRight]} />
         </Button>
       </View>
     );

package/components/ShareButton.js

@@ -24,7 +24,7 @@ class ShareButton extends PureComponent {
   onShare() {
     const { title, message, url } = this.props;
 
-    Share.share({
+    return Share.share({
       title,
       // URL property isn't supported on Android, so we are
       // including it as the message for now.
@@ -34,7 +34,11 @@ class ShareButton extends PureComponent {
   }
 
   render() {
-    const { animationName, iconProps, ...otherProps } = this.props;
+    const { animationName, iconProps, url, ...otherProps } = this.props;
+
+    if (!url) {
+      return null;
+    }
 
     return (
       <Button onPress={this.onShare} {...otherProps}>

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
@@ -70,9 +72,6 @@ export { Video } from './components/Video';
 export { View } from './components/View';
 export { YearRangePicker } from './components/YearRangePicker';
 
-// Examples
-export { Examples } from './examples/components';
-
 // Helpers
 export { calculateKeyboardOffset, Device, Keyboard } from './helpers';
 
@@ -87,7 +86,6 @@ export {
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
-  nativeDependencies,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
   STATUS_BAR_OFFSET,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.3.0",
+  "version": "5.5.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",
@@ -118,8 +121,7 @@
   "jest": {
     "preset": "react-native",
     "testPathIgnorePatterns": [
-      "/node_modules/",
-      "examples/"
+      "/node_modules/"
     ],
     "transformIgnorePatterns": [
       "!/node_modules/@shoutem"

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: {},

package/examples/components/Buttons.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
-import { Text } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Buttons() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Button / Text only / Light">
-        <Button>
-          <Text>CHECK IN HERE</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Text only / Dark">
-        <Button styleName="secondary">
-          <Text>CHECK IN HERE</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Icon + Text / Light">
-        <Button>
-          <Icon name="add-event" />
-          <Text>ADD TO CALENDAR</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Icon + Text / Dark">
-        <Button styleName="secondary">
-          <Icon name="add-event" />
-          <Text>ADD TO CALENDAR</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Fixed size">
-        <View styleName="horizontal flexible">
-          <Button styleName="confirmation">
-            <Text>REMOVE</Text>
-          </Button>
-
-          <Button styleName="confirmation secondary">
-            <Text>UPDATE</Text>
-          </Button>
-        </View>
-      </Stage>
-
-      <Stage title="Button / Full width">
-        <Button styleName="full-width">
-          <Text>SEE ALL COMMENTS</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Navbar">
-        <Button styleName="textual">
-          <Icon name="add-to-favorites-on" />
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Vertical / Icon + Text">
-        <Button styleName="stacked textual">
-          <Icon name="tweet" />
-          <Text>Text description</Text>
-        </Button>
-      </Stage>
-
-      <Stage title="Button / Full width - Muted">
-        <View styleName="horizontal flexible">
-          <Button styleName="full-width muted">
-            <Icon name="add-to-favorites-on" />
-            <Text>LIKE</Text>
-          </Button>
-          <Button styleName="full-width muted">
-            <Icon name="comment" />
-            <Text>COMMENT</Text>
-          </Button>
-        </View>
-      </Stage>
-
-      <Stage title="Button / Full width - Active">
-        <View styleName="horizontal flexible">
-          <Button styleName="full-width">
-            <Icon name="add-to-favorites-on" />
-            <Text>LIKE</Text>
-          </Button>
-          <Button styleName="full-width">
-            <Icon name="comment" />
-            <Text>COMMENT</Text>
-          </Button>
-        </View>
-      </Stage>
-    </View>
-  );
-}