@widergy/mobile-ui 0.32.4 → 0.34.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.34.1](https://github.com/widergy/mobile-ui/compare/v0.34.0...v0.34.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* undefined is not a function ([#219](https://github.com/widergy/mobile-ui/issues/219)) ([ca80c4d](https://github.com/widergy/mobile-ui/commit/ca80c4d6b90176376f980234be432da87f6ed5ff))
+
+# [0.34.0](https://github.com/widergy/mobile-ui/compare/v0.33.0...v0.34.0) (2022-04-11)
+
+
+### Features
+
+* photo album and capture component added ([08f0749](https://github.com/widergy/mobile-ui/commit/08f07498f274b36bfc2a3be901527bd73f338a7a))
+
+# [0.33.0](https://github.com/widergy/mobile-ui/compare/v0.32.4...v0.33.0) (2022-03-25)
+
+
+### Features
+
+* allow any mime type ([#217](https://github.com/widergy/mobile-ui/issues/217)) ([9b99614](https://github.com/widergy/mobile-ui/commit/9b99614b93d98e14a57c409f0e7674c5832d1b58))
+
 ## [0.32.4](https://github.com/widergy/mobile-ui/compare/v0.32.3...v0.32.4) (2022-03-07)
 
 

package/lib/components/Capture/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Label from '../Label';
+import PhotoAlbum from '../PhotoAlbum';
+import Portal from '../Portal';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const Capture = ({
+  label,
+  helpText,
+  maxImages,
+  images,
+  selectedImages,
+  setSelectedImages,
+  deletePhoto,
+  onPressAddAnotherPhoto,
+  onUnknownCameraError,
+  selectedMode,
+  sourceCameraImage,
+  sourceEditImage,
+  messageErrorPermissionCamera
+}) => {
+  const isOnlyOnePicture = maxImages === 1 && images.length === 1;
+  const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
+
+  return (
+    <Portal.Host>
+      <Label semiBold big style={styles.paddingText}>
+        {label}
+      </Label>
+      <PhotoAlbum
+        images={images}
+        selectedImages={selectedImages}
+        setSelectedImages={setSelectedImages}
+        deletePhoto={deletePhoto}
+        isItPossibleToAddAnotherPhoto={isItPossibleToAddAnotherPhoto}
+        onPressAddAnotherPhoto={onPressAddAnotherPhoto}
+        onUnknownCameraError={onUnknownCameraError}
+        selectedMode={selectedMode}
+        numberOfPhotosInTheAlbumHasExceeded={images.length === maxImages}
+        isOnlyOnePicture={isOnlyOnePicture}
+        sourceCameraImage={sourceCameraImage}
+        sourceEditImage={sourceEditImage}
+        messageErrorPermissionCamera={messageErrorPermissionCamera}
+      />
+      <Label style={styles.paddingText}>{helpText}</Label>
+    </Portal.Host>
+  );
+};
+Capture.propTypes = propTypes;
+
+export default Capture;

package/lib/components/Capture/propTypes.js

@@ -0,0 +1,14 @@
+import { bool, string, func, array, number } from 'prop-types';
+
+export default {
+  label: string,
+  helpText: string,
+  maxImages: number,
+  images: array,
+  selectedImages: array,
+  setSelectedImages: func,
+  deletePhoto: func,
+  onPressAddAnotherPhoto: func,
+  onUnknownCameraError: func,
+  selectedMode: bool
+};

package/lib/components/Capture/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale } from '../../utils/scaleUtils';
+
+const styles = StyleSheet.create({
+  paddingText: {
+    paddingLeft: moderateHorizontalScale(5)
+  }
+});
+
+export default styles;

package/lib/components/FilePicker/index.js

@@ -26,37 +26,31 @@ class FilePicker extends Component {
       onError,
       onChange,
       maxFileByteSize,
+      avoidRetrieveFile,
       fileTypeError,
       allowedPDFUploadSizes,
       pdfFormatError
     } = this.props;
-    const promisePicker = new Promise(async (resolve, reject) => {
-      try {
-        const picker = await DocumentPicker.pick({
-          type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
-        });
-        return resolve(picker[0]);
-      } catch (error) {
-        return reject(error);
-      }
-    });
     try {
-      const document = await promisePicker;
+      const documents = await DocumentPicker.pick({
+        type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
+      });
+      const document = documents[0];
       const isPDF = document.type.includes('pdf');
       const isImage = document.type.includes('image');
       if (onlyPDFAllowed(allowedTypes) && !isPDF) {
         throw new Error(fileTypeError || 'El tipo de archivo debe ser PDF.');
       }
-      if (!isImage && !isImageByUri(document.uri) && !isPDF) {
+      if (allowedTypes && !isImage && !isImageByUri(document.uri) && !isPDF) {
         throw new Error(fileTypeError || 'Tipo de archivo inválido.');
       }
-      if (document.size > maxFileByteSize) {
+      if (maxFileByteSize && document.size > maxFileByteSize) {
         onMaxSizeError(document.size, maxFileByteSize);
         return;
       }
-      const file = await retrieveFile(document.uri, document.type);
+      const file = !avoidRetrieveFile && (await retrieveFile(document.uri, document.type));
 
-      if (isPDF && !isEmpty(allowedPDFUploadSizes)) {
+      if (file && isPDF && !isEmpty(allowedPDFUploadSizes)) {
         const isWrongFormat = await pdfAspectRatioValidation(file, allowedPDFUploadSizes);
         if (isWrongFormat) {
           throw new Error(
@@ -68,7 +62,7 @@ class FilePicker extends Component {
         }
       }
       if (onChange) {
-        onChange({ file });
+        onChange(avoidRetrieveFile ? { document } : { file });
       }
       this.setState({ fileName: document.name });
     } catch (err) {

package/lib/components/Label/utils.js

@@ -48,4 +48,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
 };
 
 export const markdownFormat = content =>
-  content?.replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n').replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;
+  content
+    ?.toString()
+    .replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n')
+    .replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const AddAnotherPhotoButton = ({ sourceCameraImage, onPress, disabled }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={[styles.container, disabled && styles.disabledContainer]}
+    disabled={disabled}
+  >
+    <Image source={sourceCameraImage} style={[styles.image, disabled && styles.imageDisabled]} />
+  </TouchableOpacity>
+);
+
+AddAnotherPhotoButton.propTypes = propTypes;
+
+export default AddAnotherPhotoButton;

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/propTypes.js

@@ -0,0 +1,7 @@
+import { bool, func, any } from 'prop-types';
+
+export default {
+  source: any,
+  onPress: func,
+  disabled: bool
+};

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/styles.js

@@ -0,0 +1,29 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateVerticalScale, moderateHorizontalScale } from '../../../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  container: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    paddingHorizontal: moderateHorizontalScale(10),
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10),
+    backgroundColor: '#F7F8F9',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  disabledContainer: {
+    backgroundColor: 'rgba(247, 248, 249, 0.5)'
+  },
+  image: {
+    width: moderateHorizontalScale(48),
+    height: moderateHorizontalScale(48)
+  },
+  imageDisabled: {
+    opacity: 0.5
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/DeleteView/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+import Label from '../../../Label';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const DeleteView = ({ label, color }) => (
+  <View style={styles.buttonContainer}>
+    <Icon name="trash-2" type="feather" size={20} color={color} />
+    <Label color={color}>{label}</Label>
+  </View>
+);
+
+DeleteView.propTypes = propTypes;
+
+export default DeleteView;

package/lib/components/PhotoAlbum/components/DeleteView/propTypes.js

@@ -0,0 +1,6 @@
+import { bool, string, oneOfType } from 'prop-types';
+
+export default {
+  color: oneOfType([bool, string]),
+  label: string
+};

package/lib/components/PhotoAlbum/components/DeleteView/styles.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    alignItems: 'center'
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/Photo/index.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { View, Image, TouchableOpacity, Modal, ImageBackground } from 'react-native';
+
+import SvgIconCheck from '../SvgIconCheck';
+import Icon from '../../../Icon';
+import DeleteView from '../DeleteView';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto, isSelectedMode }) => {
+  const uri = image.uri ?? image;
+  const [fullScreenPhotoModalVisible, setFullScreenPhotoModalVisible] = useState(false);
+
+  const wasTheImagePressed = selectedImages.includes(uri);
+
+  const deletePhotoInModal = () => {
+    setFullScreenPhotoModalVisible(false);
+    deletePhoto(uri);
+  };
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => {
+          if (isSelectedMode) {
+            onLongPressImage(uri);
+          } else {
+            setFullScreenPhotoModalVisible(true);
+          }
+        }}
+        onLongPress={() => {
+          onLongPressImage(uri);
+        }}
+      >
+        {wasTheImagePressed ? (
+          <ImageBackground borderRadius={5} source={{ uri }} style={styles.image}>
+            <SvgIconCheck size={24} />
+          </ImageBackground>
+        ) : (
+          <Image onError={onError} source={{ uri }} style={styles.image} />
+        )}
+      </TouchableOpacity>
+      <Modal animationType="fade" visible={fullScreenPhotoModalVisible}>
+        <View style={styles.modalContainer}>
+          <View style={styles.headerContainerModal}>
+            <TouchableOpacity
+              onPress={() => {
+                setFullScreenPhotoModalVisible(!fullScreenPhotoModalVisible);
+              }}
+              style={styles.backButtonHeaderModal}
+            >
+              <Icon name="arrowleft" type="antdesign" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+          <Image onError={onError} source={{ uri }} style={styles.imageFullScreen} />
+          {deletePhoto && (
+            <TouchableOpacity onPress={deletePhotoInModal} style={styles.footerContainerModal}>
+              <DeleteView label="Eliminar" color="white" />
+            </TouchableOpacity>
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+Photo.propTypes = propTypes;
+
+export default Photo;

package/lib/components/PhotoAlbum/components/Photo/propTypes.js

@@ -0,0 +1,10 @@
+import { bool, func, array, any } from 'prop-types';
+
+export default {
+  image: any,
+  onError: func,
+  onLongPressImage: func,
+  selectedImages: array,
+  deletePhoto: func,
+  isSelectedMode: bool
+};

package/lib/components/PhotoAlbum/components/Photo/styles.js

@@ -0,0 +1,53 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateVerticalScale, moderateHorizontalScale } from '../../../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10)
+  },
+  imageFullScreen: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover'
+  },
+  selectedImageIcon: {
+    position: 'absolute',
+    alignItems: 'flex-start'
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'space-between'
+  },
+  headerContainerModal: {
+    flexBasis: moderateHorizontalScale(54),
+    backgroundColor: '#3A3A3A',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: moderateHorizontalScale(15)
+  },
+  backButtonHeaderModal: {
+    width: moderateHorizontalScale(38),
+    height: moderateVerticalScale(38),
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  footerContainerModal: {
+    flexBasis: moderateHorizontalScale(57),
+    backgroundColor: '#3A3A3A',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonContainerFooterModal: {
+    alignItems: 'center'
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/ReplaceView/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+
+import Label from '../../../Label';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const ReplaceView = ({ label, color, sourceEditImage }) => (
+  <View style={styles.buttonContainer}>
+    <Image source={sourceEditImage} style={styles.image} />
+    <Label color={color}>{label}</Label>
+  </View>
+);
+
+ReplaceView.propTypes = propTypes;
+
+export default ReplaceView;

package/lib/components/PhotoAlbum/components/ReplaceView/propTypes.js

@@ -0,0 +1,6 @@
+import { bool, string, oneOfType } from 'prop-types';
+
+export default {
+  color: oneOfType([bool, string]),
+  label: string
+};

package/lib/components/PhotoAlbum/components/ReplaceView/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale, moderateVerticalScale } from '../../../../utils/scaleUtils';
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    alignItems: 'center'
+  },
+  image: {
+    width: moderateHorizontalScale(24),
+    height: moderateVerticalScale(24)
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/SvgIconCheck/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+
+import { styles, colorIcon } from './styles';
+import propTypes from './propTypes';
+
+const SvgIconCheck = ({ size }) => (
+  <View style={styles(size).backgroundIcon}>
+    <Icon color={colorIcon} name="check" size={16} />
+  </View>
+);
+
+SvgIconCheck.propTypes = propTypes;
+
+export default SvgIconCheck;

package/lib/components/PhotoAlbum/components/SvgIconCheck/propTypes.js

@@ -0,0 +1,5 @@
+import { number } from 'prop-types';
+
+export default {
+  size: number
+};

package/lib/components/PhotoAlbum/components/SvgIconCheck/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateVerticalScale } from '../../../../utils/scaleUtils';
+
+export const styles = size =>
+  StyleSheet.create({
+    backgroundIcon: {
+      margin: moderateVerticalScale(10),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#4D98FA',
+      borderRadius: 1000,
+      width: size,
+      height: size
+    }
+  });
+
+export const colorIcon = 'white';

package/lib/components/PhotoAlbum/index.js

@@ -0,0 +1,168 @@
+import React, { Fragment, useEffect, useState } from 'react';
+// eslint-disable-next-line react-native/split-platform-components
+import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { launchCamera } from 'react-native-image-picker';
+
+import Label from '../Label';
+import Portal from '../Portal';
+
+import AddAnotherPhotoButton from './components/AddAnotherPhotoButton';
+import DeleteView from './components/DeleteView';
+import ReplaceView from './components/ReplaceView';
+import Photo from './components/Photo';
+import styles from './styles';
+import propTypes from './propTypes';
+
+const PhotoAlbum = ({
+  images,
+  selectedImages,
+  setSelectedImages,
+  deletePhoto,
+  selectedMode,
+  isItPossibleToAddAnotherPhoto,
+  onPressAddAnotherPhoto,
+  onError,
+  title,
+  subTitle,
+  onUnknownCameraError,
+  numberOfPhotosInTheAlbumHasExceeded,
+  isOnlyOnePicture,
+  sourceCameraImage,
+  sourceEditImage,
+  messageErrorPermissionCamera
+}) => {
+  const requestPermission = async () => {
+    const permissionsResponse = await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.CAMERA,
+      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+    ]);
+
+    const granted =
+      permissionsResponse[PermissionsAndroid.PERMISSIONS.CAMERA] === 'granted' &&
+      permissionsResponse[PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE] === 'granted';
+
+    if (!granted) {
+      throw messageErrorPermissionCamera;
+    }
+  };
+
+  const [isSelectedMode, setIsSelectedMode] = useState(false);
+  const onLongPressImage = uri => {
+    if (selectedImages.includes(uri)) {
+      setSelectedImages(selectedImages.filter(aPicUri => aPicUri !== uri));
+    } else {
+      setSelectedImages([...selectedImages, uri]);
+    }
+  };
+  const deleteSelectedPhotos = () => {
+    deletePhoto();
+  };
+
+  const openCamera = async () => {
+    await requestPermission();
+
+    const response = await launchCamera({});
+    const { didCancel, errorCode, errorMessage, assets } = response;
+    if (didCancel || errorCode) {
+      if (errorCode) {
+        onUnknownCameraError(`[${errorCode}] : ${errorMessage}`);
+      }
+    } else {
+      const { uri } = assets[0];
+      onPressAddAnotherPhoto({ newImage: { uri }, numberOfPhotosInTheAlbumHasExceeded });
+    }
+  };
+
+  const isDivisibleInModuleOfThree = () => {
+    const numberOfObjectsInView = isItPossibleToAddAnotherPhoto ? images.length + 1 : images.length;
+    return numberOfObjectsInView % 3 !== 0;
+  };
+
+  const cameraOnPress = () =>
+    openCamera().catch(error => {
+      if (typeof error === 'string') {
+        onError(error);
+      } else {
+        onUnknownCameraError(error);
+      }
+    });
+
+  const onPressAddAnotherPhotoButton = deleteSelectedImages => {
+    if (deleteSelectedImages) {
+      setSelectedImages([]);
+    }
+    cameraOnPress();
+  };
+
+  useEffect(() => {
+    if (selectedImages.length > 0) {
+      setIsSelectedMode(true);
+    } else {
+      setIsSelectedMode(false);
+    }
+  }, [selectedImages]);
+
+  return (
+    <Fragment>
+      {title && (
+        <Label big semiBold color="#666666" style={styles.title}>
+          {title}
+        </Label>
+      )}
+      {subTitle && (
+        <Label color="#3A3A3A" style={styles.subTitle}>
+          {subTitle}
+        </Label>
+      )}
+      <View style={styles.container}>
+        {images.length !== 0 &&
+          images.map(image => (
+            <Photo
+              key={image.uri ?? image}
+              image={image}
+              onLongPressImage={onLongPressImage}
+              selectedImages={selectedImages}
+              deletePhoto={deletePhoto}
+              isSelectedMode={isSelectedMode}
+              onError={onError}
+            />
+          ))}
+        {isItPossibleToAddAnotherPhoto && (
+          <AddAnotherPhotoButton
+            onPress={onPressAddAnotherPhotoButton}
+            disabled={numberOfPhotosInTheAlbumHasExceeded}
+            sourceCameraImage={sourceCameraImage}
+          />
+        )}
+        {isDivisibleInModuleOfThree() && <View style={styles.image} />}
+        {selectedMode && isSelectedMode && (
+          <Portal>
+            <View style={styles.selectedModeContainer}>
+              <View style={styles.selectionLabelContainer}>
+                <Label color="white">{`${selectedImages.length} selección`}</Label>
+              </View>
+              <View style={styles.buttonsContainer}>
+                {isOnlyOnePicture && (
+                  <TouchableOpacity
+                    onPress={() => onPressAddAnotherPhotoButton(numberOfPhotosInTheAlbumHasExceeded)}
+                    style={styles.deleteSelectedPhotos}
+                  >
+                    <ReplaceView label="Remplazar" color="#3A3A3A" sourceEditImage={sourceEditImage} />
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity onPress={deleteSelectedPhotos} style={styles.deleteSelectedPhotos}>
+                  <DeleteView label="Eliminar" color="#3A3A3A" />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Portal>
+        )}
+      </View>
+    </Fragment>
+  );
+};
+
+PhotoAlbum.propTypes = propTypes;
+
+export default PhotoAlbum;

package/lib/components/PhotoAlbum/propTypes.js

@@ -0,0 +1,17 @@
+import { bool, string, func, array } from 'prop-types';
+
+export default {
+  images: array,
+  selectedImages: array,
+  setSelectedImages: func,
+  deletePhoto: func,
+  selectedMode: bool,
+  isItPossibleToAddAnotherPhoto: bool,
+  onPressAddAnotherPhoto: func,
+  onError: func,
+  title: string,
+  subTitle: string,
+  onUnknownCameraError: func,
+  numberOfPhotosInTheAlbumHasExceeded: bool,
+  isOnlyOnePicture: bool
+};

package/lib/components/PhotoAlbum/styles.js

@@ -0,0 +1,51 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale, moderateVerticalScale, WINDOW_WIDTH } from '../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  selectedModeContainer: {
+    width: WINDOW_WIDTH,
+    position: 'absolute',
+    bottom: 0
+  },
+  selectionLabelContainer: {
+    height: moderateVerticalScale(27),
+    alignItems: 'center',
+    backgroundColor: '#4D98FA'
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    backgroundColor: '#E4E6EA',
+    paddingHorizontal: 60
+  },
+  deleteSelectedPhotos: {
+    height: moderateVerticalScale(58),
+    justifyContent: 'center'
+  },
+  title: {
+    marginBottom: moderateVerticalScale(10),
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  subTitle: {
+    marginBottom: moderateVerticalScale(5),
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10),
+    paddingHorizontal: moderateHorizontalScale(10)
+  }
+});
+
+export default styles;

package/lib/index.js

@@ -69,3 +69,7 @@ export { default as withLoading } from './components/WithLoading';
 // Hooks
 export { default as useEffectOnlyOnUpdates } from './hooks/useEffectOnlyOnUpdates';
 export { default as useTogglableState } from './hooks/useTogglableState';
+
+// Photo
+export { default as PhotoAlbum } from './components/PhotoAlbum';
+export { default as Capture } from './components/Capture';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "0.32.4",
+  "version": "0.34.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-document-picker": "^3.4.0",
-    "react-native-image-picker": "^0.28.0",
+    "react-native-image-picker": "4.x.x",
     "react-native-image-resizer": "^1.2.2",
     "react-native-svg": "*",
     "react-native-vector-icons": "*"