Merge pull request #336 from shoutem/release/v0.22.0

Release v0.22.0

README.md

@@ -6,7 +6,7 @@ Shoutem UI is a set of styleable components that enables you to build beautiful
 
 ```
 $ npm install --save @shoutem/ui
-$ react-native link # No need to run this with Exponent
+$ react-native link # No need to run this with Expo
 ```
 
 ## Docs
@@ -26,7 +26,7 @@ To see how Shoutem UI works, you can:
 
 ### Examples component
 
-**If you are using Exponent, see [this
+**If you are using Expo, see [this
 project](https://github.com/exponentjs/shoutem-example/blob/master/main.js)
 for example usage. Otherwise, follow the steps below.**
 
@@ -43,22 +43,19 @@ $ npm install --save @shoutem/ui
 $ react-native link
 ```
 
-Now, simply copy the following to your `index.ios.js` files of the React Native project:
+Now, simply copy the following to your `App.js` files of the React Native project:
 
 ```JavaScript
 import React, { Component } from 'react';
-import { AppRegistry } from 'react-native';
 import { Examples } from '@shoutem/ui';
 
-class HelloWorld extends Component {
+export default class App extends Component<{}> {
   render() {
     return (
       <Examples />
     );
   }
 }
-
-AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
 ```
 
 Finally, run the app!
@@ -114,5 +111,3 @@ It consists of three libraries:
 
 [The BSD License](https://opensource.org/licenses/BSD-3-Clause)
 Copyright (c) 2016-present, [Shoutem](http://shoutem.github.io)
-
-

components/DropDownMenu/DropDownModal.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {
   Component,
 } from 'react';
@@ -6,6 +7,7 @@ import {
   ListView,
   LayoutAnimation,
   Dimensions,
+  NativeModules,
 } from 'react-native';
 import _ from 'lodash';
 
@@ -31,45 +33,45 @@ class DropDownModal extends Component {
     /**
      * Callback that is called when dropdown option is selected
      */
-    onOptionSelected: React.PropTypes.func,
+    onOptionSelected: PropTypes.func,
     /**
      * Collection of objects which will be shown as options in DropDownMenu
      */
-    options: React.PropTypes.array.isRequired,
+    options: PropTypes.array.isRequired,
     /**
      * Selected option that will be shown.
      */
-    selectedOption: React.PropTypes.any.isRequired,
+    selectedOption: PropTypes.any.isRequired,
     /**
      * Key name that represents option's string value,
      * and it will be displayed to the user in the UI
      */
-    titleProperty: React.PropTypes.string.isRequired,
+    titleProperty: PropTypes.string.isRequired,
     /**
      * Key name that represents option's value
      */
-    valueProperty: React.PropTypes.string.isRequired,
+    valueProperty: PropTypes.string.isRequired,
     /**
      * Number of options shown without scroll.
      * Can be set trough DropDown style.visibleOptions.
      * Prop definition overrides style.
      */
-    visibleOptions: React.PropTypes.number,
+    visibleOptions: PropTypes.number,
     /**
      * Optional render function, for every item in the list.
      * Input parameter should be shaped as one of the items from the
      * options object
      */
-    renderOption: React.PropTypes.func,
+    renderOption: PropTypes.func,
     /**
      * Visibility flag, controling the modal visibility
      */
-    visible: React.PropTypes.bool,
+    visible: PropTypes.bool,
     /**
      * Callback that is called when modal should be closed
      */
-    onClose: React.PropTypes.func,
-    style: React.PropTypes.object,
+    onClose: PropTypes.func,
+    style: PropTypes.object,
   };
 
   static defaultProps = {
@@ -164,6 +166,12 @@ class DropDownModal extends Component {
   }
 
   renderGradient() {
+    // If the native module for Linear Gradient isn't loaded, then the gradient won't
+    // be rendered inside the DropDownModal.
+    if(!NativeModules.BVLinearGradient){
+      return null;
+    }
+
     const { style } = this.props;
     const { backgroundColor } = style.modal;
     const { optionHeight } = this.state;

components/FormGroup.js

@@ -16,7 +16,7 @@ class FormGroup extends Component {
 }
 
 FormGroup.propTypes = {
-  ...View.propTypes
+  ...View.propTypes,
 };
 
 const AnimatedFormGroup = connectAnimation(FormGroup);

components/GridRow.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Children } from 'react';
 import { View as RNView } from 'react-native';
 import _ from 'lodash';
@@ -35,7 +36,7 @@ class GridRow extends React.Component {
 }
 
 GridRow.propTypes = {
-  columns: React.PropTypes.number.isRequired,
+  columns: PropTypes.number.isRequired,
   ...RNView.propTypes,
 };
 

components/HorizontalPager/HorizontalPager.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   ScrollView,

components/HorizontalPager/Page.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { View } from '../../index';
@@ -9,10 +10,10 @@ import { View } from '../../index';
  */
 export class Page extends Component {
   static propTypes = {
-    isActive: React.PropTypes.bool.isRequired,
-    width: React.PropTypes.number.isRequired,
-    style: React.PropTypes.object,
-    children: React.PropTypes.node,
+    isActive: PropTypes.bool.isRequired,
+    width: PropTypes.number.isRequired,
+    style: PropTypes.object,
+    children: PropTypes.node,
   };
 
   shouldComponentUpdate(nextProps) {

components/Image.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import {
-  Image as RNImage,
+  ImageBackground as RNImage,
   Platform,
 } from 'react-native';
 import _ from 'lodash';

components/ImageGallery/ImageGalleryBase.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import _ from 'lodash';
 

components/ImageGalleryOverlay.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
   ScrollView,
@@ -23,9 +24,9 @@ const DESCRIPTION_LENGTH_TRIM_LIMIT = 90;
  */
 class ImageGalleryOverlay extends Component {
   static propTypes = {
-    title: React.PropTypes.string,
-    description: React.PropTypes.string,
-    style: React.PropTypes.object,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    style: PropTypes.object,
   };
 
   constructor(props) {

components/ImagePreview.js

@@ -1,7 +1,5 @@
-import React, {
-  PropTypes,
-  Component,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import {
   View,
   Modal,
@@ -77,7 +75,6 @@ class ImagePreview extends Component {
               componentWidth={width}
               componentHeight={height}
               source={source}
-              resizeMode={'contain'}
             />
             {closeButton}
           </View>
@@ -93,7 +90,6 @@ class ImagePreview extends Component {
             source={source}
             width={width}
             height={height}
-            resizeMode="contain"
           />
         </TouchableOpacity>
       </View>

components/InlineGallery.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import _ from 'lodash';
 import { connectStyle } from '@shoutem/theme';
@@ -14,8 +15,8 @@ class InlineGallery extends Component {
     // Array containing objects with image data (shape defined below)
     data: PropTypes.arrayOf(
       PropTypes.shape({
-        source: React.PropTypes.shape({
-          uri: React.PropTypes.string,
+        source: PropTypes.shape({
+          uri: PropTypes.string,
         }),
       }),
     ).isRequired,

components/ListView.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {
   View,
@@ -65,18 +66,18 @@ class ListDataSource {
 
 class ListView extends React.Component {
   static propTypes = {
-    autoHideHeader: React.PropTypes.bool,
-    style: React.PropTypes.object,
-    data: React.PropTypes.array,
-    loading: React.PropTypes.bool,
-    onLoadMore: React.PropTypes.func,
-    onRefresh: React.PropTypes.func,
-    getSectionId: React.PropTypes.func,
-    renderRow: React.PropTypes.func,
-    renderHeader: React.PropTypes.func,
-    renderFooter: React.PropTypes.func,
-    renderSectionHeader: React.PropTypes.func,
-    scrollDriver: React.PropTypes.object,
+    autoHideHeader: PropTypes.bool,
+    style: PropTypes.object,
+    data: PropTypes.array,
+    loading: PropTypes.bool,
+    onLoadMore: PropTypes.func,
+    onRefresh: PropTypes.func,
+    getSectionId: PropTypes.func,
+    renderRow: PropTypes.func,
+    renderHeader: PropTypes.func,
+    renderFooter: PropTypes.func,
+    renderSectionHeader: PropTypes.func,
+    scrollDriver: PropTypes.object,
     // TODO(Braco) - add render separator
   };
 

components/NavigationBar/NavigationBar.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
   StatusBar,
@@ -55,11 +56,11 @@ function setStatusBarStyle(backgroundColor) {
 // eslint-disable-next-line react/prefer-stateless-function
 class NavigationBar extends Component {
   static propTypes = {
-    leftComponent: React.PropTypes.node,
-    centerComponent: React.PropTypes.node,
-    rightComponent: React.PropTypes.node,
-    style: React.PropTypes.object,
-    id: React.PropTypes.string,
+    leftComponent: PropTypes.node,
+    centerComponent: PropTypes.node,
+    rightComponent: PropTypes.node,
+    style: PropTypes.object,
+    id: PropTypes.string,
   };
 
   static defaultProps = {

components/PageIndicators.js

@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import { connectStyle } from '@shoutem/theme';
 import { View } from './View';

components/RichMedia.js

@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Html } from '../html';
 
 export default function RichMedia({ body }) {
-  console.warn('RichMedia is deprecated and will be removed in next versions.');
+  console.warn("'RichMedia' is deprecated and will be removed soon. Use 'Html' instead.");
   return <Html body={body} />;
 }
 
 RichMedia.propTypes = {
-  body: React.PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
 };

components/ScrollView/ScrollDriverProvider.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component, Children } from 'react';
 import { DriverShape, ScrollDriver } from '@shoutem/animation';
 import * as _ from 'lodash';
@@ -9,7 +10,7 @@ import * as _ from 'lodash';
  */
 export class ScrollDriverProvider extends Component {
   static childContextTypes = {
-    driverProvider: React.PropTypes.object,
+    driverProvider: PropTypes.object,
     animationDriver: DriverShape,
   };
 
@@ -18,7 +19,7 @@ export class ScrollDriverProvider extends Component {
   };
 
   static propTypes = {
-    children: React.PropTypes.node,
+    children: PropTypes.node,
     driver: DriverShape,
   };
 

components/ScrollView/ScrollView.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Animated } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
@@ -14,7 +15,7 @@ class ScrollView extends Component {
 
   static contextTypes = {
     animationDriver: DriverShape,
-    driverProvider: React.PropTypes.object,
+    driverProvider: PropTypes.object,
   };
 
   static childContextTypes = {