Allow multiple avatar image types

src/components/AvatarCropModal/AvatarCropModal.js

@@ -38,6 +38,9 @@ const propTypes = {
     /** Name of the image */
     imageName: PropTypes.string,
 
+    /** Type of the image file */
+    imageType: PropTypes.string,
+
     /** Callback to be called when user closes the modal */
     onClose: PropTypes.func,
 
@@ -54,6 +57,7 @@ const propTypes = {
 const defaultProps = {
     imageUri: '',
     imageName: '',
+    imageType: '',
     onClose: () => {},
     onSave: () => {},
 };
@@ -266,12 +270,16 @@ const AvatarCropModal = (props) => {
             height: size, width: size, originX, originY,
         };
 
-        cropOrRotateImage(props.imageUri, [{rotate: rotation.value % 360}, {crop}], {compress: 1, name: props.imageName})
+        cropOrRotateImage(
+            props.imageUri,
+            [{rotate: rotation.value % 360}, {crop}],
+            {compress: 1, name: props.imageName, type: props.imageType},
+        )
             .then((newImage) => {
                 props.onClose();
                 props.onSave(newImage);
             });
-    }, [props.imageUri, props.imageName, imageContainerSize]);
+    }, [props.imageUri, props.imageName, props.imageType, imageContainerSize]);
 
     /**
      * @param {Event} event

src/components/AvatarWithImagePicker.js

@@ -90,6 +90,7 @@ class AvatarWithImagePicker extends React.Component {
             isAvatarCropModalOpen: false,
             imageName: '',
             imageUri: '',
+            imageType: '',
         };
     }
 
@@ -194,7 +195,12 @@ class AvatarWithImagePicker extends React.Component {
                     return;
                 }
 
-                this.setState({isAvatarCropModalOpen: true, imageUri: image.uri, imageName: image.name});
+                this.setState({
+                    isAvatarCropModalOpen: true,
+                    imageUri: image.uri,
+                    imageName: image.name,
+                    imageType: image.type,
+                });
             });
     }
 
@@ -297,6 +303,7 @@ class AvatarWithImagePicker extends React.Component {
                     onSave={this.props.onImageSelected}
                     imageUri={this.state.imageUri}
                     imageName={this.state.imageName}
+                    imageType={this.state.imageType}
                 />
             </View>
         );

src/libs/cropOrRotateImage/index.js

@@ -89,7 +89,7 @@ function cropCanvas(canvas, options) {
 function convertCanvasToFile(canvas, options = {}) {
     return new Promise((resolve) => {
         canvas.toBlob((blob) => {
-            const file = new File([blob], `${options.name || 'fileName'}.jpg`, {type: 'image/jpeg'});
+            const file = new File([blob], options.name || 'fileName.jpeg', {type: options.type || 'image/jpeg'});
             file.uri = URL.createObjectURL(file);
             resolve(file);
         });

src/libs/cropOrRotateImage/index.native.js

@@ -14,7 +14,7 @@ function cropOrRotateImage(uri, actions, options = {}) {
         RNImageManipulator.manipulate(uri, actions, options).then((result) => {
             RNFetchBlob.fs.stat(result.uri.replace('file://', '')).then(({size}) => {
                 resolve({
-                    ...result, size, type: 'image/png', name: `${options.name || 'fileName'}.jpg`,
+                    ...result, size, type: options.type || 'image/jpeg', name: options.name || 'fileName.jpg',
                 });
             });
         });