@shoutem/ui 5.5.0 → 6.0.0-rc.0

package/components/Icon/assets/camera.svg

@@ -1,3 +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="M8.82322 4.82322C8.87011 4.77634 8.9337 4.75 9 4.75H15C15.0663 4.75 15.1299 4.77634 15.1768 4.82322C15.2237 4.87011 15.25 4.9337 15.25 5C15.25 5.72935 15.5397 6.42882 16.0555 6.94454C16.5712 7.46027 17.2707 7.75 18 7.75H19C19.3315 7.75 19.6495 7.8817 19.8839 8.11612C20.1183 8.35054 20.25 8.66848 20.25 9V18C20.25 18.3315 20.1183 18.6495 19.8839 18.8839C19.6495 19.1183 19.3315 19.25 19 19.25H5C4.66848 19.25 4.35054 19.1183 4.11612 18.8839C3.8817 18.6495 3.75 18.3315 3.75 18V9C3.75 8.66848 3.8817 8.35054 4.11612 8.11612C4.35054 7.8817 4.66848 7.75 5 7.75H6C6.72935 7.75 7.42882 7.46027 7.94454 6.94454C8.46027 6.42882 8.75 5.72935 8.75 5C8.75 4.9337 8.77634 4.87011 8.82322 4.82322ZM3.05546 7.05546C3.57118 6.53973 4.27065 6.25 5 6.25H6C6.33152 6.25 6.64946 6.1183 6.88388 5.88388C7.1183 5.64946 7.25 5.33152 7.25 5C7.25 4.53587 7.43437 4.09075 7.76256 3.76256C8.09075 3.43438 8.53587 3.25 9 3.25H15C15.4641 3.25 15.9092 3.43438 16.2374 3.76256C16.5656 4.09075 16.75 4.53587 16.75 5C16.75 5.33152 16.8817 5.64946 17.1161 5.88388C17.3505 6.1183 17.6685 6.25 18 6.25H19C19.7293 6.25 20.4288 6.53973 20.9445 7.05546C21.4603 7.57118 21.75 8.27065 21.75 9V18C21.75 18.7293 21.4603 19.4288 20.9445 19.9445C20.4288 20.4603 19.7293 20.75 19 20.75H5C4.27065 20.75 3.57118 20.4603 3.05546 19.9445C2.53973 19.4288 2.25 18.7293 2.25 18V9C2.25 8.27065 2.53973 7.57118 3.05546 7.05546ZM9.75 13C9.75 11.7574 10.7574 10.75 12 10.75C13.2426 10.75 14.25 11.7574 14.25 13C14.25 14.2426 13.2426 15.25 12 15.25C10.7574 15.25 9.75 14.2426 9.75 13ZM12 9.25C9.92893 9.25 8.25 10.9289 8.25 13C8.25 15.0711 9.92893 16.75 12 16.75C14.0711 16.75 15.75 15.0711 15.75 13C15.75 10.9289 14.0711 9.25 12 9.25Z" fill="black"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82322 4.82322C8.87011 4.77634 8.9337 4.75 9 4.75H15C15.0663 4.75 15.1299 4.77634 15.1768 4.82322C15.2237 4.87011 15.25 4.9337 15.25 5C15.25 5.72935 15.5397 6.42882 16.0555 6.94454C16.5712 7.46027 17.2707 7.75 18 7.75H19C19.3315 7.75 19.6495 7.8817 19.8839 8.11612C20.1183 8.35054 20.25 8.66848 20.25 9V18C20.25 18.3315 20.1183 18.6495 19.8839 18.8839C19.6495 19.1183 19.3315 19.25 19 19.25H5C4.66848 19.25 4.35054 19.1183 4.11612 18.8839C3.8817 18.6495 3.75 18.3315 3.75 18V9C3.75 8.66848 3.8817 8.35054 4.11612 8.11612C4.35054 7.8817 4.66848 7.75 5 7.75H6C6.72935 7.75 7.42882 7.46027 7.94454 6.94454C8.46027 6.42882 8.75 5.72935 8.75 5C8.75 4.9337 8.77634 4.87011 8.82322 4.82322ZM3.05546 7.05546C3.57118 6.53973 4.27065 6.25 5 6.25H6C6.33152 6.25 6.64946 6.1183 6.88388 5.88388C7.1183 5.64946 7.25 5.33152 7.25 5C7.25 4.53587 7.43437 4.09075 7.76256 3.76256C8.09075 3.43438 8.53587 3.25 9 3.25H15C15.4641 3.25 15.9092 3.43438 16.2374 3.76256C16.5656 4.09075 16.75 4.53587 16.75 5C16.75 5.33152 16.8817 5.64946 17.1161 5.88388C17.3505 6.1183 17.6685 6.25 18 6.25H19C19.7293 6.25 20.4288 6.53973 20.9445 7.05546C21.4603 7.57118 21.75 8.27065 21.75 9V18C21.75 18.7293 21.4603 19.4288 20.9445 19.9445C20.4288 20.4603 19.7293 20.75 19 20.75H5C4.27065 20.75 3.57118 20.4603 3.05546 19.9445C2.53973 19.4288 2.25 18.7293 2.25 18V9C2.25 8.27065 2.53973 7.57118 3.05546 7.05546ZM9.75 13C9.75 11.7574 10.7574 10.75 12 10.75C13.2426 10.75 14.25 11.7574 14.25 13C14.25 14.2426 13.2426 15.25 12 15.25C10.7574 15.25 9.75 14.2426 9.75 13ZM12 9.25C9.92893 9.25 8.25 10.9289 8.25 13C8.25 15.0711 9.92893 16.75 12 16.75C14.0711 16.75 15.75 15.0711 15.75 13C15.75 10.9289 14.0711 9.25 12 9.25Z"/>
 </svg>

package/components/Icon/assets/gallery.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16602 4.66602C3.16602 3.83759 3.83759 3.16602 4.66602 3.16602H11.3327C12.1611 3.16602 12.8327 3.83759 12.8327 4.66602V8.79221L12.3542 8.31373L12.3543 8.31367L12.3473 8.307C11.9701 7.94404 11.5063 7.7207 11.0007 7.7207C10.495 7.7207 10.0312 7.94404 9.65396 8.307L9.6539 8.30693L9.6471 8.31373L9.33366 8.62717L7.68624 6.97975L7.6863 6.97968L7.67937 6.97301C7.30217 6.61005 6.83835 6.38672 6.33268 6.38672C5.82701 6.38672 5.36319 6.61005 4.98599 6.97301L4.98593 6.97295L4.97913 6.97975L3.16602 8.79286V4.66602ZM10.0408 9.33428L11.0196 10.3131C11.2148 10.5083 11.2148 10.8249 11.0196 11.0202C10.8243 11.2155 10.5077 11.2155 10.3125 11.0202L6.98275 7.69048C6.753 7.47063 6.52824 7.38672 6.33268 7.38672C6.13712 7.38672 5.91236 7.47064 5.6826 7.69049L3.16602 10.2071V11.3327C3.16602 12.1611 3.83759 12.8327 4.66602 12.8327H11.3327C12.1611 12.8327 12.8327 12.1611 12.8327 11.3327V10.2064L11.6507 9.02447C11.421 8.80462 11.1962 8.7207 11.0007 8.7207C10.8051 8.7207 10.5803 8.80462 10.3506 9.02447L10.0408 9.33428ZM13.8327 10.0368V11.3327C13.8327 12.7134 12.7134 13.8327 11.3327 13.8327H4.66602C3.2853 13.8327 2.16602 12.7134 2.16602 11.3327V10.0001V9.99988V4.66602C2.16602 3.2853 3.2853 2.16602 4.66602 2.16602H11.3327C12.7134 2.16602 13.8327 3.2853 13.8327 4.66602V9.96445C13.8344 9.98853 13.8344 10.0127 13.8327 10.0368ZM10 4.83398C9.72386 4.83398 9.5 5.05784 9.5 5.33398C9.5 5.61013 9.72386 5.83398 10 5.83398H10.0075C10.2836 5.83398 10.5075 5.61013 10.5075 5.33398C10.5075 5.05784 10.2836 4.83398 10.0075 4.83398H10Z" fill="black"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16602 4.66602C3.16602 3.83759 3.83759 3.16602 4.66602 3.16602H11.3327C12.1611 3.16602 12.8327 3.83759 12.8327 4.66602V8.79221L12.3542 8.31373L12.3543 8.31367L12.3473 8.307C11.9701 7.94404 11.5063 7.7207 11.0007 7.7207C10.495 7.7207 10.0312 7.94404 9.65396 8.307L9.6539 8.30693L9.6471 8.31373L9.33366 8.62717L7.68624 6.97975L7.6863 6.97968L7.67937 6.97301C7.30217 6.61005 6.83835 6.38672 6.33268 6.38672C5.82701 6.38672 5.36319 6.61005 4.98599 6.97301L4.98593 6.97295L4.97913 6.97975L3.16602 8.79286V4.66602ZM10.0408 9.33428L11.0196 10.3131C11.2148 10.5083 11.2148 10.8249 11.0196 11.0202C10.8243 11.2155 10.5077 11.2155 10.3125 11.0202L6.98275 7.69048C6.753 7.47063 6.52824 7.38672 6.33268 7.38672C6.13712 7.38672 5.91236 7.47064 5.6826 7.69049L3.16602 10.2071V11.3327C3.16602 12.1611 3.83759 12.8327 4.66602 12.8327H11.3327C12.1611 12.8327 12.8327 12.1611 12.8327 11.3327V10.2064L11.6507 9.02447C11.421 8.80462 11.1962 8.7207 11.0007 8.7207C10.8051 8.7207 10.5803 8.80462 10.3506 9.02447L10.0408 9.33428ZM13.8327 10.0368V11.3327C13.8327 12.7134 12.7134 13.8327 11.3327 13.8327H4.66602C3.2853 13.8327 2.16602 12.7134 2.16602 11.3327V10.0001V9.99988V4.66602C2.16602 3.2853 3.2853 2.16602 4.66602 2.16602H11.3327C12.7134 2.16602 13.8327 3.2853 13.8327 4.66602V9.96445C13.8344 9.98853 13.8344 10.0127 13.8327 10.0368ZM10 4.83398C9.72386 4.83398 9.5 5.05784 9.5 5.33398C9.5 5.61013 9.72386 5.83398 10 5.83398H10.0075C10.2836 5.83398 10.5075 5.61013 10.5075 5.33398C10.5075 5.05784 10.2836 4.83398 10.0075 4.83398H10Z"/>
 </svg>

package/components/ImageGallery.js

@@ -0,0 +1,161 @@
+import React, { useCallback, useState } from 'react';
+import { Pressable } from 'react-native';
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { HorizontalPager } from './HorizontalPager';
+import { Image } from './Image';
+import { LoadingIndicator } from './LoadingIndicator';
+import { View } from './View';
+
+const IMAGE_PREVIEW_MODE = 'imagePreview';
+const IMAGE_GALLERY_MODE = 'gallery';
+
+function ImageGallery({
+  data,
+  onIndexSelected,
+  onModeChanged,
+  renderOverlay,
+  renderImageOverlay,
+  renderPlaceholder,
+  selectedIndex,
+  showNextPage,
+  style,
+}) {
+  const [currentIndex, setCurrentIndex] = useState(selectedIndex);
+  const [mode, setMode] = useState(IMAGE_GALLERY_MODE);
+
+  const handleImageTap = useCallback(
+    newMode => {
+      if (mode === IMAGE_PREVIEW_MODE) {
+        setMode(IMAGE_GALLERY_MODE);
+      } else {
+        setMode(IMAGE_PREVIEW_MODE);
+      }
+
+      if (_.isFunction(onModeChanged)) {
+        onModeChanged(newMode);
+      }
+    },
+    [mode, onModeChanged],
+  );
+
+  const handleIndexSelected = useCallback(
+    newIndex => {
+      setCurrentIndex(newIndex);
+
+      if (_.isFunction(onIndexSelected)) {
+        onIndexSelected(newIndex);
+      }
+    },
+    [onIndexSelected],
+  );
+
+  const renderImage = useCallback(
+    imageProps => {
+      const imageStyle = imageProps?.style;
+      const resolvedImageProps = _.omit(imageProps, 'style');
+
+      return (
+        <ReactNativeZoomableView
+          maxZoom={1.5}
+          minZoom={0.5}
+          zoomStep={0.5}
+          initialZoom={1}
+          bindToBorders
+        >
+          <Pressable style={[imageStyle, style.image]} onPress={handleImageTap}>
+            <Image style={[imageStyle, style.image]} {...resolvedImageProps} />
+          </Pressable>
+        </ReactNativeZoomableView>
+      );
+    },
+    [handleImageTap, style.image],
+  );
+
+  function renderPage(pageData, pageIndex) {
+    const image = _.get(pageData, 'source.uri');
+
+    if (!image) {
+      return null;
+    }
+
+    const isImageVisible = pageIndex === selectedIndex;
+    const transformImageProps = Image.getPropsTransformer();
+    const imageProps = {
+      source: { uri: image },
+    };
+    const transformedImageProps = _.isFunction(transformImageProps)
+      ? transformImageProps(imageProps)
+      : imageProps;
+
+    const showOverlay =
+      _.isFunction(renderImageOverlay) &&
+      // Nothing should be rendered above an image if the user is in
+      // the preview mode (pinching, and panning the image).
+      mode !== IMAGE_PREVIEW_MODE &&
+      // We are not rendering overlays above images that are not visible
+      isImageVisible;
+    const overlay = showOverlay && renderImageOverlay(pageData, pageIndex);
+
+    return (
+      <View key={pageIndex} style={style.page}>
+        {renderImage(transformedImageProps, pageData, pageIndex)}
+        {overlay}
+      </View>
+    );
+  }
+
+  return (
+    <View style={style.container}>
+      <HorizontalPager
+        data={data}
+        onIndexSelected={handleIndexSelected}
+        selectedIndex={currentIndex}
+        renderPage={renderPage}
+        bounces
+        pageMargin={style.pageMargin}
+        showNextPage={showNextPage}
+        renderOverlay={renderOverlay}
+        renderPlaceholder={renderPlaceholder}
+        scrollEnabled
+      />
+    </View>
+  );
+}
+
+ImageGallery.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      description: PropTypes.string,
+      source: PropTypes.shape({
+        uri: PropTypes.string,
+      }),
+      title: PropTypes.string,
+    }),
+  ).isRequired,
+  style: PropTypes.object.isRequired,
+  renderImageOverlay: PropTypes.func,
+  renderOverlay: PropTypes.func,
+  renderPlaceholder: PropTypes.func,
+  selectedIndex: PropTypes.number,
+  showNextPage: PropTypes.bool,
+  onIndexSelected: PropTypes.func,
+  onModeChanged: PropTypes.func,
+};
+
+ImageGallery.defaultProps = {
+  renderImageOverlay: undefined,
+  renderOverlay: undefined,
+  renderPlaceholder: () => <LoadingIndicator />,
+  selectedIndex: 0,
+  showNextPage: false,
+  onIndexSelected: undefined,
+  onModeChanged: undefined,
+};
+
+const StyledImageGallery = connectStyle('shoutem.ui.ImageGallery')(
+  ImageGallery,
+);
+export { StyledImageGallery as ImageGallery };

package/components/Lightbox.js

@@ -1,7 +1,16 @@
-import Lightbox from 'react-native-lightbox';
+import React, { PureComponent } from 'react';
+import RNLightbox from 'react-native-lightbox-v2';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
+// Exporting as class because Animated.createAnimatedComponent
+// doesn't support stateless functional components
+class Lightbox extends PureComponent {
+  render() {
+    return <RNLightbox {...this.props} />;
+  }
+}
+
 const AnimatedLightbox = connectAnimation(Lightbox);
 const StyledLightbox = connectStyle('shoutem.ui.Lightbox')(AnimatedLightbox);
 

package/components/TabMenu/TabMenu.js

@@ -12,26 +12,91 @@ class TabMenu extends PureComponent {
     super(props);
 
     autoBindReact(this);
+
+    this.state = {
+      itemWidths: {},
+      scrollOffset: 0,
+    };
   }
 
-  handleOptionSelected(option) {
+  handleOptionSelected(key, option) {
     const { onOptionSelected } = this.props;
+    const { scrollOffset, itemWidths, viewportHorizontal } = this.state;
+
+    let itemStart = 0;
+
+    _.forEach(itemWidths, (itemWidth, index) => {
+      if (index < key) {
+        itemStart += itemWidth;
+      }
+    });
+
+    const itemEnd = itemStart + itemWidths[key];
 
     LayoutAnimation.easeInEaseOut();
     onOptionSelected(option);
+
+    if (itemEnd > _.last(viewportHorizontal)) {
+      const extraScroll = itemEnd - _.last(viewportHorizontal);
+
+      this.scroll.scrollTo({
+        x: extraScroll + scrollOffset,
+        y: 0,
+        animated: true,
+      });
+    }
+
+    if (itemStart < _.head(viewportHorizontal)) {
+      const extraScroll = _.head(viewportHorizontal) - itemStart;
+
+      this.scroll.scrollTo({
+        x: scrollOffset - extraScroll,
+        y: 0,
+        animated: true,
+      });
+    }
+  }
+
+  handleItemLayout(key, width) {
+    const { itemWidths } = this.state;
+
+    this.setState({
+      itemWidths: {
+        ...itemWidths,
+        [key]: width,
+      },
+    });
+  }
+
+  handleScroll({
+    nativeEvent: {
+      contentOffset: { x },
+      layoutMeasurement: { width },
+    },
+  }) {
+    this.setState({ scrollOffset: x, viewportHorizontal: [x, x + width] });
+  }
+
+  handleScrollLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
+    this.setState({ viewportHorizontal: [0, width] });
   }
 
-  renderOption(option) {
+  renderOption(option, key) {
     const { selectedOption } = this.props;
 
     const isSelected = selectedOption && option.title === selectedOption.title;
 
     return (
       <TabMenuItem
-        key={option.title}
+        key={key}
         isSelected={isSelected}
         item={option}
-        onItemPressed={this.handleOptionSelected}
+        onItemPressed={option => this.handleOptionSelected(key, option)}
+        onLayoutMeasured={width => this.handleItemLayout(key, width)}
       />
     );
   }
@@ -43,6 +108,11 @@ class TabMenu extends PureComponent {
       <ScrollView
         horizontal
         contentContainerStyle={style.container}
+        onScroll={this.handleScroll}
+        onLayout={this.handleScrollLayout}
+        ref={ref => {
+          this.scroll = ref;
+        }}
         showsHorizontalScrollIndicator={false}
         style={style.list}
       >

package/components/TabMenu/TabMenuItem.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation } from 'react-native';
 import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
@@ -26,7 +25,7 @@ class TabMenuItem extends PureComponent {
     onItemPressed(item);
   }
 
-  handleLayout({
+  handleTextLayout({
     nativeEvent: {
       layout: { width },
     },
@@ -35,6 +34,16 @@ class TabMenuItem extends PureComponent {
     this.setState({ baseWidth: width });
   }
 
+  handleContainerLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
+    const { onLayoutMeasured } = this.props;
+
+    onLayoutMeasured(width);
+  }
+
   render() {
     const { style, isSelected, item } = this.props;
     const { baseWidth } = this.state;
@@ -42,11 +51,12 @@ class TabMenuItem extends PureComponent {
     return (
       <TouchableOpacity
         onPress={this.handleItemPressed}
+        onLayout={this.handleContainerLayout}
         styleName="vertical h-center"
       >
         <Text
           style={[style.text, isSelected && style.selectedText]}
-          onLayout={this.handleLayout}
+          onLayout={this.handleTextLayout}
         >
           {item.title}
         </Text>
@@ -58,6 +68,7 @@ class TabMenuItem extends PureComponent {
 
 TabMenuItem.propTypes = {
   style: PropTypes.object.isRequired,
+  onLayoutMeasured: PropTypes.func.isRequired,
   isSelected: PropTypes.bool,
   item: optionShape,
   onItemPressed: PropTypes.func,

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.5.0",
+  "version": "6.0.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "postinstall": "node ./scripts/add-native-deps",
+    "release": "npm publish --access public --tag latest",
+    "release-rc": "npm publish --access public --tag rc",
     "test": "jest"
   },
   "dependencies": {
+    "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
@@ -27,15 +30,13 @@
     "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-lightbox-v2": "0.9.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "11.7.0",
-    "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.23.0",
     "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",

package/theme.js

@@ -1,4 +1,4 @@
-import { Dimensions, Platform, StatusBar, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 import {
   changeColorAlpha,
   createSharedStyle,
@@ -2637,6 +2637,11 @@ export default () => {
         justifyContent: 'center',
         overflow: 'hidden',
       },
+      image: {
+        width: '100%',
+        height: '100%',
+        resizeMode: 'contain',
+      },
     },
 
     'shoutem.ui.ImageGalleryOverlay': {
@@ -2899,7 +2904,6 @@ export default () => {
         borderRadius: 1,
         flexDirection: 'row',
         marginBottom: 8,
-        marginLeft: 8,
       },
       text: {
         marginTop: 12,

package/components/ImageGallery/ImageGallery.android.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PhotoView from 'react-native-photo-view';
-import { connectStyle } from '@shoutem/theme';
-import { ImageGalleryBase } from './ImageGalleryBase';
-
-class ImageGallery extends ImageGalleryBase {
-  static IMAGE_PREVIEW_MODE = ImageGalleryBase.IMAGE_PREVIEW_MODE;
-
-  static IMAGE_GALLERY_MODE = ImageGalleryBase.IMAGE_GALLERY_MODE;
-
-  renderImage(imageProps, imageData, imageIndex) {
-    const { selectedIndex } = this.state;
-
-    const isImageVisible = imageIndex === selectedIndex;
-    const androidProps = {
-      ...imageProps,
-      // Reset the image scale on images that are not
-      // currently visible
-      scale: isImageVisible ? null : 1,
-      minimumZoomScale: 1,
-      maximumZoomScale: 3,
-      androidScaleType: 'fitCenter',
-      onTap: this.onImageTap,
-    };
-
-    return <PhotoView {...androidProps} />;
-  }
-}
-
-ImageGallery.propTypes = {
-  ...ImageGalleryBase.propTypes,
-};
-
-ImageGallery.defaultProps = {
-  ...ImageGalleryBase.defaultProps,
-};
-
-const StyledImageGallery = connectStyle('shoutem.ui.ImageGallery')(
-  ImageGallery,
-);
-
-export { StyledImageGallery as ImageGallery };

package/components/ImageGallery/ImageGallery.ios.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import { InteractionManager } from 'react-native';
-import TransformableImage from 'react-native-transformable-image';
-import autoBindReact from 'auto-bind/react';
-import { connectStyle } from '@shoutem/theme';
-import { ImageGalleryBase } from './ImageGalleryBase';
-
-class ImageGallery extends ImageGalleryBase {
-  static IMAGE_PREVIEW_MODE = ImageGalleryBase.IMAGE_PREVIEW_MODE;
-
-  static IMAGE_GALLERY_MODE = ImageGalleryBase.IMAGE_GALLERY_MODE;
-
-  constructor(props) {
-    super(props);
-
-    autoBindReact(this);
-
-    this.imageRefs = new Map();
-  }
-
-  getImageTransformer(index) {
-    const { data } = this.props;
-    if (index >= 0 && index < data.length) {
-      const ref = this.imageRefs.get(index);
-      if (ref) {
-        return ref.getViewTransformerInstance();
-      }
-    }
-    return null;
-  }
-
-  resetImageTransformer(transformer) {
-    if (!transformer) {
-      return;
-    }
-
-    transformer.updateTransform({
-      scale: 1,
-      translateX: 0,
-      translateY: 0,
-    });
-  }
-
-  resetSurroundingImageTransformations(index) {
-    this.resetImageTransformer(this.getImageTransformer(index - 1));
-    this.resetImageTransformer(this.getImageTransformer(index + 1));
-  }
-
-  updateImageSwitchingStatus() {
-    const { imageSwitchingEnabled, selectedIndex } = this.state;
-
-    const imageTransformer = this.getImageTransformer(selectedIndex);
-    if (!imageTransformer) {
-      return;
-    }
-
-    const translationSpace = imageTransformer.getAvailableTranslateSpace();
-    if (!translationSpace) {
-      return;
-    }
-
-    const imageBoundaryReached =
-      translationSpace.right <= 0 || translationSpace.left <= 0;
-
-    if (imageSwitchingEnabled !== imageBoundaryReached) {
-      // We want to allow switching between gallery images only if
-      // the image is at its left or right boundary. This happens if the
-      // image is fully zoomed out, or if the image is zoomed in but the
-      // user moved it to one of its boundaries.
-      this.setState({
-        imageSwitchingEnabled: imageBoundaryReached,
-      });
-    }
-  }
-
-  onViewTransformed() {
-    this.updateImageSwitchingStatus();
-  }
-
-  onIndexSelected(newIndex) {
-    super.onIndexSelected(newIndex);
-
-    InteractionManager.runAfterInteractions(() => {
-      // After swipe interaction finishes, we'll have new selected index in state
-      // And we're resetting surrounding image transformations,
-      // So that images aren't left zoomed in when user swipes to next/prev image
-      this.resetSurroundingImageTransformations(newIndex);
-    });
-  }
-
-  renderImage(imageProps, imageData, imageIndex) {
-    const { imageSwitchingEnabled } = this.state;
-
-    const iosProps = {
-      ...imageProps,
-      onSingleTapConfirmed: this.onImageTap,
-      onViewTransformed: this.onViewTransformed,
-      enableTranslate: !imageSwitchingEnabled,
-      ref: transformer => {
-        this.imageRefs.set(imageIndex, transformer);
-      },
-    };
-
-    return <TransformableImage {...iosProps} />;
-  }
-}
-
-ImageGallery.propTypes = {
-  ...ImageGalleryBase.propTypes,
-};
-
-ImageGallery.defaultProps = {
-  ...ImageGalleryBase.defaultProps,
-};
-
-const StyledImageGallery = connectStyle('shoutem.ui.ImageGallery')(
-  ImageGallery,
-);
-
-export { StyledImageGallery as ImageGallery };

package/components/ImageGallery/ImageGalleryBase.js

@@ -1,199 +0,0 @@
-import React, { PureComponent } from 'react';
-import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import { HorizontalPager } from '../HorizontalPager';
-import { Image } from '../Image';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { View } from '../View';
-
-const IMAGE_PREVIEW_MODE = 'imagePreview';
-const IMAGE_GALLERY_MODE = 'gallery';
-
-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.
-   */
-  static IMAGE_PREVIEW_MODE = IMAGE_PREVIEW_MODE;
-
-  /**
-   * The gallery mode is the mode in which
-   * the user can scroll between images, and can see
-   * additional info about each image.
-   */
-  static IMAGE_GALLERY_MODE = IMAGE_GALLERY_MODE;
-
-  constructor(props) {
-    super(props);
-
-    autoBindReact(this);
-
-    const { selectedIndex } = props;
-
-    this.state = {
-      selectedIndex,
-      imageSwitchingEnabled: true,
-      mode: IMAGE_GALLERY_MODE,
-      // Disabling rule as this flag is used via inheritance in other classes.
-      // eslint-disable-next-line react/no-unused-state
-      collapsed: true,
-    };
-  }
-
-  onImageTap() {
-    const { mode } = this.state;
-
-    // We are toggling between image preview and
-    // gallery modes when the user taps on an image.
-    if (mode === IMAGE_PREVIEW_MODE) {
-      this.setMode(IMAGE_GALLERY_MODE);
-    } else {
-      this.setMode(IMAGE_PREVIEW_MODE);
-    }
-  }
-
-  onIndexSelected(newIndex) {
-    const { onIndexSelected } = this.props;
-    this.setState(
-      {
-        selectedIndex: newIndex,
-      },
-      () => {
-        if (_.isFunction(onIndexSelected)) {
-          onIndexSelected(newIndex);
-        }
-      },
-    );
-  }
-
-  setMode(newMode) {
-    const { onModeChanged } = this.props;
-    const { mode } = this.state;
-
-    if (mode === newMode) {
-      return;
-    }
-
-    this.setState({ mode }, () => {
-      if (_.isFunction(onModeChanged)) {
-        onModeChanged(mode);
-      }
-    });
-  }
-
-  renderImage() {
-    // Override this to provide platform specific UI
-  }
-
-  renderPage(pageData, pageIndex) {
-    const { mode, selectedIndex } = this.state;
-    const { style, renderImageOverlay } = this.props;
-    const image = _.get(pageData, 'source.uri');
-
-    if (!image) {
-      return null;
-    }
-
-    const isImageVisible = pageIndex === selectedIndex;
-    const transformImageProps = Image.getPropsTransformer();
-    const imageProps = {
-      source: { uri: image },
-      style: { flex: 1 },
-    };
-    const transformedImageProps = _.isFunction(transformImageProps)
-      ? transformImageProps(imageProps)
-      : imageProps;
-
-    const showOverlay =
-      _.isFunction(renderImageOverlay) &&
-      // Nothing should be rendered above an image if the user is in
-      // the preview mode (pinching, and panning the image).
-      mode !== IMAGE_PREVIEW_MODE &&
-      // We are not rendering overlays above images that are not visible
-      isImageVisible;
-    const overlay = showOverlay && renderImageOverlay(pageData, pageIndex);
-
-    return (
-      <View key={pageIndex} style={style.page}>
-        {this.renderImage(transformedImageProps, pageData, pageIndex)}
-        {overlay}
-      </View>
-    );
-  }
-
-  render() {
-    const {
-      data,
-      renderOverlay,
-      renderPlaceholder,
-      showNextPage,
-      style,
-    } = this.props;
-    const { selectedIndex, imageSwitchingEnabled } = this.state;
-
-    return (
-      <View style={style.container} driver={this.timingDriver}>
-        <HorizontalPager
-          data={data}
-          onIndexSelected={this.onIndexSelected}
-          selectedIndex={selectedIndex}
-          renderPage={this.renderPage}
-          bounces
-          pageMargin={style.pageMargin}
-          showNextPage={showNextPage}
-          renderOverlay={renderOverlay}
-          renderPlaceholder={renderPlaceholder}
-          scrollEnabled={imageSwitchingEnabled}
-        />
-      </View>
-    );
-  }
-}
-
-ImageGalleryBase.propTypes = {
-  // Array containing objects with gallery data (shape defined below)
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      source: PropTypes.shape({
-        uri: PropTypes.string,
-      }),
-      title: PropTypes.string,
-    }),
-  ).isRequired,
-  // Style prop used to override default (theme) styling
-  style: PropTypes.object.isRequired,
-  // Renders an overlay over a single image
-  // For example image gallery overlay using the `ImageGalleryOverlay` component
-  // renderOverlay(imageData, imageIndex)
-  renderImageOverlay: PropTypes.func,
-  // Renders an overlay over all images
-  // For example page indicators using the `PageIndicators` component
-  // renderOverlay(imageData, imageIndex)
-  renderOverlay: PropTypes.func,
-  // Callback function that can be used to define placeholder
-  // that appears when content is loading
-  renderPlaceholder: PropTypes.func,
-  // Initially selected page in gallery
-  selectedIndex: PropTypes.number,
-  showNextPage: PropTypes.bool,
-  // Callback function called when user swipes between pages (images)
-  // Index of new (selected) page is passed to this callback
-  onIndexSelected: PropTypes.func,
-  // onModeChanged(mode), callback function triggered when user taps on single photo
-  // Or when user transforms (zooms etc.) image
-  // Useful for hiding external controls (i.e. navigation bar)
-  // Mode can be `gallery` or `imagePreview`
-  onModeChanged: PropTypes.func,
-};
-
-ImageGalleryBase.defaultProps = {
-  selectedIndex: 0,
-  showNextPage: false,
-  renderPlaceholder: () => <LoadingIndicator />,
-  renderImageOverlay: undefined,
-  renderOverlay: undefined,
-  onIndexSelected: undefined,
-  onModeChanged: undefined,
-};

package/components/ImageGallery/index.js

@@ -1 +0,0 @@
-export { ImageGallery } from './ImageGallery';