v0.23.20

.npmignore

@@ -4,8 +4,9 @@ node_modules
 # Ignore test files
 *_tests_
 
-# Ignore the example app
+# Ignore the example apps
 examples/RestaurantsApp/
+examples/create-react-native-app/
 
 # Ignore local/config files
 .editorconfig

components/Button.js

@@ -1,12 +1,10 @@
-import React, { Component } from 'react';
-import {
-  TouchableOpacity,
-} from 'react-native';
+import React, { PureComponent } from 'react';
+import { TouchableOpacity } from 'react-native';
 
 import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
 
-class Button extends Component {
+class Button extends PureComponent {
   render() {
     // The underlayColor is not a valid RN style
     // property, so we have to unset it here.

components/DropDownMenu/DropDownMenu.js

@@ -1,21 +1,18 @@
-import React, {
-  Component,
-} from 'react';
+import React, { PureComponent } from 'react';
 import _ from 'lodash';
+
 import { connectStyle } from '@shoutem/theme';
-import {
-  Button,
-  Icon,
-  Text,
-  View,
-} from '../../index';
 
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { View } from '../View';
 import { DropDownModal } from './DropDownModal';
 
 const modalSpecificProps = ['visible', 'onClose'];
 const dropDownMenuPropTypes = { ..._.omit(DropDownModal.propTypes, modalSpecificProps) };
 
-class DropDownMenu extends Component {
+class DropDownMenu extends PureComponent {
   /**
   * @see DropDownModal.propTypes
   */

components/DropDownMenu/DropDownModal.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {
-  Component,
-} from 'react';
+import React, { PureComponent } from 'react';
 import {
   Modal,
   ListView,
@@ -11,24 +9,19 @@ import {
 } from 'react-native';
 import _ from 'lodash';
 
+import { connectStyle, changeColorAlpha } from '@shoutem/theme';
+import { TimingDriver, FadeIn, ZoomOut } from '@shoutem/animation';
+
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { View } from '../View';
 import { LinearGradient } from '../LinearGradient';
 import { TouchableOpacity } from '../TouchableOpacity';
 
-import { connectStyle, changeColorAlpha } from '@shoutem/theme';
-
-import {
-  TimingDriver,
-  FadeIn,
-  ZoomOut,
-} from '@shoutem/animation';
-
 const window = Dimensions.get('window');
 
-class DropDownModal extends Component {
+class DropDownModal extends PureComponent {
   static propTypes = {
     /**
      * Callback that is called when dropdown option is selected

components/FormGroup.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
 
 import { View } from './View';
 
-class FormGroup extends Component {
+class FormGroup extends PureComponent {
   render() {
     return (
       <View {...this.props}>

components/GridRow.js

@@ -1,15 +1,16 @@
 import PropTypes from 'prop-types';
-import React, { Children } from 'react';
+import React, { PureComponent, Children } from 'react';
 import {
   View as RNView,
   ViewPropTypes,
 } from 'react-native';
 import _ from 'lodash';
 
-import { View } from './View';
 import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
 
+import { View } from './View';
+
 /**
  * Renders empty placeholder views to fill any empty space
  * left by missing views within a row. This is necessary so that
@@ -24,7 +25,7 @@ function renderPlaceholderViews(count) {
 
 // Ref needed
 // eslint-disable-next-line react/prefer-stateless-function
-class GridRow extends React.Component {
+class GridRow extends PureComponent {
   render() {
     const { children, columns } = this.props;
     const missingElementsCount = columns - Children.count(children);

components/HorizontalPager/HorizontalPager.js

@@ -1,20 +1,16 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import {
   ScrollView,
   InteractionManager,
   LayoutAnimation,
 } from 'react-native';
-
 import _ from 'lodash';
 
 import { connectStyle } from '@shoutem/theme';
 
-import {
-  View,
-} from '../../index';
-
+import { View } from '../View';
 import { Page } from './Page';
 
 /**
@@ -28,7 +24,7 @@ import { Page } from './Page';
  * ScrollView and ViewPagerAndroid for this matter.
  *
  */
-class HorizontalPager extends Component {
+class HorizontalPager extends PureComponent {
   static propTypes = {
     // Prop defining whether the Pager will bounce back
     // when user tries to swipe beyond end of content (iOS only)

components/HorizontalPager/Page.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { View } from '../../index';
+import { View } from '../View';
 
 /**
  * A HorizontalPager page. This component is used in

components/ImageGallery/ImageGalleryBase.js

@@ -1,20 +1,16 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
+import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
-import {
-  View,
-  HorizontalPager,
-  LoadingIndicator,
-  Image,
-} from '../../index';
-
+import { View } from '../View';
+import { HorizontalPager } from '../HorizontalPager';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { Image } from '../Image';
 
 const IMAGE_PREVIEW_MODE = 'imagePreview';
 const IMAGE_GALLERY_MODE = 'gallery';
 
-export class ImageGalleryBase extends Component {
+export class ImageGalleryBase extends PureComponent {
   /**
    * The image preview mode is the mode in which
    * the user can zoom in/out and pan the image around.

components/ImageGalleryOverlay.js

@@ -1,19 +1,14 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import {
-  ScrollView,
-} from 'react-native';
+import React, { PureComponent } from 'react';
+import { ScrollView } from 'react-native';
 
 import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
 
-import {
-  View,
-  Subtitle,
-  Caption,
-  Icon,
-  TouchableOpacity,
-} from './../index';
+import { Caption, Subtitle } from './Text';
+import { Icon } from './Icon';
+import { View } from './View';
+import { TouchableOpacity } from './TouchableOpacity';
 
 const DESCRIPTION_LENGTH_TRIM_LIMIT = 90;
 
@@ -22,7 +17,7 @@ const DESCRIPTION_LENGTH_TRIM_LIMIT = 90;
  * images in a gallery. It can display a title and
  * a description of an image.
  */
-class ImageGalleryOverlay extends Component {
+class ImageGalleryOverlay extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     description: PropTypes.string,

components/ImagePreview.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View,
   Modal,
@@ -29,7 +29,7 @@ const CLOSE_ICON_SIZE = 25;
  * Renders an ImagePreview which shows an inline image preview.
  * When clicked, the image is displayed in full screen.
  */
-class ImagePreview extends Component {
+class ImagePreview extends PureComponent {
   constructor(props) {
     super(props);
     this.onPressCloseButton = this.onPressCloseButton.bind(this);

components/InlineGallery.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import _ from 'lodash';
 import { connectStyle } from '@shoutem/theme';
@@ -10,7 +10,7 @@ import { Image } from './Image';
 import { HorizontalPager } from './HorizontalPager/HorizontalPager';
 import { LoadingIndicator } from './LoadingIndicator';
 
-class InlineGallery extends Component {
+class InlineGallery extends PureComponent {
   static propTypes = {
     // Array containing objects with image data (shape defined below)
     data: PropTypes.arrayOf(

components/LinearGradient.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import RNLinearGradient from 'react-native-linear-gradient';
 import _ from 'lodash';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
 const RNLinearGradientPropsKeys = Object.keys(RNLinearGradient.propTypes);
 
-class LinearGradient extends React.Component {
+class LinearGradient extends PureComponent {
   render () {
     const { props } = this;
 

components/ListView.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import {
   View,
   ListView as RNListView,
@@ -8,9 +8,11 @@ import {
   Platform,
   ScrollView,
 } from 'react-native';
+import _ from 'lodash';
+
 import { connectStyle } from '@shoutem/theme';
+
 import { Spinner } from './Spinner';
-import _ from 'lodash';
 
 const scrollViewProps = _.keys(ScrollView.propTypes);
 
@@ -64,7 +66,7 @@ class ListDataSource {
   }
 }
 
-class ListView extends React.Component {
+class ListView extends Component {
   static propTypes = {
     autoHideHeader: PropTypes.bool,
     style: PropTypes.object,

components/LoadingIndicator.js

@@ -1,6 +1,4 @@
-import React, {
-  Component,
-} from 'react';
+import React, { PureComponent } from 'react';
 
 import { connectStyle } from '@shoutem/theme';
 
@@ -10,7 +8,7 @@ import { Spinner } from './Spinner';
 /**
  * Renders a loading indicator (spinner) that fits into available space (container)
  */
-class LoadingIndicator extends Component {
+class LoadingIndicator extends PureComponent {
   render() {
     return (
       <View styleName="flexible vertical v-center">