muba-posting 5.0.3 → 5.0.4

package/Publish4.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, TouchableHighlight, TouchableOpacity, ImageBackground, Dimensions } from 'react-native';
+import { Text, View, TouchableHighlight, TouchableOpacity, ImageBackground, Dimensions, Image } from 'react-native';
 import PopupAdvice from 'muba-popup-advice';
 import { strings } from 'muba-i18n';
 import commonStyles from './commonStyles';
@@ -20,7 +20,10 @@ export default class Publish4 extends React.Component {
       allPhotosSelected: false,
       updateMainPhoto: false,
       isLoading: false,
-      imageBrowserOpen: false
+      imageBrowserOpen: false,
+      imageSize: [],
+      containerWidth: 0,
+      containerHeight: 0
     }
   }
 
@@ -80,6 +83,8 @@ export default class Publish4 extends React.Component {
     let imagesArray = this.state.images;
     imagesArray.push(image);
 
+    this.calculateImageSize(image, imagesArray.length - 1)
+
     this.setState({
       showErrorNoSelectedImages: false,
       images: imagesArray
@@ -174,6 +179,58 @@ export default class Publish4 extends React.Component {
     }, 500);
   }
 
+  calculateImageSize = (image) => {
+    let imageSize = this.state.imageSize;
+    Image.getSize(image.uri, (width, height) => {
+      if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
+        const containerRatio = this.state.containerWidth / this.state.containerHeight;
+        const imageRatio = width / height;
+
+        let finalWidth;
+        let finalHeight;
+        if (imageRatio > containerRatio) {
+          if (width > this.state.containerWidth) {
+            finalWidth = this.state.containerWidth;
+          } else {
+            finalWidth = width;
+          }
+          finalHeight = height * (finalWidth / width);
+        } else if (imageRatio < containerRatio) {
+          if (height > this.state.containerHeight) {
+            finalHeight = this.state.containerHeight;
+          } else {
+            finalHeight = height;
+          }
+          finalWidth = width * (finalHeight / height);
+        } else {
+          if (width > this.state.containerWidth) {
+            finalWidth = this.state.containerWidth;
+            finalHeight = this.state.containerHeight;
+          } else {
+            finalWidth = width;
+            finalHeight = height;
+          }
+        }
+        imageSize.push({
+          width: finalWidth,
+          height: finalHeight,
+          marginVertical: (this.state.containerHeight - finalHeight) / 2,
+          marginHorizontal: (this.state.containerWidth - finalWidth) / 2
+        });
+      } else {
+        imageSize.push({
+          width: '100%',
+          height: '100%',
+          marginVertical: 0,
+          marginHorizontal: 0
+        })
+      }
+      this.setState({
+        imageSize: imageSize
+      });
+    });
+  }
+
   render() {
     return (
       <View style={{ minHeight: this.state.minHeight }}>
@@ -212,9 +269,10 @@ export default class Publish4 extends React.Component {
                 }
                 {this.state.images.map((item, index) => {
                   return (
-                    <ImageBackground style={[commonStyles.photoBox, commonStyles.photoBoxImage]} source={{ uri: item.uri }} borderRadius={10} key={index}
-                      onError={() => this.rerenderImage(index)}>
-                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='stretch' borderRadius={1.5}>
+                    <View style={[commonStyles.photoBox]} onLayout={(event) => this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })} key={index}>
+                      <Image style={{ width: this.state.imageSize[index]?.width, height: this.state.imageSize[index]?.height, marginVertical: this.state.imageSize[index]?.marginVertical, marginHorizontal: this.state.imageSize[index]?.marginHorizontal }}
+                        resizeMode='center' source={{ uri: item.uri }} borderRadius={10} onError={() => this.rerenderImage(index)} />
+                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='center' borderRadius={1.5}>
 
                         <TouchableHighlight style={commonStyles.leftIcon} onPress={() => this.deleteImage(item.id, index)}>
                           <FontAwesomeIcon style={commonStyles.whiteIcon} name="cancel-circled" />
@@ -224,7 +282,7 @@ export default class Publish4 extends React.Component {
                         </TouchableHighlight>
 
                       </ImageBackground>
-                    </ImageBackground>
+                    </View>
                   )
                 })}
               </View>

package/commonStyles.js

@@ -576,10 +576,6 @@ export default StyleSheet.create({
     backgroundColor: '#fff'
   },
 
-  photoBoxImage: {
-    alignSelf: 'stretch'
-  },
-
   photoBoxAddIcon: {
     alignItems: 'center',
     justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muba-posting",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Posting",
   "main": "Posting.js",
   "scripts": {